js 继承和原型链

js 继承和原型链

js 是一个让习惯于使用面向类（class 例如java or c++）的开发者困惑的语言，正如它是充满活力的并且没有提供类（calss）（class 这个关键字被介绍是在 es2015,同时作为一个语法糖，js仍然保持基于原型的方式）

当涉及到继承，js 仅仅有一个结构objects, 每个object 有一个私有的属性（关系到prototype）支持一个链的其他对象调用它的原型（prototype）.这个原型对象也有它自己的原型（prototype）并且一直到原型对象的prototype为null. 按照定义，null没有原型（prototype）,并且在它的原型链中作为最后的链。

在js中所有objects是位于它顶级原型链中的一个实例object.

虽然，原型继承经常被视作 JavaScript 的一个弱点，但事实上，原型继承模型比经典的继承模型更强大。举例来说，在原型继承模型的基础之上建立一个经典的继承模型是相当容易的

原型链的继承

继承属性

js 的objects是动态的包属性，js的objects对于一个原型对象有一个链，当我们试图找寻一个对象的属性，这个属性将不仅在该object中寻找，同时在该对象的原型（prototype）中查找，直到在该原型链中找到该匹配的属性，否则直到该原型链的结束null时结束。

创建一个对象fo,该对象有自己的属性a和b
function fo(){
    this.a=1;
    this.b=2;
}
fo.prototype={b:3,c:4}
var fun=new fo();

console.log(fun.a)//  1
console.log(fun.b)//  2
console.log(fun.c)//  4
console.log(fun.d)//  undefined

继承方法

js在形式上没有基于类（class）语言定义他们的方法，在js中任何方法（function）都可以在形式上增加为它的属性，一个继承的方法扮演作为其他属性，包括隐式属性和显示属性
当一个继承的function被执行，则this指向的是继承的object,不是原型对象object,这个function属于自己的属性

var o={
    a:2,
    m:function(){
        return this.a+1
    }
}
console.log(o.m());  // 3

var p=Object.create(o);
p.a=4
console.log(p.m());  // 5

使用不同的方式创建对象和生成原型链

使用普通语法创建对象

var o={a:1};
//o这个对象继承了Object.prototype上的所有属性
//所以可以这样用o.hasOwnProperty("a")
//hasOwnProperty 是Object.prototype的自身属性。
//object.prototype的原型为null.
//原型链如下：
// o ---> Object.prototype ---> null

var arr=["first","second"];

//数组都继承与  Array.prototype
//(indexOf,forEach等方法都是从它继承而来)
//原型链如下
//  a--->Array.prototype ---> Object.prototype ---> null

function f(){
    return 2;
}
//函数都继承于 Function.prototype
//(call,bind 等方法都是从它继承而来)
// f--->Function.prototype--->Object.prototype --->null

使用构造器创建对象

在js中，构造器就是一个普通的函数，当使用new 操作符来作用这个函数时，它就被称为构造方法（构造器）。

function Draw(){
    this.vs = [];
    this.es = [];
}

Draw.prototype = {
    addv: function(v){
        this.vs.push(v)
    }
}

var D=new Draw();
// D是生成的对象，他的自身属性有vs和es
// 在D被实例化时，D.prototype指向了Draw.prototype

使用Object.create 创建对象

在ECMAScript 5 中引入了一个新方法： Object.create().可以调用这个方法来创建一个新对象。新对象的原型就是调用create方法时传入的第一个参数：

var a = {a:1};
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a---> Object.prototype --->null
console.log(b.a) //继承而来

var c = Object.create(b);
// c --->b ---> a---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); //undefined ,因为d没有继承Object.prototype

使用class 关键字
在ECMAScript6 引入了一套新的关键字用来实现class. 使用基于类语言的开发人员会对这些结构感到熟悉。但是他们是不一样的。javascript仍然是基于原型的。这些新的关键字包括class,constructor,static,extends,和super

"use strict";
class Polygon {
    constructor(height,width){
        this.height = height;
        this.width = width;
    }
}

class Square extends Polygon {
    constructor(sideLength){
        super(sideLength,sideLength);
    }
    get area (){
        return this.height * this.width;
    }
    set sideLength (newLength){
        this.height = newLength;
        this.width = newLength;
    }
}

