在学习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创建对象:深入理解编程原理相关推荐

  1. babel原理_【JavaScript】深入理解Babel原理及其使用

    前言 半年前也写过一篇babel的简单使用文章,当时看了下babel的文档,但是很多地方还不理解,所以文章里没有怎么说道babel的一些关键概念,只是机械的描述如何使用(配合webstorm). 最近 ...

  2. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  3. 深入理解JavaScript系列(四): 模块化编程

    本文整理自 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1.模块的写法 1.原始写法 模块就是实现特定功能的一组方法. ...

  4. JavaScript面向对象——封装及相关原理解析

    <JavaScript设计模式>面向对象编程--封装及相关原理解析 说明:本人编写js习惯不写分号:文章中的源码可根据自己的编程风格修改. 面向对象 面向对象编程就是将你的需求抽象成一个对 ...

  5. JavaScript之全面理解面向对象的JS

    今天看到一篇文章写得很好,对于像博主这种js一般级别的菜鸟很有帮助,博主秉着"好文要转"的原则收藏了这篇文章,简单排了下版,分享给大家,本文转自原文:http://www.ibm. ...

  6. 我对javascript对象的理解

    前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...

  7. 深入理解浏览器原理和架构|硬核

    本文用47张图带你了解「浏览器的发展史」.「浏览器的架构」.「浏览器的基本原理」以及 「浏览器的其它小知识」 ???? 正文开始 浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示HTML文档. ...

  8. JavaScript面向对象——深入理解寄生组合继承

    JavaScript面向对象--深入理解寄生组合继承 之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承 寄生组合继承: 思路:组合继承中,构造函数继 ...

  9. Javascript创建对象几种方法解析

    Javascript创建对象几种方法解析 Javascript面向对象编程一直是面试中的重点,将自己的理解整理如下,主要参考<Javascript高级程序设计 第三版>,欢迎批评指正. 通 ...

最新文章

  1. 协方差中的正相关与负相关
  2. 点云网络的论文理解(四)-点云网络的优化 PointNet++: Deep Hierarchical Feature Learning on Point Sets in a Metric Space
  3. Rise of Shadows 闰年leap year-无法线性筛
  4. *【HDU - 2819】Swap(二分图匹配,输出路径)(待证明:是否是最少交换次数?)
  5. 免费python基础笔记_python基础笔记(一)
  6. java线程的优点_Java使用多线程的优势
  7. 【matlab】找出数组中符合条件的数并赋值
  8. 95-36-210-ChannelHandler-系统Channel-TimeoutHandler1
  9. python PPT学习资料分享
  10. poj 2356 Find a multiple
  11. Delphi TForm 转 TFrame
  12. 解决安装VC2015失败的问题
  13. 计算机文化基础(高职高专版 第十一版)第九章 答案
  14. 1999年冬发出第一个论坛帖,弹指二十年后,他们遇见了AI
  15. 苹果手机小圆点怎么设置?悬浮球设置,轻松学会
  16. ns-3中的数据跟踪与采集——Tracing系统的配置
  17. Android 仿微信图片选择器 PictureSelector3.0 的使用
  18. 词霸天下---136 词根 【-imag- = -imit- 图像 】仅供学习使用
  19. Matlab实现拉格朗日插值函数
  20. 安徽大学2021计算机考研专业课题型,安徽大学电子信息工程学院2021研究生入学考试科目调整通知...

热门文章

  1. 获取自Linux上的Epoch以来的当前时间,Bash
  2. 如果SQL Server中存在表,如何删除表?
  3. 如何实施基本的“长轮询”?
  4. 在JavaScript中生成特定范围内的随机整数?
  5. 网卡驱动怎么安装方法教程
  6. win10安全模式怎么修复系统
  7. etcher制作mac启动盘_如何在Mac上创建和引导Linux USB驱动器
  8. markdown 本地链接_markdown多平台发布及七牛图床使用
  9. 转 LCD的接口类型详解
  10. 下载并安装Redis教程