全球领先的IT技术网站 |首页 |Tags |网站地图

您现在正在浏览:首页 » 开发频道 » 语言&工具 » Web » JavaScript » JavaScript原型继承工作原理

RSS订阅

JavaScript原型继承工作原理

暂无Tags标签
摘要:这篇文章原是出自著名的前端博主阮一峰一篇关于JS原型继承的文章:Javascript继承机制的设计思想中的引用。这篇文章对于原型继承讲解详细,令人读之有拨云见日之感

JavaScript采用原型继承这事儿是众所皆知的,但由于它默认只提供了一个实现的实例,也就是 new 运算符,因此对于它的解释总是令人困惑。这篇文章旨在阐明什么是原型继承以及在JavaScript中究竟如何使用原型继承。

原型继承的定义

当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字:

  当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止。——出自JavaScript秘密花园

大多数JavaScript的实现用 __proto__ 属性来表示一个对象的原型链。在这篇文章里我们将看到 __proto__prototype 的区别何在。

注:__proto__ 是一个不应在你代码中出现的非正规的用法,这里仅仅用它来解释JavaScript原型继承的工作原理。

以下代码展示了JS引擎如何查找属性:

  1. function getProperty(obj, prop) { 
  2.     if (obj.hasOwnProperty(prop)) 
  3.         return obj[prop] 
  4.  
  5.     else if (obj.__proto__ !== null
  6.         return getProperty(obj.__proto__, prop) 
  7.  
  8.     else 
  9.         return undefined 

让我们举一个常见的例子:二维点,拥有二维坐标 x y ,同似拥有一个 print 方法。

用之前我们说过的原型继承的定义,我们创建一个对象 Point ,拥有三个属性:xyprint 。为了能创建一个新的二维点,我们需要创建一个新的对象,让他其中的 __proto__ 属性指向 Point

  1. var Point = { 
  2.     x: 0, 
  3.     y: 0, 
  4.     print: function () { console.log(this.x, this.y); } 
  5. }; 
  6.  
  7. var p = {x: 10, y: 20, __proto__: Point}; 
  8. p.print(); // 10 20 

JavaScript怪异的原型继承

令人困惑的是,每个教授原型继承的人都不会给出这样一段代码,反而会给出下面这样的代码:

  1. function Point(x, y) { 
  2.     this.x = x; 
  3.     this.y = y; 
  4. Point.prototype = { 
  5.     print: function () { console.log(this.x, this.y); } 
  6. }; 
  7.  
  8. var p = new Point(10, 20); 
  9. p.print(); // 10 20 

这和说好的不一样啊,这里 Point 变成了函数,然后还有个什么 prototype 的属性,而且有了 new 运算符。这他喵的是什么情况?

new 运算符是如何工作的

造物者 Brendan Eich 想让JS和传统的面向对象的编程语言差不太多,如Java和C++。在这些语言里,我们采用 new 运算符来给类实例化一个新的对象。所以他在JS里写了一个 new 运算符。

  • C++里有用来初始化实例属性的构造函数概念,因此 new 运算符必须针对函数。
  • 我们需要将对象的方法放到一个地方去,既然我们在用原型语言,我们就把它放到函数的原型属性中去。

new 运算符接受一个函数 F 及其参数:new F(arguments...)。这一过程分为三步:

  1. 创建类的实例。这步是把一个空的对象的 __proto__ 属性设置为 F.prototype
  2. 初始化实例。函数 F 被传入参数并调用,关键字 this 被设定为该实例。
  3. 返回实例。

现在我们知道了 new 是怎么工作的,我们可以用JS代码实现一下:

  1. function New (f) { 
  2.     var n = { '__proto__': f.prototype }; /*第一步*/ 
  3.     return function () { 
  4.         f.apply(n, arguments);            /*第二步*/ 
  5.         return n;                         /*第三步*/ 
  6.     }; 

一个小小的例子来看一下他的工作状况:

  1. function Point(x, y) { 
  2.     this.x = x; 
  3.     this.y = y; 
  4. Point.prototype = { 
  5.     print: function () { console.log(this.x, this.y); } 
  6. }; 
  7.  
  8. var p1 = new Point(10, 20); 
  9. p1.print(); // 10 20 
  10. console.log(p1 instanceof Point); // true 
  11.  
  12. var p2 = New (Point)(10, 20); 
  13. p2.print(); // 10 20 
  14. console.log(p2 instanceof Point); // true 

JavaScript中真正的原型继承

JS的ECMA规范只允许我们采用 new 运算符来进行原型继承。但是大宗师 Douglas Crockford 却发现了一种可以利用 new 来实现真正的原型继承的方式!他写下了 Object.create 函数如下:

  1. Object.create = function (parent) { 
  2.     function F() {} 
  3.     F.prototype = parent; 
  4.     return new F(); 
  5. }; 

这看起来蛮奇怪的,但却是相当的简洁:它创建了新的对象,并将其原型设置为你想设置的任意值。如果我们允许使用 __proto__ ,那我们也可以这样写:

  1. Object.create = function (parent) { 
  2.     return { '__proto__': parent }; 
  3. }; 

下面这段代码就是让我们的 Point 采用真正的原型继承:

  1. var Point = { 
  2.     x: 0, 
  3.     y: 0, 
  4.     print: function () { console.log(this.x, this.y); } 
  5. }; 
  6.  
  7. var p = Object.create(Point); 
  8. p.x = 10; 
  9. p.y = 20; 
  10. p.print(); // 10 20 

结论

我们已经了解了JS原型继承是什么,以及JS如何用特定的方式来实现之。然而使用真正的原型继承(如 Object.create 以及 __proto__)还是存在以下缺点:

  • 标准性差:__proto__ 不是一个标准用法,甚至是一个不赞成使用的用法。同时原生态的 Object.create 和道爷写的原版也不尽相同。
  • 优化性差: 不论是原生的还是自定义的 Object.create ,其性能都远没有 new 的优化程度高,前者要比后者慢高达10倍。

附图,ECMA中的原型继承解释图:

http://www.ituring.com.cn/download/01Yi3zzVQhOo

0 »

开发专题

JavaScript成为网络霸主的“绯闻”
JavaScript成为网络霸主的“绯闻”

JavaScript正凭借新型工具与功能提升以极度夸张的速度吞噬整个世界。我们是否应该接受这一无法逆转的趋势? 还记得那些旧日往事吗?很多用户因为担心安全问题而在浏览器中禁用JavaScript。如...

C++是垃圾语言?!
C++是垃圾语言?!

Linux之父对C++进行了炮轰,说它是糟糕程序员的垃圾语言,可谓是一石激起千层浪,引起众多程序员朋友的关注和讨论。本专题给出正反方的讨论观点,供大家评说!另外,给出了编程语言的发展状况...

MySQL数据库入门与精通
MySQL数据库入门与精通

MySQL是一个跨平台的开源关系型数据库管理系统,目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低...

最新资讯

相关热门文章

  • 本文暂无Tags标签