var square = new Square(2);

性能

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。
遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。

检测对象的属性是定义在自身上还是原型链上，有必要使用hasOwnProperty方法，所有继承自Object.prototype的对象都包含这个方法。
hasOwnProperty 是js中唯一一个只涉及对象自身属性而不会遍历原型链的方法。
注意：仅仅通过判断值undefined还不足以检测一个属性是否存在，一个属性可能存在而其值恰好为undefined

不好的实践：扩展原生对象的原型

一个经常被用到的错误实践是扩展Object.prototype或者其它内置的原型。

该技术被称为monkey patching, 它破坏了原型链的密封性。尽管，一些流行的框架（如Prototype.js) 在使用该技术，但是并没有足够好的理由要用其它非标准的方法将内置的类型系统搞乱。

我们去扩展内置对象原型的唯一理由是引入新的js引擎的某些新特性，比如Array.forEach。

//B将继承自A
function A(a){
    this.varA = a;
}
//以上函数A的定义中，既然A.prototype.varA总会被this.varA遮蔽，
//那么将varA加入到原型（prototype）中的目的是什么
A.prototype = {
    varA : null,
    doSomething:function(){
        //...
    }
}
/*
如果varA并不是在每个实例中都被初始化，那这样做将是有效果的。
*/
B.prototype = Object.create(A.prototype,{
    varB : {
        value:null,
        enumerable: true,
        configurable : true,
        writable: true
    },
    doSomething : {
        value : function (){ //override
            A.prototype.doSomething.apply(this.arguments);
        },
        enumerable: true,
        configurable: true,
        writable: true
    }
})
B.prototype.constructor = B;
var b = new B();
b.doSomething();

最重要的是

类型被定义在。prototype中，然而用Object.create()来继承
prototype 和 Object.getPrototypeOf
对于从java或c++转来的开发人员说javascript会有点让人困惑，因为它全部是动态的，都是运行时，而且不存在类（calsses）.所有的都是实例（对象）。即使我们模拟出的“类（classes)",也只是一个函数对象。
你可能注意到了，我们的函数A有一个特殊的属性是(prototype)叫原型。这个特殊的属性与js的new 运算符一起工作。对原型对象的引用会复制到新实例内部的prototype 属性。例如，当你这样： var a1=new A(), js就会设置a1.prototype=A.prototype (在内存中创建对象后，并在运行this绑定的函数 A()之前)。然后在你访问实例属性时，javascript首先检查他们是否直接存在于该对象中（即是否是该对象的自身属性），如果不是，它会在 prototype中查找，也就是说，你在原型定义的元素将被所有实例共享，甚至可以在稍后对原型进行修改，这种变更将影响到所有现存实例。

向上面的的例子中，如果你执行 var a1=new A(); var a2 =new A(); 那么a1.doSomething 事实上会指向 Object.getPrototypeOf(a1).doSomething, 它就是你在 A.prototype.doSomething 中定义的内容。 比如：Object.getPrototypeOf(a1).doSomething ==Object.getPrototypeOf(a2).doSomething== A.prototype.doSomething.

简而言之， prototype 是用于类型的，而Object.getPrototypeOf()是用于实例的 （instances),两者功能一致。
[[Prototype]] 看起来就像递归引用
如a1.doSomething，Object.getPrototypeOf(a1).doSomething，Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 等等等， 直到它找到 doSomething 这个属性或者 Object.getPrototypeOf 返回 null。

var o=new Foo();
//js实际上执行的是
var o=new Object();
o.prototype= Foo.prototype;
Foo.call(o);
//然后执行
o.someProp;

它会检查是否存在 someProp 属性。如果没有，它会查找 Object.getPrototypeOf(o).someProp ,如果仍旧没有，它会继续查找 Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp ，一直查找下去，直到它找到这个属性 或者 Object.getPrototypeOf() 返回 null 。

结论

在用原型继承编写复杂代码前理解原型继承模型十分重要。同时，还要清楚代码中原型链的长度，并在必要时结束原型链，以避免可能存在的性能问题。此外，除非为了兼容新 JavaScript 特性，否则，永远不要扩展原生的对象原型。