JS实现继承的方法

一、判断原型和实例的方法

【1】instanceof

A instanceof B   ===> A是否存在于B的原型上，true-存在，false-不存在

【2】isPrototypeOf

B.prototype.isPrototypeOf(A) ===>A是否存在于B的原型上，true-存在，false-不存在

二、继承方法

1、原型链继承

//父类
function ClassA(name){
    this.name = name;
    this.color = ["red","black"]
}
ClassA.prototype.getName= function(){
    return this.name;
}
//子类
function ClassB(name){
    this.name = name;
    this.age = 12;
}
//继承
ClassB.prototype = new ClassA();
//给子类原型增加方法
ClassB.prototype.getAge = function(){
    return this.age;
}
//实例化ClassB
var a = new ClassB();
a.color.push("white")
console.log(a.getName())//已经成功继承父级的getName方法
console.log(a.getAge())
console.log(a.color)
var b = new ClassB();
console.log(b.getName())
console.log(b.getAge())
console.log(b.color)

结果：

缺点：

【1】包含引用类型值的原型属性会被所有实例共享，比如color、

【2】没有办法在不影响所有实例的情况下，向父类传值；

2、借用构造方法

//父类
function ClassA(name){
    this.name = name;
    this.color = ["red","black"]
}
ClassA.prototype.getName= function(){
    return this.name;
}
//子类
function ClassB(name){
    //继承
    ClassA.call(this,name)
    this.age = 12;
}
//给子类原型增加方法
ClassB.prototype.getAge = function(){
    return this.age;
}
//实例化ClassB
var a = new ClassB("A");
a.color.push("white")
console.log(a.getName())//不能继承父类原型链中的属性方法
console.log(a.getAge())
console.log(a.color)
var b = new ClassB("B");
console.log(b.getName())//不能继承父类原型链中的属性方法
console.log(b.getAge())
console.log(b.color)

结果：

不能继承父类的原型方法：

可以向父类传值，并且解决子类共用引用类型问题

结论：

【1】可以向父类传值；

【2】不能继承父类原型属性、方法；

3、组合继承

//父类
function ClassA(name){
    this.name = name;
    this.color = ["red","black"]
}
ClassA.prototype.getName= function(){
    return this.name;
}
//子类
function ClassB(name){
    //继承父类构造函数中的属性
    ClassA.call(this,name);
    this.age = 12;
}
//继承父类原型链的属性、方法
ClassB.prototype = new ClassA();
//给子类原型增加方法
ClassB.prototype.getAge = function(){
    return this.age;
}
//实例化ClassB
var a = new ClassB("A");
a.color.push("white")
console.log(a.getName())//已经成功继承父级的getName方法
console.log(a.getAge())
console.log(a.color)
var b = new ClassB("B");
console.log(b.getName())
console.log(b.getAge())
console.log(b.color)

结果：

结论：

【1】常用的继承方式，通过call继承父类中构造方法的属性，通过原型指向继承父类的原型链中的方法；

【2】缺点：两次调用父类的构造函数

4、寄生组合继承

提出人：道格拉斯·克罗克福德

思路：

      【1】创建父类原型链的副本对象

      【2】给副本对象增加父类的构造方法

      【3】把父类的副本指向子类的原型

代码：

//创建父类原型的副本
//参数:父类的原型对象
function createObj(obj_prototype){
    //创建副本构造函数
    var TempFun = function(){};
    //添加原型对象
    TempFun.prototype = obj_prototype;
    return new TempFun();
}
//增加原型继承的容器函数
//参数：1-子类的构造方法；2-父类构造方法
function extendPrototype(SubFun,SuperFun){
    //创建父类原型链的副本
    var parentPrototype = createObj(SuperFun.prototype);
    //向副本添加父类的构造函数
    parentPrototype.constructor = SuperFun;
    //把父类指向子类的原型
    SubFun.prototype = parentPrototype;
}
//父类
function ClassA(name){
    this.name = name;
    this.color = ["red","black"]
}
ClassA.prototype.getName= function(){
    return this.name;
}
//子类
function ClassB(name){
    //继承父类构造函数中的属性
    ClassA.call(this,name);
    this.age = 12;
}
//通过寄生方式副本父类原型链的属性、方法
extendPrototype(ClassB,ClassA)
//给子类原型增加方法
ClassB.prototype.getAge = function(){
    return this.age;
}
//实例化ClassB
var a = new ClassB("A");
a.color.push("white")
console.log(a.getName())//已经成功继承父级的getName方法
console.log(a.getAge())
console.log(a.color)
var b = new ClassB("B");
console.log(b.getName())
console.log(b.getAge())
console.log(b.color)

结果：

结论：

【1】只有一次调用父类构造函数（在子类中通过call实现）

【2】项目中一般使用寄生组合继承方式（非ES6时）

5、ES6的class继承

未完待定。。。