简述jq的实现原理

最新推荐文章于 2022-06-05 16:16:43 发布

Shaft_

最新推荐文章于 2022-06-05 16:16:43 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： jq

本文链接：https://blog.youkuaiyun.com/Shaft_/article/details/83345868

javascript 专栏收录该内容

9 篇文章

订阅专栏

该博客详细解析了jQuery（jq）的实现原理，包括沙箱机制，通过自执行函数封装实现细节并对外提供jQuery和$符号。讨论了无new化的jq对象创建过程，解释了链式调用如何通过返回this实现。此外，还区分了$.extend与$.fn.extend的不同用法，前者用于扩展全局函数，后者扩展实例方法。最后，介绍了$.extend()的深浅复制概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述jq的实现原理

1. 沙箱：

jq利用自执行函数，将所有的实现细节封装在自执行函数内，对外仅仅暴露jQuery和$符号：

    (function(w, u) {
    	"use strict";
    	w.jQuery = w.$ = jQuery;
    	var a;
    	if (a == u)
    		return;
    })(window);

2. 无new化

在jq中我们使用选择器，是直接使用$(selector)的，但是其实他返回的是一个jq对象，其中挂载了很多jq方法。

    (function(window, undefined){
        jQuery = function(selector, context){
            return new jQuery.fn.init(selector, context);
        },
        
        jQuery.fn = jQuery.prototype = {
            init: function(selector, context, rootjQuery){
                // ...
            }
        },
        
        
        jQuery.fn.init.prototype = jQuery.fn;
    })(window);

当我们传入一个选择器时，会返回new jQuery.fn.init(selector, context);而当我们传入空选择器时，在init中会显示返回this，此时this是指带init，而init的prototype被赋值为jQuery.fn，因此就相当于jQuery的实例。