JavaScript创建对象:深入理解编程原理
在学习JavaScript的过程中,经常被它的对象系统(Object,Function,Prototype)搞的云里雾里的,感觉这些东西如果不搞清楚,后续的JavaScript学习也会不扎实,所以,下决心把它搞清楚,让我们开始吧!
这个学习过程中,主要的参考书目是《JavaScript: The Good Parts》、《JavaScript: The Definitive Guide》和《Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications, and libraries》;主要的分析工具是IE和IE开发者工具。
1. 对象
JavaScript语言没有类的概念,除了基本类型(Number、String、booleans、null和undefined)之外,一切都是对象。对象的定义如下,用英文比较准确:
Objects are mutable keyed collections.
An object is a container of properties, where a property has a name and a value.
A property name can be any string, including the empty string.
A property value can be any JavaScript value except for undefined.
这些都不难理解,关键是这个:
Object includes a prototype linkage feature that allows one object to inherit the properties of another.
这里,这个原型链接(a prototype linkage)是隐藏的(在Debugger里面看不见的),在某些实现中,它的属性名是__proto__
补充一下,任何一个对象的__proto__链接都是不为空的,对于一个从Object Literal中创建的对象,其__proto__指向Object.prototype。
有了__proto__链接之后,就可以发挥一些面向对象的威力了,头一个就是Delegation。Delegation是指当从一个对象中获取一个属性失败时,JS会自动再尝试去其__proto__链接指向的对象中去查找,如果还找不到,就沿着__proto__一路找上去,指导找到Object.prototype为止。根据上述Delegation算法的描述,你可以很容易理解Delegation过程是动态的,这次可以从祖先中找到A属性,不代表下次一定能找到。
这里需要注意的是,__proto__链接只对查询有效,而对Update无效,也就是说,如果你给一个属性赋值的话,而这个属性在该对象中还不存在,而在__proto__祖先中已有同名属性,但这是JS会在该对象中再新建一个属性,而不是修改祖先的属性值。
函数对象首先是一个对象,所以,它也有__proto__链接,也有Delegation。函数对象还有一个特殊之处就是它会有一个叫做prototype的属性(又是prototype?, 对,这就是我一直用__proto__链接来代表上文提到的prototype linkage,这样可以避免混淆)。
当用var Class = function(){}定义一个函数时,JS会生成一个函数对象F,函数对象F的__proto__指针指向Function.prototype, 同时F还会有一个property属性,property属性的引用一个新创建的对象p,这个对象p只有一个属性是构造函数constructor(),构造函数constructor()的值就是函数对象F,而对象p的__proto__指针则指向Object.Prototype,如下图:
了解了函数对象,再看看它如何发挥作用:当用new激活一个函数时,一个新对象会被创建出来,其内容是执行函数的返回结果,而这个对象的__proto__链接指向函数的prototype属性所引用的对象
,如下面的例子所示:
抽象一下,就是这样:
另外,如果你只是简单写写网页,的确可能不需要把JS搞懂这么清楚,但是如果你真正重视JS,打算应用例如node.js,backbone.js这样的JS框架的话,那么,我认为还是需要真正把JS搞明白的。
好,切入正题吧,在JavaScript: The Good Parts当中,给出了一个创建对象的常用方式:
Object.create = function (o) {
var F = function () {};
F.prototype = o;
return new F();
};
var b=Object.create(a);
结合1,2节的内容,我们来理解一下上述这段代码:
首先,在执行var b=Object.create(a);之前,已经有了a对象,如下图:
在执行了var F = function () {};之后,F函数对象被创建出来,他的property属性也被赋值指向一个新创建出来的对象,详细规则在第二节描述过:
当用var ff = function(){}定义一个函数时,JS会生成一个函数对象F,函数对象F的__proto__指针指向Function.prototype(在下图中省略了), 同时F还会有一个property属性,property属性的值指向一个新创建的对象P,这个对象P只有一个属性是构造函数constructor(),构造函数constructor()的值就是函数对象F,而对象P的__proto__指针则指向Object.Prototype。
执行了F.prototype = o; 之后, F的prototype属性指向了对象A.
执行new F();之后,根据第2节中描述的规则,执行之后的对象关系如下:
当用new激活一个函数时,一个新对象会被创建出来,其内容是执行函数的返回结果,而这个对象的__proto__链接指向函数的prototype属性所引用的对象
函数Object.create返回之后,F和p都不存在了,因此,最后的对象关系.
总结一下,我们可以看到,对象的__proto__链接是不能直接修改的,而函数对象的prototype属性是可以修改的,因此,Object.create实际上是利用了这个特点,结合new来完成了一个拷贝创建的过程,希望这个例子能够帮助大家更好地理解!!
转载于:https://blog.51cto.com/wws5201985/773857
JavaScript创建对象:深入理解编程原理相关推荐
- babel原理_【JavaScript】深入理解Babel原理及其使用
前言 半年前也写过一篇babel的简单使用文章,当时看了下babel的文档,但是很多地方还不理解,所以文章里没有怎么说道babel的一些关键概念,只是机械的描述如何使用(配合webstorm). 最近 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- 深入理解JavaScript系列(四): 模块化编程
本文整理自 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1.模块的写法 1.原始写法 模块就是实现特定功能的一组方法. ...
- JavaScript面向对象——封装及相关原理解析
<JavaScript设计模式>面向对象编程--封装及相关原理解析 说明:本人编写js习惯不写分号:文章中的源码可根据自己的编程风格修改. 面向对象 面向对象编程就是将你的需求抽象成一个对 ...
- JavaScript之全面理解面向对象的JS
今天看到一篇文章写得很好,对于像博主这种js一般级别的菜鸟很有帮助,博主秉着"好文要转"的原则收藏了这篇文章,简单排了下版,分享给大家,本文转自原文:http://www.ibm. ...
- 我对javascript对象的理解
前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...
- 深入理解浏览器原理和架构|硬核
本文用47张图带你了解「浏览器的发展史」.「浏览器的架构」.「浏览器的基本原理」以及 「浏览器的其它小知识」 ???? 正文开始 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示HTML文档. ...
- JavaScript面向对象——深入理解寄生组合继承
JavaScript面向对象--深入理解寄生组合继承 之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承 寄生组合继承: 思路:组合继承中,构造函数继 ...
- Javascript创建对象几种方法解析
Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...
最新文章
- 协方差中的正相关与负相关
- 点云网络的论文理解(四)-点云网络的优化 PointNet++: Deep Hierarchical Feature Learning on Point Sets in a Metric Space
- Rise of Shadows 闰年leap year-无法线性筛
- *【HDU - 2819】Swap(二分图匹配,输出路径)(待证明:是否是最少交换次数?)
- 免费python基础笔记_python基础笔记(一)
- java线程的优点_Java使用多线程的优势
- 【matlab】找出数组中符合条件的数并赋值
- 95-36-210-ChannelHandler-系统Channel-TimeoutHandler1
- python PPT学习资料分享
- poj 2356 Find a multiple
- Delphi TForm 转 TFrame
- 解决安装VC2015失败的问题
- 计算机文化基础(高职高专版 第十一版)第九章 答案
- 1999年冬发出第一个论坛帖,弹指二十年后,他们遇见了AI
- 苹果手机小圆点怎么设置?悬浮球设置,轻松学会
- ns-3中的数据跟踪与采集——Tracing系统的配置
- Android 仿微信图片选择器 PictureSelector3.0 的使用
- 词霸天下---136 词根 【-imag- = -imit- 图像 】仅供学习使用
- Matlab实现拉格朗日插值函数
- 安徽大学2021计算机考研专业课题型,安徽大学电子信息工程学院2021研究生入学考试科目调整通知...