技术开发 频道

JavaScript创建对象:深入理解编程原理

  【IT168 技术】在学习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,如下图:

JavaScript创建对象:深入理解编程原理

  了解了函数对象,再看看它如何发挥作用:当用new激活一个函数时,一个新对象会被创建出来,其内容是执行函数的返回结果,而这个对象的__proto__链接指向函数的prototype属性所引用的对象

  ,如下面的例子所示:

JavaScript创建对象:深入理解编程原理

  抽象一下,就是这样:

JavaScript创建对象:深入理解编程原理

  另外,如果你只是简单写写网页,的确可能不需要把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来完成了一个拷贝创建的过程,希望这个例子能够帮助大家更好地理解!!

  可继续阅读 4. Scope和Object http://blog.csdn.net/adwu73/article/details/7229564

  补记:推荐大家去看一下这个博客,解释的会更详细,有更多例子: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

0
相关文章