1.jquery源码分析-无 new 构造


http://www.cnblogs.com/coco1s/p/5261646.html

http://www.cnblogs.com/SheilaSun/p/4779895.html

// 用一个函数域包起来,就是所谓的沙箱
// 在这里边 var 定义的变量,属于这个函数域内的局部变量,避免污染全局
// 把当前沙箱需要的外部变量通过函数参数引入进来
// 只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数
(function(window, undefined) {
   // jQuery 代码
})(window);
无 new 的构造方式

(function( window, undefined ) {  
     
    var jQuery = (function() {  
       // 构建jQuery对象  
       var jQuery = function( selector, context ) {  
           return new jQuery.fn.init( selector, context, rootjQuery );  
       }  
     
       // jQuery对象原型  
       jQuery.fn = jQuery.prototype = {  
           constructor: jQuery,  
           init: function( selector, context, rootjQuery ) {  
              // something to do  
           }  
       };  
     
       // Give the init function the jQuery prototype for later instantiation  
       jQuery.fn.init.prototype = jQuery.fn;  
     
       // 合并内容到第一个参数中,后续大部分功能都通过该函数扩展  
       // 通过jQuery.fn.extend扩展的函数,大部分都会调用通过jQuery.extend扩展的同名函数  
       jQuery.extend = jQuery.fn.extend = function() {};  
        
       // 在jQuery上扩展静态方法  
       jQuery.extend({  
           // something to do  
       });  
   
        // 到这里,jQuery对象构造完成,后边的代码都是对jQuery或jQuery对象的扩展  
       return jQuery;  
     
    })();  
     
    window.jQuery = window.$ = jQuery;  
})(window);  


大部分人初看 jQuery.fn.init.prototype = jQuery.fn 这一句都会被卡主,很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要,分点解析一下:

1)首先要明确,使用 $(‘xxx’) 这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法取完成。

2)将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3)也就是实例化方法存在这么一个关系链

  • jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
  • new jQuery.fn.init() 相当于 new jQuery() ;
  • jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。
  • 构造函数有return值怎么办?
    构造函数里没有显式调用return时,默认是返回this对象,也就是新创建的实例对象。
    当构造函数里调用return时,分两种情况:
    1.return的是五种简单数据类型:String,Number,Boolean,Null,Undefined。
    这种情况下,忽视return值,依然返回this对象。
    2.return的是Object
    这种情况下,不再返回this对象,而是返回return语句的返回值。



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值