js的继承

@(js)[继承, js, 前端]

组合继承是原性链继承和构造函数继承的合体，它汲取了二者各自的有点，同时又互相补充了各自的弱点，是一种应用十分广泛的JavaScript继承模式。下面分别从原性链继承、构造函数继承分别开始介绍，最后介绍二者的结合——组合继承。

一、原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

实现原性链的基本模式：

function SuperType(){  //定义了一个父函数
    this.property =true;  
}  
SuperType.prototype.getSuperValue = function(){    //给父函数的原型链上添加一个getSuperValue的函数
    returnthis.property;  
}  

function Subtype(){    //定义一个子函数
    this.subproperty =false;  
}  
SubType.prototype = new SuperType();  //SubType实现了继承SuperType  
SubType.prototype.getSubValue = function(){    //给子函数添加方法
    return this.subproperty;  
}  
var instance = new SubType();  // 实例instance继承子函数
alert(instance.getSuperValue());  

最后的结果：intance指向SubType的原型，而SubType的原型又指向SuperType的原型，SuperType继承了Object，所有函数的默认原型都是Object的实例

问题：会产生引用类型值的问题
比如，创建了一个子类的实例，如果对子类实例的属性进行了修改，那么创建其他子类的时候都会收到影响，代码如下：

function SuperType(){  
    this.colors =[“red”, “blue”, “green”];  
}  
function SubType(){  
}  
SubType.prototype = new SuperType();  
var instance1 = new SubType();  
instance1.colors.push(“black”);  
alert(instance1.colors);  //red, blue, green, black  
var instance2 = new SubType();  
alert(instance2.colors);   //red, blue, green, black    

以上结果说明会影响其他实例的属性值

二、借用构造函数

在子类型构造函数的内部调用超类型构造函数

function SuperType(){    // 定义一个父函数
    this.colors =[“red”, “blue”, “green”];  
}  
function SubType{}(   // 定义一个子函数
   SuperType.call(this);     // 继承了父函数
}  
var instance1 = new SubType();    // 实例instance1继承子函数
instance1.colors.push(“black”);  
alert(intance1.colors);     //red,blue,green,black  

var instance2 = new SubType();  // 实例instance2继承子函数
alert(instance2.colors);   //red,blue,green  

使用该方法可以在子类构造函数中向超类型构造函数传递参数，如下：

function SuperType(name){    // 定义父函数
    this.name = name;  
}  
function SubType(){    // 定义子函数
SuperType.call(this,“Nicholas”);        //传入参数，利用这个参数初始化父类构造函数中的name  
this.age = 29;  
}  

var instance = new SubType();  // 实例instance继承子函数
alert(instance.name);   //Nicholas  
alert(instance.age);   //29  

问题：不方便复用

三、组合式继承
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
示例代码：

function SuperType(name){    // 定义父函数
this.name = name：   // 定义子函数
this.colors = [“red”, “blue”,“green”];
}  
SuperType.prototype.sayName = function(){   //定义了一个方法，该方法在继承的子类中也可以用  
    alert(this.name);  
}  
function SubType(name, age){  
SuperType.call(this, name);    //继承SuperType的一部分，this指SubType，  
this.age = age;    //自己新定义的属性age也可以进行赋值  
}  
SubType.prototype = new SuperType();     //利用原型继承，可以使用父类的方法
  
SubType.prototype.sayAge = function(){   //定义SubType特有的新方法  
    alert(this.age);  
}  
var instance1 = new SubType(“Martin”, 10);  
instance1.colors.push(“black”);  
alert(instance1.colors);  //red,blue,green,black  
instance1.sayName();   //Martin  
instance1.sayAge();  //10  

var instance2 = new SubType(“Greg”, 27);  
alert(instance2.colors);   //red,blue,green  
instance2.sayName();  //Greg  
instance2.sayAge();  //27 

综合例子：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.hi = function() {
    console.log('Hi, my name is' + this.name) + ",I'm" + this.age + 'years old now.';
};

Person.prototype.LEGS_NUM = 2;
Person.prototype.ARMS_NUM = 2;
Person.prototype.walk = function() {
    console.log(this.name + "is walking...");
}

function Student(name, age, className) {
    Person.call(this, name, age);
    this.className = className;
}

Student.prototype = Objectcreate(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.hi = function() {
    console.log('Hi, my name is' + this.name + ", I'm" + this.age + "years old now, and from" + this.className + ".");
}

Student.prototype.learn = function(subject) {
    console.log(this.name + 'is learing' + subject + 'at' + this.className + '.');
}

// test
var bosn = new Student('Bosn', 27, 'Class 3,Grade 2');
bosn.hi();  // Hi, my name is Bosn, I'm 27 years old now and from Class3,Grage 2
bosn.LEGS_NUM; // 2
bosn.walk();  // Bosn is walking
bosn.learn('math');  // Bosn is learning math t Class3, Grade 2.