说说JavaScript的prototype（内容源自《你所不知道的JavaScript》）

爱被打了一巴掌 2022-09-27 04:00 273阅读 0赞

首先给大家看一段JavaScript里面的经典“继承”代码——但其实并不是真正的继承，只是利用了原型链。

function f1(){ 
        f2.call(this);
        this.a = 2;
    }
    //f1“继承”f2
    function f2(){ 
        this.b = 3;
    }
    
    //核心代码
    var fpro = Object.create(f2.prototype);
    fpro.constructor = f1;
    f1.prototype = fpro;
    
    //此时f1的实例可以访问f2的变量。
    var f1_1 = new f1();
    console.log(f1_1.b);

如果上面这个大家看懂了，那么对于prototype可以说就有了正确的理解。

下面，我们从头开始说：

几乎所有的对象在创建时都会同时被创建一个 \[\[Prototype\]\]内置属性。  
但是，\[\[Prototype\]\] 引用有什么用呢?  
当你试图访问这个对象的属性的时候，第第一步是检查对象本身是否有这个属性，如果有的话就使用它。但是如果这个属性并不在对象本身呢，那就要使用对象的 \[\[Prototype\]\] 链了！

**也就是说：如果无法在对象本身找到需要的属性，就会继续访问对象的 \[\[Prototype\]\] 链：**

var anotherObject = { 
        a:2
    };
    // 创建一个关联到 anotherObject 的对象
    var myObject = Object.create( anotherObject ); 
    myObject.a; // 2
    
    // Object.create() 方法创建一个拥有指定原型(和若干个指定属性)的对象。
    // 详细解释可参阅：
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

因为\[\[Prototype\]\] 链的存在，上面的myObject对象才可以访问到anotherObject的a属性。但是如果在 anotherObject 中也找不到 a属性 并且 \[\[Prototype\]\] 链不为空的话，就会继续查找下去。

这个过程会持续到找到匹配的属性名或者查找完整条 \[\[Prototype\]\] 链。如果是后者并且没有找到匹配属性的话， 那么返回值就是 undefined。

但是到哪里是 \[\[Prototype\]\] 的“尽头”呢?  
所有普通的 \[\[Prototype\]\] 链最终都会指向内置的 Object.prototype。由于所有的“普通” (内置，不是特定主机的扩展)对象都“源于”(或者说把 \[\[Prototype\]\] 链的顶端设置为)这个 Object.prototype 对象，所以它包含 JavaScript 中许多通用的功能，比如说`.toString() .valueOf() .hasOwnProperty(..) .isPrototypeOf(..)`等等。

**属性设置和屏蔽问题**

由于又了prototype，那么，属性的设置就不仅仅是添加一个新属性或者修改已有的属性值。还会涉及到这个属性的原型链。现在我们完整地讲解一下这个过程:

myObject.foo = "bar";

1、如果 myObject 对象中包含名为 foo 的普通数据访问属性，这条赋值语句只会修改已有的属性值。

2、如果 foo 不是直接存在于 myObject 中，\[\[Prototype\]\] 链就会被遍历，类似 \[\[Get\]\] 操作。如果原型链上找不到 foo，foo 就会被直接添加到 myObject 上。

3、然而，如果 foo 存在于原型链上层，赋值语句 myObject.foo = “bar” 的行为就会有些不同，这就会涉及到属性屏蔽的问题：myObject 中包含的 foo 属性会屏蔽原型链上层的所有 foo 属性，因为 myObject.foo 总是会选择原型链中最底层的 foo 属性。  
也就是说，在查找的过程中，会以沿着原型链查找过程中最先找到的那个属性为准！

下面来讨论属性不直接存在于 myObject 中而是存在于原型链上层时myObject.foo = “bar”会出现的三种情况：

1. 如果在[[Prototype]]链上层存在名为foo的普通数据访问属性并且没有被标记为只读(writable:false)，那就会直接在 myObject 中添加一个名为 foo 的新属性，它是屏蔽属性。
    
    2. 如果在[[Prototype]]链上层存在foo，但是它被标记为只读(writable:false)，那么无法修改已有属性或者在 myObject 上创建屏蔽属性。如果运行在严格模式下，代码会抛出一个错误。否则，这条赋值语句会被忽略。总之，不会发生屏蔽。
    
    3. 如果在[[Prototype]]链上层存在foo并且它是一个setter(赋值操作)，那就一定会调用这个 setter。foo不会被添加到(或者说屏蔽于)myObject，也不会重新定义 foo 这个 setter。换句话说，就是会直接调用同名函数，而不做任何赋值操作。

如果你希望在第二种和第三种情况下也屏蔽 foo，那就不能使用 = 操作符来赋值，而是使用 Object.defineProperty(..)方法来向 myObject 添加 foo。

上面介绍的是对象的\[\[Prototype\]\]，接下来是函数的prototype属性。

函数的一种特殊特性：所有的函数默认都会拥有一个名为 prototype 的公有并且不可枚举的属性，它会指向另一个对象:

function Foo() { // ...
    }
    Foo.prototype; // { }

这个对象通常被称为 Foo 的原型，因为我们通过名为 Foo.prototype 的属性引用来访问它。

首先我们来看下面这段代码：

function Foo() { 
        // ...
    }
    var a = new Foo();
    Object.getPrototypeOf( a ) === Foo.prototype; // true

调用 new Foo() 时会创建 a对象，其中的一步就是给 a 一个内部的 \[\[Prototype\]\] 链接，关联到 Foo.prototype 指向的那个对象。

换一句话来说：  
new Foo()会生成一个新对象，这个新对象的内部链接\[\[Prototype\]\]关联的是 Foo.prototype 对象。

这个机制通常被称为原型继承。

下面，我们可以回过头来看最上面的那个代码了，我们以下面的代码为例：

这段代码的核心部分就是语句 Bar.prototype = Object.create(Foo.prototype);  
Object.create(..) 会凭空创建一个“新”对象并把新对象内部的 \[\[Prototype\]\] 关联到你指定的对象。