JavaScript中的原型和继承详解(图文)(3)

  基于所知道的知识,请想象创建一个新的对象,并让新对象表现地像数组的过程。一种方法是使用下面的代码。

// 创建一个新的空对象 var o = {}; // 继承自同一个原型,一个数组对象 o.__proto__ = Array.prototype; // 现在我们可以调用数组的任何方法... o.push(3);

  虽然这段代码很有趣,也能工作,可问题在于,并不是每一个 JavaScript 环境都支持可写的 __proto__ 对象属性。幸运的是,JavaScript 确实有一个创建对象内建的标准机制,只需要一个操作符,就可以创建新对象,并且设置新对象的 __proto__ 引用 – 那就是“new”操作符。

var o = new Array(); o.push(3);

  JavaScript 中的 new 操作符有三个基本任务。首先,它创建新的空对象。接下来,它将设置新对象的 __proto__ 属性,以匹配所调用函数的原型属性。最后,操作符调用函数,将新对象作为“this”引用传递。如果要扩展最后两行代码,就会变成如下情况:

var o = {}; o.__proto__ = Array.prototype; Array.call(o); o.push(3);

  函数的 call 方法允许你在调用函数的情况下在函数内部指定“this”所引用的对象。当然,函数的作者在这种情况下需要实现这样的函数。一旦作者创建了这样的函数,就可以将其称之为构造函数。

  构造函数

  构造函数和普通的函数一样,但是具有以下两个特殊性质。

通常构造函数的首字母是大写的(让识别构造函数变得更容易)。

构造函数通常要和 new 操作符结合,用来构造新对象。

  Array 就是一个构造函数的例子。Array 函数需要和 new 操作符一起使用,而且 Array 的首字母是大写的。JavaScript 将 Array 作为内置函数包括在内,而任何人都可以写出自己的构造函数。事实上,我们最后可以为先前创建的点对象编写出构造函数。

var Point = function (x, y) { this.x = x; this.y = y; this.add = function (otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y; } } var p1 = new Point(3, 4); var p2 = new Point(8, 6); p1.add(p2);

  在上面的代码中,我们使用了 new 操作符和 Point 函数来构造点对象,这个对象带有 x 属性和 y 属性和一个 add 方法。你可以将最后的结果想象成图 6 的样子。

JavaScript中的原型和继承详解(图文)

6

  现在的问题是我们的每个点对象中仍然有单独的 add 方法。使用我们学到的原型和继承的知识,我们更希望将点对象的 add 方法从每个点实例中转移到 Point.prototype 中。要达到继承 add 方法的效果,我们所需要做的,就是修改 Point.prototype 对象。

var Point = function (x, y) { this.x = x; this.y = y; } Point.prototype.add = function (otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y; } var p1 = new Point(3, 4); var p2 = new Point(8, 6); p1.add(p2);

  大功告成!我们刚刚在 JavaScript 中完成原型式的继承模式!

JavaScript中的原型和继承详解(图文)

7

  总结

  我希望这篇文章能够帮助你揭开 JavaScript 原型概念的神秘面纱。开始看到的是原型怎样让一个对象从其他对象中继承功能,然后看到怎样结合 new 操作符和构造函数来构建对象。这里所提到的,只是开启对象原型力量和灵活性的第一步。本文鼓励你自己发现学习有关原型和 JavaScript 语言的新信息。

  同时,请小心驾驶。你永远不会知道这些行驶在路上的车辆会从他们的原型继承到什么(有缺陷)的技术。

  原文链接: Script Junkie   翻译: 伯乐在线 - 埃姆杰

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgpwgj.html