前端进阶 继承-类式继承

331 阅读2分钟

JavaScript是没有类的概念的,所有的类式继承都是通过原型模拟出来的,所谓类式继承就是将父类的实例,作为子类的原型对象;

类的原型对象就是为类的实例添加共有方法;


父类

function SuperClass () {
     this.name = 'geng';
     this.age = 23;
}
SuperClass.prototype = {
     getName: function () {
           console.log(this.name);
     },
     getAge: function () {
           console.log(this.age);
     }
}


子类

function SubClass () {
     this.sex = 'man';
}
SubClass.prototype = new SuperClass();
  • 父类的实例可以访问从父类构造函数中复制的属性和方法,也可以访问父类原型上的属性和方法;
  • 子类将父类的实例作为原型对象后,子类的原型对象也可以访问从父类构造函数中复制的属性和方法以及父类原型上的属性和方法;

子类实例

let a = new SubClass()
console.log(a.name); // 'geng'
console.log(a.age); // 23
a.getName(); // 'geng'


instanceof

instanceof可以用来确定类和实例之间的从属关系,即:某个对象是某个类的实例;

console.log(a instanceof SubClass); // true
console.log(a instanceof SuperClass); // true
console.log(SubClass instanceof SuperClass); // true

所有对象都是object的实例;

console.log(a instanceof object); // true
console.log(SubClass instanceof object); // true


类式继承的缺点

  • 由于子类的原型对象是通过的父类的实例化得到的,如果父类的共有属性有引用类型,其引用地址就会被子类中所有的实例所共用,只要有一个实例改变了子类原型从父类的构造函数中继承的共有属性,就会影响到其他实例;

function SuperClass () {
    this.list = ['xiaoming', 'xiaohong'];
}
function SubClass () {}
SubClass.prototype = new SuperClass();
let a = new SubClass();
let b = new SubClass()
console.log(a.list); // ['xiaoming', 'xiaohong']
console.log(b.list); // ['xiaoming', 'xiaohong']
a.list.push('xiaoqiang')
console.log(a.list); // ['xiaoming', 'xiaohong', 'xiaoqiang']
console.log(b.list); // ['xiaoming', 'xiaohong', 'xiaoqiang']
  • 子类的继承是通过其原型对象对父类的实例化得到的,因此在创建父类的时候,无法向父类传递参数,在实例化父类的时候无法对父类构造函数的内部属性进行初始化;