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 相关文章推荐
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
基于jquery的表格排序
Sep 11 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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调用Java对象的方法
2006/10/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
popdiv
2006/07/14 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
JavaScript中URL编码函数代码
2011/01/11 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
js单例模式详解实例
2013/11/21 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python实现简单http服务器功能
2018/09/17 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python 没有main函数的原因
2020/07/10 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
幼儿园秋游活动方案
2014/01/21 职场文书
元旦晚会主持词
2014/03/24 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang