开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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来完成了一个拷贝创建的过程,希望这个例子能够帮助大家更好地理解!!










本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/773857,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Javascript的进阶版--VUE,使用vue载入基本使用结构,封装过的js更好用 刘金玉编程
Javascript的进阶版--VUE,使用vue载入基本使用结构,封装过的js更好用 刘金玉编程
0 0
JS之用面向对象和传统过程式编程
改写成面向对象时,可先将普通函数变型,再改成面向对象。 普通方法变型 普通方法变型,变型有3个原则 1)尽量不要出现函数嵌套函数 2)可以用全局变量 3)把onload中不是赋值的语句放到单独函数中 如下代码中,完成了普通函数的变型。
0 0
JavaScript 编程中的 Polyfills 指的到底是什么?
JavaScript 编程中的 Polyfills 指的到底是什么?
0 0
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
编程界的修仙秘籍属实离谱《JavaScript百炼成仙》让你枯燥的编程学习增加乐趣
0 0
javascript挑战编程技能-第九题:数据结构
javascript挑战编程技能-第九题:数据结构
0 0
javascript挑战编程技能-第八题:99乘法表
javascript挑战编程技能-第八题:99乘法表
0 0
javascript挑战编程技能-第七题:让代码做重复的事情
javascript挑战编程技能-第七题:让代码做重复的事情
0 0
javascript挑战编程技能-第六题:检查密码强度
javascript挑战编程技能-第六题:检查密码强度
0 0
javascript挑战编程技能-第五题:函数作为javascript的一等公民
javascript挑战编程技能-第五题:函数作为javascript的一等公民
0 0
javascript挑战编程技能-第四题:谈个if讲点逻辑
javascript挑战编程技能-第四题:谈个if讲点逻辑
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript中的函数
立即下载
Javascript异步编程
立即下载
JS零基础入门教程(上册)
立即下载