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;

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

原文地址:https://www.cnblogs.com/maycpou/p/12286797.html