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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
bootstrap table小案例
Oct 21 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JavaScript工具库MyTools详解
Jan 01 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分页显示制作详细讲解
2006/12/05 PHP
实用函数8
2007/11/08 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php实现评论回复删除功能
2017/05/23 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
Python深度优先算法生成迷宫
2018/01/22 Python
使用python实现链表操作
2018/01/26 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
百度软件工程师职位
2013/02/14 面试题
毕业生的自我评价
2013/12/30 职场文书
经典演讲稿范文
2013/12/30 职场文书
实习生的自我评价
2014/01/08 职场文书
消防安全承诺书
2014/05/22 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
六查六看自查报告
2014/10/14 职场文书
统计工作个人总结
2015/03/03 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript