一周一章前端书·第10周：《你不知道的JavaScript(上)

2018-01-07 本文已影响6人梁同学de自言自语

第5章：原型

5.1 [[Prototype]]

JavaScript的对象都有一个[[Prototype]]内置属性，它是一个对象的引用。对象在创建时[[Prototype]]属性就会被赋予值。

//举例：创建一个myObj对象，然后读取其属性值
var myObj = {
    a : 2
};
myObj.a;    // 2

之前说过，当访问对象的属性时，会触发[[Get]]操作。[[Get]]操作第一步是检查对象本身是否有这个属性，如果有就使用；但是如果没有这个属性，就需要使用对象的[[Prototype]]链了。

var anotherObj = {
    a : 2
}
// Object.create()方法是根据传入的对象，创建一个新对象，并且原型链上关联到传入的对象
var myObj = Object.create(anotherObj);
myObj.a;  // 2

实际上，所有访问属性的操作，都会查询[[Prototype]]链，包括for..in遍历、in操作等。

5.1.1 object.prototype

所有的[[Prototype]]的尽头都执行内置的object.prototype对象，导致所有的普通对象都包含Object.prototype对象的许多通用的功能，比如toString()、valueOf()、hasOwnProperty()、isPrototypeOf()等方法。

5.1.2 属性设置和屏蔽

myObj.foo = 'bar';

当通过.操作符访问对象进行属性赋值/属性追加时，有如下几种情况：
- 如果当前对象中包含该属性，则修改当前对象的属性值（此时即便对象的原型链上包含同名的属性，根据就近原则，也会被当前对象的属性值屏蔽）
- 如果当前对象不包含该属性，就会遍历查找对象的原型链是否有该属性：
  - 如果在[[Prototype]]链上也不包含该属性，属性会被直接添加到当前对象myObj上；
  - 如果在[[Prototype]]链上存在该属性：
    - 且属性非只读(writable:false)，那么在当前对象上添加一个名为foo的新属性，系统视它为继承了原型对象的屏蔽属性；
    - 但属性是只读(writable:true)，那么将无法修改属性，也无法创建新属性。允许在严格模式下，代码会抛出一个错误；非严格模式下，这条赋值语句会被忽略；
    - 且属性是个setter，那就一定会调用这个setter，属性的赋值屏蔽于myObj
值得注意的是，++操作符会造成隐式屏蔽

var anotherObj = {
    a : 2
}
//创建一个原型关联anotherObj的新对象
var myObj = Object.create(anotherObject);
//不管子对象还是父对象，a属性值都输出2
anotherObj.a;   // 2
myObjt.a;   // 2
//父对象中拥有a，而子对象中不拥有a
anotberObj.hasOwnProperty('a'); // true
myObj.hasOwnProperty('a');  //false
//执行++操作，造成隐式屏蔽
myObj.a++;
//再看发现子类自己拥有了a属性，屏蔽了原型链上的同名属性
anotherObj.a;   // 2
myObj.a;    // 3
myObj.hasOwnProperty('a');  // ture

5.2 “类”

如第4章提到的，JavaScript中没有类。面向类的语言需要通过类作为对象的蓝图来创建对象，而JavaScript是直接创建对象的。实际上JavaScript才是真正应该被称为“面向对象”的语言。

5.2.1 “类”函数

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

如上面代码所示，new Foo()会生成一个新对象a，新对象内部的[[Prototype]]链关联到了Foo.prototype原型对象。
这里可以对比其他面向类的语言中，类可以被实例化多次，就像用模具制作东西一样，而实例化就意味着“把类的行为复制到物理对象中”，每一个新实例都会重复这个过程。但JavaScript没有类似的复制机制，只是通过[[Prototype]]原型链将对象关联起来。

关于名称

这个通过[[Prototype]]将对象关联起来的机制被称为“ 原型继承 ”
但原型继承这个术语比较容易造成混淆，影响大家对JavaScript机制真实原理的理解。毕竟继承意味着复制操作，但JavaScript并不会复制对象属性。而是在对象之间穿件一个关联，对象通过委托访问另一个对象的属性和函数。委托这个术语更能准确的描述JavaScript中对象的关联机制。
差异继承 就是指在描述对象行为时，不描述普遍的特质。比如，描述汽车时，我们更多会说“汽车是一个有四个轮子的交通工具”，但不会说“汽车是拥有引擎发动机(通用特质)的交通工具”

5.2.2 “构造函数”

之所以让我们认为Foo是一个“类”，一个原因是关键字new，在面向类的语言中构造类实例时也会用到new；另一个原因是，Foo()的调用看起来像是执行了类的构造函数方法。

function Foo(){
    // ...
}
Foo.prototype.constructor === Foo;  // true

var a = new Foo();
a.constructor === Foo;  // true

可见Foo.prototype.constructor属性和Foo函数相等，创建的a对象的constructor属性，和Foo函数也相等。
凡此种种，我们很容易就误认为Foo()是一个构造函数。但实际上，Foo()本身并不是构造函数，和其他普通的函数没有任何区别。只是，在函数调用的前面加上new关键字后，变成一种“构造函数的调用方式”。

function NothingSpecial(){
    console.log("Don't mind me");
}

var a = new NothingSpecial(); // Don't mind me
a; // {}

如上述代码所示，NothingSpecial只是一个普通的函数，使用new调用时，它会构造一个对象并赋值给变量a。
对于“构造函数”更准确的解释，应该是“带有new的函数调用”。

5.2.3 技术

//定义一个Foo函数，函数里将this.name属性重新赋值
function Foo(name){
    this.name = name;
}
//为Foo.prototype原型对象定义一个myName()方法，返回name值
Foo.prototype.myName = function(){
    return this.name;
}
//通过new的方式调用Foo()函数，返回a、b两个对象
var a = new Foo('a');
var b = new Foo('b');
//调用a、b对象的myName()方法
a.myName(); // 'a'
b.myName(); // 'b'

