jQuery源码学习之对象创建与初始化
2016-04-23 22:44
447 查看
读了几次jquery创建对象的部分的源码都没读懂,今天终于想通了,持续兴奋中。。。
(一)、首先说明下jquery的对象创建方式:
大致说明如下:
对外的接口jQuery()本质上通过工厂模式创建并返回了一个new出来的jquery对象;
jquery的构造函数实现在jquery.fn的init方法中;
为什么这么绕???
(二)、自己写了一个小demo解释一切
一、控制台调用的结果(注释掉最后一行):
1、执行Fairy():
输出:undefined
2、执行Fairy.prototype.init():
输出:Fairy
二、控制台调用的结果(取消注释最后一行Fairy.prototype.init.prototype = Fairy.prototype):
1、执行Fairy():
输出:Fairy
2、执行Fairy.prototype.init():
输出:Fairy
(三)、解释如下:
1、执行new Fairy.prototype.init()大致做了几件事:
申请一个新地址addr1;
将Fairy.prototype.init()方法中的指令拷贝到当前地址addr1,注意包括方法隐藏的__proto__关联的Fairy.prototype.init方法的原型方法的地址(最后一行注释掉的情况下,遍历原型链时应该关联到老祖宗Object上去了);
执行add1中的指令;
返回add1(新对象的访问地址);
2、最后一行注释掉的情况下,执行new Fairy.prototype.init()时,this指add1,这个地址对应的环境中并没有name属性,上游原型prototype(即Object)中也没有该属性,因此返回undefined;
3、最后一行注释掉的情况下,执行Fairy.prototype.init()时,this指Fairy.prototype对象的地址,这个地址对应的环境中有name属性,可以访问到;
4、取消最后一行注释掉的情况下,执行new Fairy.prototype.init()时,this指add1,这个地址对应的环境中并没有name属性,上游原型prototype为Fairy.prototype对象,该对象中有该属性,因此借助原型链机制访问到了;
5、取消最后一行注释掉的情况下,执行Fairy.prototype.init()时,this指Fairy.prototype对象的地址,这个地址对应的环境中有name属性,可以访问到;
(四)、总结
之所以这么绕,是为了方便jQuery.prototype中的属性或方法能够通过new(即实例方法)和静态工具方法都能调用到~
大脑都快想跪掉了,终于整通了!
跪服。。。
(一)、首先说明下jquery的对象创建方式:
jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { init:function(){ console.log('---in init---'); return this; }, jquery: version, constructor: jQuery, ……………… };jQuery.fn.init.prototype = jQuery.fn;
大致说明如下:
对外的接口jQuery()本质上通过工厂模式创建并返回了一个new出来的jquery对象;
jquery的构造函数实现在jquery.fn的init方法中;
为什么这么绕???
(二)、自己写了一个小demo解释一切
var Fairy = function(opt) { return new Fairy.prototype.init(opt); }; Fairy.prototype = { name: 'Fairy', init: function(opt) { console.log(this.name); return this; } } // Fairy.prototype.init.prototype = Fairy.prototype;
一、控制台调用的结果(注释掉最后一行):
1、执行Fairy():
输出:undefined
2、执行Fairy.prototype.init():
输出:Fairy
二、控制台调用的结果(取消注释最后一行Fairy.prototype.init.prototype = Fairy.prototype):
1、执行Fairy():
输出:Fairy
2、执行Fairy.prototype.init():
输出:Fairy
(三)、解释如下:
1、执行new Fairy.prototype.init()大致做了几件事:
申请一个新地址addr1;
将Fairy.prototype.init()方法中的指令拷贝到当前地址addr1,注意包括方法隐藏的__proto__关联的Fairy.prototype.init方法的原型方法的地址(最后一行注释掉的情况下,遍历原型链时应该关联到老祖宗Object上去了);
执行add1中的指令;
返回add1(新对象的访问地址);
2、最后一行注释掉的情况下,执行new Fairy.prototype.init()时,this指add1,这个地址对应的环境中并没有name属性,上游原型prototype(即Object)中也没有该属性,因此返回undefined;
3、最后一行注释掉的情况下,执行Fairy.prototype.init()时,this指Fairy.prototype对象的地址,这个地址对应的环境中有name属性,可以访问到;
4、取消最后一行注释掉的情况下,执行new Fairy.prototype.init()时,this指add1,这个地址对应的环境中并没有name属性,上游原型prototype为Fairy.prototype对象,该对象中有该属性,因此借助原型链机制访问到了;
5、取消最后一行注释掉的情况下,执行Fairy.prototype.init()时,this指Fairy.prototype对象的地址,这个地址对应的环境中有name属性,可以访问到;
(四)、总结
之所以这么绕,是为了方便jQuery.prototype中的属性或方法能够通过new(即实例方法)和静态工具方法都能调用到~
大脑都快想跪掉了,终于整通了!
跪服。。。
相关文章推荐
- Python动态类型的学习---引用的理解
- 土人系列AS入门教程 -- 对象篇
- C#托管堆对象实例包含内容分析
- C#实现获取不同对象中名称相同属性的方法
- javascript asp教程第十一课--Application 对象
- PowerShell中使用Out-String命令把对象转换成字符串输出的例子
- VBS教程:对象-正则表达式(RegExp)对象
- C#检查指定对象是否存在于ArrayList集合中的方法
- sql2008启动代理未将对象应用到实例解决方案
- C#编程自学之类和对象
- C++中对象的常引用、动态建立和释放相关知识讲解
- 介绍php设计模式中的工厂模式
- php中将一个对象保存到Session中的方法
- php对象和数组相互转换的方法
- PHP中把对象转换为关联数组代码分享
- C#写入对象或集合类型数据到xml文件的方法
- C#利用反射来判断对象是否包含某个属性的实现方法
- asp.net 简单工厂模式和工厂方法模式之论述
- ASP.NET中使用Application对象实现简单在线人数统计功能
- asp提示Server 对象 错误 ASP 0178 : 80070005