                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery源码解析（架构与依赖模块）

下面的代码也能实现相同的功能，为何要引入 fn.init 这个东西呢？好处是什么？

var $$$ = ajQuery2 = function(selector) {

if(!(this instanceof(ajQuery2))){

return new ajQuery2(selector);

}

this.selector = selector;

}

ajQuery2.prototype = {

name: 'aaron',

init: function(selector) {

this.selector = selector;

return this;

constructor: ajQuery2

}

var a = ajQuery2("abc");

console.dir(a);

moonload

2015-10-09

源自：jQuery源码解析（架构与依赖模块） 2-2

关注问题我要回答

1069

操作

收起

2 回答

hnull
2016-01-24

按照你的代码 ajQuery2('#abc') 这样, 每次调用ajQuery 都会判断 this instanceof(ajQuery2) 2次，第一次this 肯定是指向window，然后第二次才指向 new ajQuery2生成的实例，按照jQuery的设计就分开来了，那样的话就不需要判断是否是jQuery构造器的实例了，(jQuery通过一些巧妙的写法使返回的对象就像是通过 new jQuery(selector)生成的一样，具体代码是

jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
}
jQuery.fn = jQuery.prototype = {
    constructor: jQuery,
    init:function(selector){
        return this;
    }
    ...
}
jQuery.fn.init.prototype = jQuery.fn;

)其实到这边也不是什么大问题，至少你发的那些解决了死循环的问题。

其次就是要涉及到后面jQuery里面工具方法(也叫静态方法)和实例方法的设计了，这边的$.fn只是$.prototype的一个别名而已，如果按照你代码那样，其实也是可以实现ajQuery 和ajQuery.prototype 两者分别的拓展extend，然后在ajQuery.prototype上扩展的方法调用ajQuery上的方法，所以引入fn.init主要应该还是因为内部构造器jQuery.fn.init和jQuery本身分开比较优雅