JavaScript中实现继承的几种方式

最近读到了《JavaScript高级程序设计》中的第六章，在继承的这一小节，了解到了在Javascript中实现继承的几种方式和优缺点，记录一下。

继承是指一个对象直接使用另一个对象的属性和方法

JacaScript原生不支持继承，Javascript将原型链作为实现继承的主要方式。那么，到底什么是原型链？简单回顾一下构造函数、原型和实例的关系。每个构造函数都有一个prototype指向原型对象，每个原型对象都有一个指针constructor指回构造函数，每一个实例都有一个指向原型对象的内部指针，在现代浏览器中就是__proto__。在使用原型链实现的继承中，实例的__proto__指向的不是一个原型而是另一个原型的实例，这个实例自己的__proto__不是指向自己的原型对象，而又是另外一个类的实例，那么这样层层递进，就构成了实例和原型的链条，这就是所谓的原型链的基本概念。

• 默认的原型

  所有的引用类型都继承了Object，这个继承也是通过原型链实现的，所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针指向(__proto__)指向Object.prototype。这也是为什么所有的自定义类型都会继承tostring()、valueOf()等默认方法的原因了。

• 确定原型和实例的关系

  • instanceof
  • isPrototypeOf()

• 谨慎的定义方法

  • 为原型添加方法的代码一定要放在替换原型的语句之后。
  • 通过原型链实现继承的时候，不能使用对象字面量创建原型方法，因为这会重写原型链

• 原型链的问题

  • 原型链继承会导致实例之间互相修改原型引用类型属性的值。
  • 在创建子类型的实例的时候，无法向超类型的构造函数传递参数

    function SuperType(){
        this.colors = ["red","blue","green"];
    }
    function SubType(){}
    //继承了SuperType
    SubType.prototype = new SuperType();
    var instance1 = new SubType();
    instance1.colors.push("black");
    var instance2 = new SubType();
    console.log(instance2.colors);//red,blue,green,black

借用构造函数实现继承

先看下面的代码

    function SuperType(){
        this.name = name;
    }
    function SubType(){
        //继承了SuperType,同时传递了参数
        SuperType.call(this,"Xiaoxiao");
        //实例属性
        this.age = 22;
    }
    var instance = new SubType();
    console.log(instance.name);//"Xiaoxiao"
    console.log(instance.age);//22

存在的问题

1. 方法在构造函数中定义，因此函数复用就无从谈起
2. 在超类中定义的方法，对于子类型而言也是不可见的，所以所有的类型只能使用构造函数模式。

最常用的方法-组合继承

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name,age){
    //继承属性
    //call在在这改变了函数上下文，函数作为构造函数使用时this指代创建的对象，相当于初始化了三个一个属性
    SuperType.call(this,name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType();//也会经常使用 SubType.prototype = Object.create(SuperType.prorotypr);
SubType.constructor.prototype = SubType;
SubType.prorotype.sayAge = function(){
    alert(this.age);
}

var instance1 = new SubType("Xiaoxiao",21);
instance1.colors.push("black");

var instance2 = new SubType("xx",22);
console.log(instance2.colors);//red,blue,green

优点：组合继承避免了原型链和借用构造函数的缺陷，融合了他们的优点，是最常使用的方式。

原型式继承

ECMAScript5通过Object.create()方法实现了这一继承方式。第一个参数是父对象，第二个参数是扩展的属性。
当只传递一个参数时，Object.create()的行为和如下object方法类似：

function object(){
    var args = arguments;
    var proto = args[0];
    function F(){};
    F.prototype = proto;
    return new F();
}

当有两个参数时，Object.create的polyfill如下

if(typeof Object.create != "function"){
    Object.create = function(){
        function F();
        var hasOwn = Object.hasOwnProperty;
        return function(){
            var args = arguments,proto = args[0];
            if(typeof proto != "object") return;
            F.protoytpe = proto;
            var obj = new F();
            F.prototype = null;//每次释放掉
            if(args.length > 1){
                var properties = Object(args[1]);
                for(var key in properties){
                    if(hasOwn.call(properties,key)){
                        obj[pro] = properties[key];
                    }
                }
            }
            return obj;
        }
    }
}

浏览器支持：IE9+ FF4+ Safari5+ Opear12+ 和 Chrome

在没有必要兴师动众的创建构造函数，而只是想让一个对象和另一个对象保持类似的情况下，原型式继承是完全可以胜任的，但是，包含引用类型的值得属性使用都会共享响应的值，就像使用原型模式一样。

最有效的方法-组合寄生式继承

前面的组合继承是JavaScript里面最常用的继承模式，不过，他也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类构造函数。一次是在创建子类型原型的时候，另一次是在子类型狗仔函数内部。

function SuperType(name){
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
}
function SubType(name,age){
    //在创造实例时会执行第二次调用，这时实例上有age,name,colors属性
    SuperType.call(this,name);
    this.age = age;
}
//初始化SubType时会执行第一次调用，这时SubType原型上会有name和colors属性
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
}

所谓的组合寄生式继承，就是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

基本的模式如下

function inheritPrototype(subType,superType){
    var prototype = Object(superType.prototypr);
    prototype.constructor = subType;
    subType.prototype = prototypr;
}

避免了在SubType.prototype上创建不必要的，多余的属性。