原型----《你不知道的js》

286 阅读8分钟

一、[[Prototype]]

js中的对象有一个特殊的[[Prototype]]内置属性,即对于其他对象的引用。几乎所有的对象在创建时[[Prototype]]属性都会被赋予一个非空值。对象的[[Prototype]]链接可以为空,但很少见。

var myObject = {
    a:2
};
myObject.a; // 2

当你试图引用对象的属性时会触发[[Get]]操作,如myObject.a。对于默认的[[Get]]操作来说,第一步是检查对象本身是否有这个属性,若有就使用。

如果a不在myObject中,就需要使用对象的[[Prototype]]链了。

对于默认的[[Get]]操作来说,如果无法在对象本身找到需要的属性,就会继续访问[[Prototype]]链:

var anotherObject = {
    a:2
};
// 创建一个关联到anotherObject的对象
var myObject = Object.create(anotherObject);
myObject.a; // 2

myObject对象的[[Prototype]]关联到了anotherObject。myObject.a并不存在,但属性能在anotherObject中找到2。

如果anotherObject也找不到a并且[[Prototype]]不为空,则继续查找下去。

这个过程会持续到找到匹配的属性名或查找完整条[[Prototype]]链。若是后者[[Get]]操作返回undefined。

使用for..in遍历对象时原理和查找[[Prototype]]链类似,任何可以通过原型链访问到的属性都会被枚举。使用in操作符来检查属性在对象中是否存在,同样会查找对象的整条原型链(无论对象是否可枚举):

var anotherObject = {
    a:2
};
// 创建一个关联到anotherObject的对象
var myObject = Object.create(anotherObject);
for (var k in myObject) {
    console.log("found: " + k);
}
// found: a
("a" in myObject); // true

1、Object.prototype

所有普通的[[Prototype]]链最终对吼指向内置的Object.prototype。由于所有“普通”(内置)对象都“源于”Object.prototype,所以它包含了js中许多通用功能

2、属性设置和屏蔽

myObject.foo = "far";

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

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

如果foo存在于原型链上层,赋值语句myObject.foo = "bar"的行为就会有些不同。

如果属性名foo既出现在myObject的[[Prototype]]链上层,则会发横屏蔽。myObject中包含的foo属性会屏蔽原型链上层的所有foo属性,因为myObject.foo总是会选择原型链中最底层的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。

通常应当尽量避免使用屏蔽

有些情况下会隐式产生屏蔽:

var anotherObject = {
    a:2
};
var myObject = Object.create(anotherObject);
anotherObject.a; // 2
myObject.a; // 2
anotherObject.hasOwnProperty("a"); // true
myObject.a++; // 隐式屏蔽
anotherObject.a; // 2
myObject.a; // 3
myObject.hasOwnProperty("a"); // true

++操作首先会通过[[Prototype]]查找属性a并从anotherObject.a获取当前属性值2,然后给这个值加1,接着用[[Put]]将值3赋给myObject中新建的屏蔽属性a

二、“类”

1、“类”函数

所有的函数默认都会拥有一个名为prototype的共有并且不可枚举的属性,他会指向另一个对象:

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

这个对象通常被称为Foo的原型。这个对象是在调用new Foo()时创建的,最后会被关联到“Foo.prototype”对象上

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

调用new Foo()时会创建a,其中一步就是将a内部的[[Prototype]]链接到Foo.prototype所指向的对象。

2、“构造函数”

function Foo() {
    // ...
}
// constructor公有不可枚举的属性
Foo.prototype.constructor === Foo; // true
var a = new Foo();
a.constructor === Foo; // true

a本身没有constructor属性,虽然a.constructor确实指向Foo函数,但是这个属性并不是表示a由Foo“构造”

实际上.constructor引用同样被委托给了Foo.prototype,而Foo.prototype.constructor默认指向Foo。

a.constructor只是通过默认的[[Prototype]]委托指向Foo,这和“构造”毫无关系。

function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; //创建一个新原型对象
var a1 = new Foo();
a1.constructor === Foo; // false
a1.constructor === Object; // true

a1并没有.constructor属性,所以它会委托[[Prototype]]链上的Foo.prototype。但这个对象也没有.constructor属性(不过默认的Foo.prototype对象有这个属性),所以它会继续委托,这次会委托给委托链顶端的Object.prototype。这个对象有.constructor属性,指向内置的Object(..)函数

当然你可以给Foo.prototype添加一个.constructor属性,不过需要手动添加一个符合正常行为不可枚举的属性。

function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; //创建一个新原型对象
// 需要在Foo.prototype上“修复”丢失的.constructor属性
// 新对象属性起到Foo.prototype的作用
// 关于defineProperty(..)
Object.defineProperty( Foo.prototype, "constructor", {
    enumerable: false,
    writable: true,
    configurable: true,
    value: Foo // 让.constructor指向Foo
})

.constructor并不表示被构造,也不是一个不可变属性。他是不可枚举的,但值是可写的

1)构造函数还是调用

function NothingSpecial() {
    console.log("Don't mind me!");
}
var a = new NothingSpecial();
// Don't mind me!
a; // {}

NothingSpecial只是一个普通的函数,但使用new调用时,就会构造一个对象并赋值给a。这个调用时一个构造函数调用,但NothingSpecial本身不是构造函数

函数不是构造函数,当且仅当使用new时,函数调用会变成“构造函数调用”

3、技术

function Foo(name) {
    this.name = name;
}
Foo.prototype.myName = function() {
    return this.name;
}
var a = new Foo("a");
var b = new Foo("b");
a.myName(); // "a"
b.myName(); // "b"

