jQuery技术

jquery源码学习笔记(一)jQuery的无new构建,jquery学习笔记(3)

字号+ 作者:H5之家 来源:H5之家 2016-08-07 10:00 我要评论( )

我们再改一下: var aQuery = function (selector, context) { return new aQuery.prototype.init(selector);}aQuery.prototype = {init: function (selector) { if (selector=="a" ) this .age = 18 return this ;

我们再改一下:

var aQuery = function(selector, context) { return new aQuery.prototype.init(selector); } aQuery.prototype = { init: function(selector) { if(selector=="a") this.age = 18 return this; }, name: function() { return age; }, age: 20 } aQuery.prototype.init.prototype = aQuery.prototype; aQuery("a").age //18 aQuery("b").age //20 aQuery("a").name() //20

 

最后在看一下jQuery源码:

(function(window, undefined) {   jQuery = function(selector, context) { jQuery.fn.init(selector, context, rootjQuery); }, jQuery.fn = jQuery.prototype = { init: function(selector, context, rootjQuery) { // ... } } jQuery.fn.init.prototype = jQuery.fn; })(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)也就是实例化方法存在这么一个关系链  

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery操作checkbox选择(list/table)

    jQuery操作checkbox选择(list/table)

    2016-08-07 16:00

  • [原]jQuery .tmpl(), .template()学习

    [原]jQuery .tmpl(), .template()学习

    2016-08-06 18:00

  • jQuery.buildFragment()(六)

    jQuery.buildFragment()(六)

    2016-08-06 17:00

  • jQuery基礎 (一)樣式篇

    jQuery基礎 (一)樣式篇

    2016-08-06 14:01

网友点评
d