JS实现继承

1.原型链实现继承

//父类型

function Supper(){

　　this.supProp = 'Supper property';

}

Supper.prototype.showSuperProp = function(){

　　console.log(this.supProp);

}

//子类型

function Sub(){

　　this.subProp= 'Sub property';

}

//子类型的原型指向父类型的实例就实现了继承，子类型生成的对象的原型链上就有了父类型的东西

Sub.prototype = new Supper();

//让Sub的构造函数指向Sub，不然生成的Sub对象的构造函数会错误的指向Supper

Sub.constrator = Sub;

Sub.prototype .showSubProp = function(){

　　console.log(this.subProp);

}

 

//使用子类型生成对象

var sub = new Sub();

sub .showSuperProp ();

sub.showSubProp ();

 

理解：主要是将子类型的prototype 指向父类型的一个实例，父类型的实例上面就有父类型的所有属性和方法，然后再用子类型生成实例的时候，生成的实例的__proto__指向子类型的prototype相当于是父类型的一个实例，所以上面又有了父类型的所有属性和方法，从而实现了继承的效果。

注：这种方式主要是为了子类型继承父类型的方法，如果父类型的构造函数有参数，那么在定义子类型的prototype为父类型的一个实例的时候就需要传入参数，比较鸡肋。

 

2.借用构造函数继承

function Person(name,age){

　　this.name = name;

　　this.age = age;

}

function Student(name,age,grade){

　　Person.call(this,name,age);//这里相当于将Student中的this传入了Person的构造函数替换原this执行代码；相当于：this.name = name;this.age = age;

　　this.grade = grade;

}

注：这种方式只是在子类的构造函数中借用了父类的构造函数，并不是真正的继承

 

3.原型链+借用构造函数实现组合继承

function Person(name,age){

　　this.name = name;

　　this.age = age;

}

Person.prototype.setName = function(){

　　this.name = name;

}

function Student(name,age,grade){

　　Person.call(this,name,age);

　　this.grade = grade;

}

//这里new Person的时候不用传入参数，只是为了继承Person中的方法，Person中的属性已经使用借用构造函数的方式存在在了Stundent中了

Student.prototype = new Person();

Student.constrator = Student;

//两种方式结合后能够较好的实现继承