Javascript的无new构建实例详解


Posted in Javascript onMay 15, 2016

看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下

第一种方式:

var A = function(){
return A.prototype.init();
}
A.prototype = {
init:function(){
this.age = 50;
console.log(this);
return this;
},
age:100
}
console.log(A() === new A());

Javascript的无new构建实例详解

1.分析下结果为什么为true

A()内部调用的是A.prototype.init()函数

new A() 内部会调用构造函数,而它的构造函数就是function(){return A.prototype.init();},同样调用的是A.prototype.init()函数

2.分析下A.prototype.init()函数返回什么

那就要看this了,判断this指向谁,我们要在函数调用的时候分析,由于它是作为原型对象的属性调用的,所以this就是原型对象A.prototype

这种创建方式,无论你调用多少次A(),他们其实都是返回的同一个对象,所以对b对象的修改会影响a对象,见下图

var a = A();
var b = A();
console.log(a.age);
console.log(b.age);
b.age = 22;
console.log(a.age);
console.log(b.age);

Javascript的无new构建实例详解

那么如何解决这种问题呢,接下来就讲下第二种方式,它也是jquery采用的方式

第二种方式

var A = function(){
return new A.prototype.init();//①
}
A.prototype = {
init:function(){
this.age = 50;
console.log(this);
return this;
},
age:100
}
A.prototype.init.prototype = A.prototype;//②
var a = new A();
var b = new A();
console.log(a===b);
console.log(a.age);
console.log(b.age);
b.age = 22;
console.log(a.age);
console.log(b.age);

Javascript的无new构建实例详解

分析下①和②

①中new A.prototype.init()主要做了三件事

创建一个空对象var obj = {};

obj对象属性_proto_指向函数A.prototype.init的prototype;

将A.prototype.init函数的this替换成obj对象,在调用A.prototype.init函数,A.prototype.init.call(obj),并返回新对象

因为①返回的对象的原型是A.prototype.init.prototype,它和A.prototype并没什么关系,为了使新返回的对象可以继承自A.prototype,所以②让A.prototype.init.prototype指向A.prototype

所以方式二即创建了实例,又保证了各自的作用域独立。

以上所述是小编给大家介绍的Javascript的无new构建实例详解,希望对大家以上帮助,如果大家想了解更多资讯,敬请关注三水点靠木网站!

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
基于js实现数组相邻元素上移下移
May 19 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
Javascript基础知识盲点总结之函数
May 15 #Javascript
深入理解$.each和$(selector).each
May 15 #Javascript
js中最容易被忽视的事件问题大总结
May 15 #Javascript
jquery点击改变class并toggle的实现代码
May 15 #Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 #Javascript
浅析js绑定事件的常用方法
May 15 #Javascript
js添加事件的通用方法推荐
May 15 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
市场开发计划书
2014/05/07 职场文书
化工实习心得体会
2014/09/09 职场文书
中秋节晚会开场白
2015/05/29 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书