js对象继承

Posted 2021-01-28 泛舟江湖

如果一个对象想要用到另一个对象的方法属性时，用继承来实现无疑是最好的方法，这就像慕容家族的以彼之道还施彼身一样，我可以通过继承来拿到你所有的对象和方法。一般的OO语言有接口继承和实现继承两种继承方式。js只支持实现继承，而且实现主要通过原型链来实现的。

具体实现继承一般有六种方法：

1.原型链

基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象（prototype），原型对象都包含一个指向构造函数的指针（constructor），每一个实例都包含一个纸箱原型对象的内部指针（[[prorotype]]）。如果让一个原型对象邓毅另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，假如另一个原型又是另一个类型的实例。n那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是原型链。

示例如下：

function Super(name){
    this.prototype= true;
}
Super.prototype.getSupervalue= function(){
    return this.prototype；
} 

function Sub(){
　　this.subprototype = false;
}
//Sub的原型等于Super的实例，继承Super及其原型的属性和方法
Sub.prototype = new Super();
//添加新方法
Sub.prototype.getSubvalue = function(){
　　return this.subprototype;
}
//重写超类型中的方法
Sub.prototype.getSupervalue = function(){
　　return false;
}
var instance = new Sub();
alert(instance.getSupervalue());//false

这就是原型链的方法,缺点是如果超类型中的属性是引用类型，则由于所有实例共享超类型的属性，其实都是引用的一个引用类型的地址指针，一个实例更改超类型引用类型属性的值，所有实例都会反映。另一个缺点是无法向超类型传值。

2.借用构造函数

借用构造函数的思想很简单，在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象。因此通过apply()和call()方法也可以在将要新创建的对象上执行构造函数，示例如下：

function Super(name){
  this.colors = [‘red‘,‘blue‘,‘green‘];
　this.name =  name;
}
function Sub(){
  //通过运行Super的方法实现继承
  Super.call(this,‘jone‘);  
}

var instance1 = new Sub();
instance1.colors.push(‘black‘);
alert(instance1.colors); // ‘red,blue,green,black‘
alert(instance1.name); //‘jone‘

var instance2 = new Sub();
alert(instance1.colors); // ‘red,blue,green‘

借用构造函数继承的本质是在构造函数中通过绑定this运行超类型的方法从而实现继承，这种方法解决了原型链无法传值和引用类型属性共享的问题，但是也带来了新的问题，由于方法都写在构造函数中因此无法复用。而且超类型原型中定义的方法属性无法得到继承。

3.组合继承

组合继承指的是将原型链和构造函数的技术组合到一块，综合二者之长的一种继承模式。主要思路是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现对实例属性的继承。

        function Super(name){
            this.colors = [‘red‘,‘blue‘,‘green‘];
　            this.name =  name;
        }
        Super.prototype.sayName = function(){
            console.log(this.name);
        }
        function Sub(name,age){//借用构造函数继承
            Super.call(this,name);
            this.age = age;
        }
        Sub.prototype = new Super();//组合继承
        Sub.prototype.sayAge = function(){
            alert(this.age);
        }
        var instance1 = new Sub(‘jone‘,29);
        instance1.colors.push(‘black‘);
        alert(instance1.colors); // ‘red,blue,green,black‘
        instance1.sayName(); //‘jone‘
        instance1.sayAge(); //29

        var instance2 = new Sub(‘greg‘,32);
        alert(instance2.colors); // ‘red,blue,green‘
        instance2.sayName(); //‘greg‘
        instance2.sayAge(); //32