阅读 98

翻译:原型继承是如何工作的

原文链接

前言:本人表述能力不太好,如果有不清晰的地方请一定回复,我会改。

每个人都知道js有原型继承。但js只默认提供了new运算符实现特定的原型继承。所以,大多数的说明都很难读懂。这篇文章目的就是说清楚什么是原型继承,和怎么在js中使用原型继承。

原型继承的定义

当你读到关于js的原型继承,经常能看到如下定义:

当访问对象的属性时,JavaScript将向上遍历原型链,直到找到具有对应的属性---Javascript Garden

大多数js的实现使用了__proto__属性来表示原型链中的下一个对象。在本文中将看到__proto__prototype的区别。

📒__proto__非标准的,代码中不应该使用。他在这篇文章中用来解释js原型是怎么工作的。

下面的代码展示了js引擎怎么检索属性

function getProperty(obj, prop) {
    if (obj.hasOwnProperty(prop))
        return obj[prop]
    else if (obj.__proto__!=null)
        return getProperty(obj.__proto__, prop)
    else return undefinded
}复制代码

我们用一个经典例子:一个二维点。一个点有两个坐标xy和一个方法print

用前面写到的原型链的定义,我们将写一个对象Point,他有三个属性x,y,print。为了创建一个新的二维点,我们写了一个对象,并设置了__proto__

var Point = {
    x: 0,
    y: 0,
    print: function () {console.log(this.x, this.y);}
};
var p = {x: 10, y: 20, __proto__:Point};
p.print(); // 10 20复制代码

诡异的js原型继承

知道什么最让人迷惑吗?每个这样定义原型继承的人不写这样的代码,他们代码是这样的:

function Point(x,y){
    this.x = x;
    this.y = y;
}
Point.prototype = {
    print: function () { console.log(this.x, this.y); }
}
var p = new Point(10, 20);
p.point(); // 10 20复制代码

这个就和上面的那段代码完全不一样了。Point现在是个function,有个prototype属性,还有new运算符。都什么鬼?

new是怎么工作的?

Brendan Eich 希望js是个传统的面向对象的编程语言,就像JavaC++一样。在这些语言中,使用new运算符创建类的实例。所以他给js写了个new运算符。

  • C++有构造函数的概念,初始化实例属性。所以,new操作目标必须是函数。
  • 我们需要要把对象的方法放在某个地方。既然js是个原型语言(prototype language),那就放在方法的prototype属性上吧。

new运算符有方法F和参数:new F(arguments)。做了单个简单的步骤:

  1. 创建类的实例。一个空对象将__proto__属性设置为F.prototype
  2. 实例化。F及其参数集被调用,并把this设置上去
  3. 返回该实例

现在我们理解了new做了什么,可以用js实现它

    function New(f){
/*1*/    var n = {__proto__:f.prototype};
         return function(){
/*2*/       f.apply(n, arguments);
/*3*/       return n;
         };
    }复制代码

测试下

function Point(x,y) {
    this.x= x;
    this.y=y
}
Point.prototype = {
    print: function(){console.log(this.x,this.y)}
};
var p1 = new Point(10, 20);
p1.print();// 10 20
console.log(p1 instanceof Point);// true
var p2 = New(Point)(10,20);
p2.print();
console.log(p2 instanceof Point);// true复制代码

js里真实的原型继承

JavaScript规范只提供了new运算符。但Douglas Crockford找到了利用new运算符实现真正的原型继承的方法。我们现在写Object.create方法。

Object.create = function(parent) {
    function F() {};
    F.prototype = parent;
    return new F();
};复制代码

这看上去很奇怪,但是它做的事情却很简单。它只是创建了一个新对象,并把prototype设置为任何你想设置的。如果可以使用__proto__,他就可以写成这样

Object.create = function(parent) {    return  {__proto__: parent};
};复制代码

下面的代码是用真正的原型继承实现的Point

var Point = {
  x: 0,
  y: 0,
  print: function () { console.log(this.x, this.y); }
};
 
var p = Object.create(Point);
p.x = 10;
p.y = 20;
p.print(); // 10 20复制代码

总结

我们知道了原型继承是什么,以及js是怎么实现它的。

但是,原型继承的使用(Object.create and __proto__)有几个缺陷:

  • 不标准:__proto__是非标准的甚至反对这样做。而Object.create和Douglas Crockford的实现不完全等同。
  • 没优化:Object.create还没有像new 构造一样优化。要慢了10倍

一些深入阅读:


关注下面的标签,发现更多相似文章
评论