【译】【Javascript - 真正的原型继续】

2019年8月30日 172次阅读 来源: aadega

原文地点：Javascript – How Prototypal Inheritance really works

在网上能够看到种种关于Javascript原型继续的文章，但Javascript范例中只提供了new操纵符这一种完成原型继续的要领。因而网上大多半的文章是具有迷惑性的，很杂沓。这篇文章会让你清楚的认识到什么是真正的原型继续？而且怎样运用它？

原型继续的定义:

你会经常看到以下关于原型继续的定义：

接见一个对象属性的时刻，Javascript会沿着原型链向上寻觅，直到找到该属性。

Javascript中大多半完成体式格局都是运用__proto__来指定原型链中下一个被接见的对象，接下来会展现__proto__与prototype之间的区分。

注重：不要在你的代码中运用__proto__，文中运用它仅仅是为了更好的诠释Javascript继续是怎样事情的。

下面的代码展现了Javascript引擎怎样检索对象的属性（伪代码，仅为了轻易明白）

function getProperty(obj, prop) {
    if (obj.hasOwnProperty(prop)){
        return obj[prop];
    }else if (obj.__proto__ !== null){
        return getProperty(obj.__proto__, prop);
    }else{
        return undefined;
    }
}

举个例子：一个二维的点。具有x坐标属性，y坐标属性和一个print要领。

用书面言语来示意该定义就是：我们定义了一个有三个属性的对象：x，y和print。为了组织一个新点，我们只需要建立一个对象并将他的__proto__属性指向Point。

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

新鲜的原型继续:

奇异的处所在于诠释原型继续的人给出的例子每每与他们的定义不相相符，他们给出的代码一般以下所示：

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.print(); // 10 20

上面所例举的代码跟原型继续完整不相关，Point是组织函数，它有一个prototype属性，运用了new操纵符，然则然后呢？

new是怎样事情的:

Brendan Eich 想让javascript像Java，C++这些传统的面向对象言语一样，用new操纵类直接组织一个实例，所以他给Javascript也添了new操纵符。

  • C++中有组织函数，用来初始化实例的属性。因而，new操纵符操纵的对象必需是函数。

  • 我们需要把对象的要领挂载到某个处所，因为我们运用的是原型言语，我们把他放在函数的原型属性里。

new操纵符组织步骤有三步：

  1. 组织一个类的实例：这个实例是一个空对象，而且他的__proto__属性指向组织函数的原型。

  2. 初始化实例：组织函数被挪用，并将this指向这个实例。

  3. 返回实例对象。

如今我们了解了new组织的历程，我们在Javascript中完成它：

function New (f) {
    var n = { '__proto__': f.prototype };
    return function () {
        f.apply(n, arguments);
        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(); // 10 20
console.log(p2 instanceof Point); // true

Javascript中真正的原型继续:

Javascript范例只定义了new操纵符的事情流程，Douglas Crockford发现了一种应用new完成原型继续的新要领，他写的Object.create函数。

Object.create = function (parent) {
    function F() {}
    F.prototype = parent;
    return new F();
};

看起来很新鲜，但实际上很简约。他只建立了一个新的对象，原型你能够随便设置。假如许可运用__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

结论:

我们了解了原型继续并用一种详细的要领完成了它。但如许写有一些瑕玷：

  • 不规范：__proto__不是规范并不赞同运用， 而且原生的 Object.create 和 Douglas Crockford的完成不同等。

  • 不优化：Object.create (原生的或自定义的)作为组织函数是及其不高效的。

《【译】【Javascript - 真正的原型继续】》

    原文作者：aadega
    原文地址: https://segmentfault.com/a/1190000004627019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