看这段代码，调用了new Foo()后，创建的a和b对象都拥有了myName()方法。
看起来像是在创建a和b时，把Foo.prototype原型对象复制到两个对象中，但事实上并不是。
正如本章前文介绍[[Get]]算法时提到的，当访问对象的属性不存在时，会通过其的[[[Prototype]]原型链来查找。因此，在创建的过程中，a和b的[[Prototype]]原型对象会关联到Foo.prototype上。当访问a.myName时会通过原型链，委托关联到Foo.prototype

回顾“构造函数”

之前讨论.constructor属性时说过，虽然a.constructor === Foo为true，看起来a的构造函数(constructor)就是Foo()函数，但事实不是这样的。就如同myName属性一样，a对象本身并无.constructor属性，查找的其实是Foo.prototype原型对象的myName属性（也可以说，a.constructor被委托给了Foo.prototype）。而Foo.prototype本身的.constructor属性，是在Foo函数声明时的默认属性。
我们可以做个试验来验证这一点：

//定义Foo函数
function Foo(){};
//将Foo的原型对象赋值为空
Foo.prototype = {};
//创建对象a
var a = new Foo();
//测试
console.log(a.constructor === Foo);    // false
console.log(a.constructor === Object);  // true

a.constructor属性本来委托给Foo.prototype，但我们已经把Foo.prototype重新赋值为空，所以她继续委托，直至最顶端的Object.prototype。
总之，对象的.constructor属性并不表示构造对象的函数。它只是一个不可变、且不可枚举，但可以被修改的属性，所以.constructor属性是不可靠且不安全的引用。

5.3 原型继承

Object.create()方法会创建一个新对象，并把对象内部的[[Prototype]]关联到指定的对象，但缺点是通过创建一个新对象替代旧对象，而不是直接修改已有对象。

/**
 * ----------------------
 * 【示例：继承JS类并进行实例化】
 *  西瓜继承自水果，水果拥有type(食物类型)属性，西瓜拥有name(水果名称)属性
 * ----------------------
 */
//声明Fruit对象，并定义getType()方法
function Fruit(type){
    this.type = type;
}
Fruit.prototype.getType = function(){
    return this.type;
}
//声明WateMelon对象，继承Fruit，并拥有getName()方法
function WateMelon(type,name){
    Fruit.call(this,type);
    this.name = name;
}
//通过Object.create()来继承
WateMelon.prototype = Object.create(Fruit.prototype);
WateMelon.prototype.getName = function(){
    return this.name;
}

//创建实例
var watemelon = new WateMelon('水果','西瓜');
console.log('食物品种：',watemelon.getType());
console.log('食物名称：',watemelon.getName());

想要直接修改对象的[[Prototype]]关联，在ES6之前，只能通过.__proto__属性来设置，但这个属性不能兼容所有浏览器，ES6添加了Object.setPrototypeOf()方法来实现。

Object.setPrototypeOf(WateMelon.prototype,Fruit.prototype);

检查“类”关系

我们如何知道watemelon的委托对象是WateMelon呢？在传统的面向类环境中，检查实例对象的继承祖先通常被称为内省或者反射。
第一种方法是站在“类函数”的角度来判断，通过instanceof操作符判断实例对象是否属于某个类函数：

watemelon instanceof Watemelon; // true
watemelon instanceof Fruit; // true

instanceof操作符的左边是一个实例对象watemelon，右边是一个函数。instanceof会检查在watemelon的原型链中，是否有指向Watemelon或者Fruit的原型对象。

注意：instanceof 判断的是实例对象和类的原型关联，而如果想判断两个实例对象之间是否有原型关联，则instanceof无法实现。

第二种方法是通过.isPrototypeOf()方法，判断原型对象是否和指定的实例对象有关系：

WateMelon.prototype.isPrototypeOf(watemelon);

isPrototypeOf()是基类Object的方法，判断watemelon的原型对象是不是Watemelon。

注意：一定是要用原型对象调用isPrototypeOf()方法来做判断，如果用类函数(WateMelon)来调用，则返回false。

除此之外，还可以通过Object.getPrototypeOf(watemelon)来获取实例对象的原型链。

Object.getPrototypeOf(watemelon) === WateMelon.prototype;   // true

5.4 对象关联

5.4.1 创建关联

我们推荐用create()方法创建新对象，它可以充分发挥[[Prototype]]机制的威力，而是用new构造函数调用的方式，通过类来创建两个对象之间的关系，避免了一些不必要的麻烦，比如.prototype和.constructor属性引用的问题。
由于Object.create()方法是ES5新增的函数，如果想要在ES5之前的环境使用，可以通过简单的polyfill代码来处理：

if(!Object.create){
    Object.crate = function(o){
        //通过一个临时的F类，建立指定原型关系
        function F(){};
        F.prototype = o;
        return new F();
        
    }
}

5.4.2 关联关系是备用

通过[[Prototype]]原型机制可以为对象之间建立关联关系，处理当对象属性或方法“缺失”时，可以提供一个备用选项。

var a = {
    echo : function(){
        console.log('hello');
    }
};

var b = Object.create(a);
b.echo();   // 'hello'

但从某种程度上来看，代码却变得难以理解和维护，b明明没有定义echo()方法，这东西是哪来的？
当然，我们可以通过 内部委托 的方式让API的设计更加清晰：

var a = {
    echo : function(){
        console.log('hello');
    }
};

var b = Object.create(a);
b.doEcho = function(){
    this.echo();
};
b.doEcho();   // 'hello'

5.5 小结

当访问对象中并不存在的属性时，[[Get]]操作会查找对象内部[[Prototype]]关联的对象。这个关联关系，实际上定义了一条“原型链”。
原型链的顶端是Object.prototype，toString()、valueOf()和其他通用的功能都挂载在该对象上。
关联两个对象最常用的方式是用new关键字进行函数调用，通常我们称为“构造函数调用”。
虽然JavaScript的new机制看起来，和传统面向类语言的“类初始化”和“类继承”很相似，但是有一个很重要的区别，就是不会进行复制，对象之间是通过内部的[[Prototype]]链关联的。
出于各种原因，相比起术语“原型继承”，“委托”更适合。因为对象之间的关系不是复制，而是委托。

一周一章前端书·第10周：《你不知道的JavaScript(上)

第5章：原型

5.1 [[Prototype]]

5.1.1 object.prototype

5.1.2 属性设置和屏蔽

5.2 “类”

5.2.1 “类”函数

关于名称

5.2.2 “构造函数”

5.2.3 技术

回顾“构造函数”

5.3 原型继承

检查“类”关系

5.4 对象关联

5.4.1 创建关联

5.4.2 关联关系是备用

5.5 小结

猜你喜欢

热点阅读

一周一章前端书·第10周：《你不知道的JavaScript(上)

第5章 ：原型

5.1 [[Prototype]]

5.1.1 object.prototype

5.1.2 属性设置和屏蔽

5.2 “类”

5.2.1 “类”函数

关于名称

5.2.2 “构造函数”

5.2.3 技术

回顾“构造函数”

5.3 原型继承

检查“类”关系

5.4 对象关联

5.4.1 创建关联

5.4.2 关联关系是备用

5.5 小结

猜你喜欢

热点阅读

第5章：原型