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下的动画处理总结
Oct 10 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
json传值以及ajax接收详解
May 24 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
老生常谈js中的MVC
Jul 25 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
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中curl_multi的应用
2013/07/17 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript window.location对象
2014/11/14 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
python的常见命令注入威胁
2013/02/18 Python
深入理解Python中的super()方法
2017/11/20 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
django 修改server端口号的方法
2018/05/14 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python变量访问权限控制详解
2019/06/29 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
农村党支部先进事迹
2014/01/14 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
爱心募捐通知范文
2015/04/27 职场文书
早恋主题班会
2015/08/14 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang