当前位置：首页 > news >正文

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

news 来源：原创 2024/4/28 5:58:30

原文链接

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

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

原型继承的定义

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

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

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

:ledger: __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
}复制代码

我们用一个经典例子：一个二维点。一个点有两个坐标 x ， y 和一个方法 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 是个传统的面向对象的编程语言，就像 Java 和 C++ 一样。在这些语言中，使用new运算符创建类的实例。所以他给 js 写了个 new 运算符。

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

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

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

现在我们理解了 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复制代码