这段diamante展示了另外两种“面向类”的技巧:

1、this.name = name给每个对象,即a,b都添加了.name属性

2、Foo.prototype.myName = ...会给Foo.prototype对象添加一个属性(函数)

在创建过程中,a、b的内部[[Prototype]]都会关联到Foo.prototype上。当a、b中无法找到myName时,它会通过委托在Foo.prototype上找到

三、(原型)继承

function Foo(name) {
    this.name = name;
}
Foo.prototype.myName = function() {
    return this.name;
}
function Bar(name, label) {
    Foo.call(this, name);
}
// 创建一个新的Bar.prototype对象并关联到Foo.prototype
Bar.prototype = Object.create(Foo.prototype); // 核心部分

// 注意现在没有Bar.prototype.constructor了
// 若你需要则手动修复
Bar.prototype.myLabel = function() {
    return this.label;
}
var a = new Bar("a", "obj a");
a.myName(); // "a"
a.myLabel(); // 'obj a'

创建一个新对象并把它关联到我们希望的对象上有两种常见的做法:

// 和你想要的机制不一样
Bar.prototype = Foo.prototype;

此代码让Bar.prototype直接引用Foo.prototype对象。因此当你执行类型Bar.prototype.myLabel = ... 的赋值语句时会修改Foo.prototype对象本身

// 基本上满足你的需求,但可能会产生一些副作用
Bar.prototype = new Foo();

此语句会创建一个关联到Bar.prototype的新对象。但使用了Foo(..)的构造函数调用。如果函数Foo有一些副作用(如:写日志、修改转态等)就会影响到Bar()的“后代”,后果不堪设想

要创建一个合适的关联对象,最好使用Object.create(..)而不是具有徐作用的Foo(..)。但这需要创建一个新对象然后把旧对象抛弃掉,不能直接修改已有的默认对象。

// ES6之前需要抛弃默认的Bar.prototype
Bar.prototype = Object.create(Foo.prototype); 
// ES6可以直接修改现有的Bar.prototype
Object.setPrototypeOf(Bar.prototype, Foo.prototype);

检查“类”关系

内省(反射):检查一个实例的继承祖先(js的委托关联)

function Foo() {
    // ...
}
Foo.prototype.blah = ...;
var a = new Foo();

如何通过内省找出a的“祖先”(委托关联)

1)a instanceof Foo; 在a的整条[[Prototype]]链中是否有指向Foo.prototype的对象

缺点:只能处理对象(a)和函数(带.prototype引用的Foo)之间的关系

如果使用内置的.bind(..)函数来生成一个硬绑定函数的话,该函数没有.prototype属性。在这样的函数上使用instanceof的话目标函数的.prototype会代替硬绑定函数的.prototype。

function isRelated(o1, o2) {
    function F() {}
    F.prototype = o2;
    return o1 instanceof F;
}
var a = {};
var b = Object.create(a);
isRelated(b, a); // true

2)判断[[Prototype]]反射的方法

Foo.prototype.isPrototypeOf(a); // true

在a的整条[[Prototype]]链,中是否出现过Foo.prototype

此方法不需要间接引用函数(Foo),它的.prototype属性会被自动访问

// 非常简单:b是否出现在c的[[Prototype]]链中
b.isPrototypeOf(c);

这个方法并不需要使用函数(“类”),它直接使用b和c之间的对象引用来判断他们的关系。换而言之,语言内置的isPrototypeOf(..)函数就是我们的isRelatedTo(..)函数

我们也可以直接获取一个对象[[Prototype]]链,在ES5中标准方法:

Object.getPrototypeOf(a);
Object.getPrototypeOf(a) === Foo.prototype; // true
a.__proto__ === Foo.prototype; // true  大多数浏览器也支持这种方法

.__proto__存在于内置的Object.prototype中(不可枚举)

Object.defineProperty(Object.prototype, "__proto__", {
    get: function() {
        return Object.getPrototypeOf(this);
    },
    set: function(o) {
        Object.setPrototypeOf(this, o);
        return 0;
    }
})

因此,访问(获取值)a.__proto__时,实际上是调用了a.proto()(调用getter函数)。虽然getter函数存在于Object.prototype对象中,但它的this指向对象a,所以Object.getPrototypeOf(a)结果相同。

.__proto__是可设置属性,但通常来说不需要修改已有对象的[[Prototype]],。

在特殊情况下需要设置函数默认.prototype对象的[[Prototype]],让它引用其他对象(除了Object.prototype)这样可避免使用全新对象替换默认对象。此外最好把[[Prototype]]对象关联看做是只读特性,从而增加代码可读性

四、对象关联

1、创建关联

var foo = {
    something:function() {
        console.log("Tell me sometihng good ...");
    }
};
var bar = Object.create(foo);
bar.something(); // Tell me sometihng good ...

Object.create(..)会创建一个新对象(bar)并把它关联到我们指定的对象(foo),这样可以避免不必要的麻烦。

Object.create(..)的polyfill代码

Object.create(..)是在ES5中新增的函数,所以在ES5之前的环境中要支持这个功能的话就需要使用一段简单的polyfill代码。

if (!Object.create) {
    Object.create = function(o) {
        function F(){}
        F.prototype = o;
        return new F();
    }
}

这段polyfill代码使用了一个一次性函数F,我们通过改写它的.prototype属性使其指向想要关联的对象,然后再使用new F()来构造一个新对象进行关联。