• 分享

JS实现继承的几种方式

管理员 avatar
管理员 1181阅读 0评论 1喜欢

JS实现继承的几种方式

先定义一个父类

function Father(name){
    //属性
    this.name = name || 'father'
    //实例方法
    this.sayName = function(){
        console.log(this.name)
    }
    this.color = ['blue']
}

//原型方法
Father.prototype.age = 20;
Father.prototype.sayAge = function(){
    console.log(this.age)
}

1. 原型链继承

将父类的实例作为子类的原型

function Son(name){
    this.name = name | 'Son'
}
Son.prototype = new Father();

let s1 = new Son();
console.log(s1.name) // Son
console.log(s1.age) // 20

优点:

  1. 简单,易于实现
  2. 父类新增原型方法、原型属性,子类都能访问到

缺点:

  1. 无法实现多继承,因为原型一次只能被一个实例更改
  2. 要想为子类新增属性和方法,必须要在new Father()这样的语句之后执行,不能放到构造器中
  3. 来自原型对象的所有属性被所有实例共享
  4. 创建子类实例时,无法向父构造函数传参

2. 构造继承

使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

function Son(name){
    Father.call(this)
    this.name = name || 'son'
}
let s = new Son('Son')
console.log(s.name); //Son
//s.sayAge() 抛出错误,无法继承父类原型方法
//s.sayName() Son
console.log(s.age); //undefined (无法继承父类原型方法)

优点:

  1. 解决了原型链继承中子类实例共享父类引用属性的问题
  2. 创建子类实例时,可以向父类传递参数
  3. 可以实现多继承(call多个父类对象)

缺点:

  1. 实例并不是父类的实例,只是子类的实例
  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3. 组合继承

将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承

function Son(name) {
    // 第一次调用父类构造器 子类实例增加父类实例
    Father.call(this, "我是传给父类的参数");
    this.name = name || "son";
}
// 经过new运算符 第二次调用父类构造器 子类原型也增加了父类实例
Son.prototype = new Father();

let s = new Son("son");
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
console.log(s.constructor === Father); // true
console.log(s.constructor === Son); // false

优点:

  1. 弥补了构造继承的缺点,现在既可以继承实例的属性和方法,也可以继承原型的属性和方法
  2. 既是子类的实例,也是父类的实例
  3. 可以向父类传递参数
  4. 函数可以复用

缺点:

  1. 调用了两次父类构造函数,生成了两份实例
  2. constructor指向问题

4. 实例继承

为父类实例添加新特征,作为子类实例返回

function Son(name) {
   let f=new Father('传给父类的参数')
   f.name=name||'son'
   return f
}

let s = new Son("son"); //或者直接调用子类构造函数 let s = Son("son");
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // false
console.log(s.constructor === Father); // true
console.log(s.constructor === Son); // false

优点:

  1. 不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点:

  1. 实例是父类的实例,不是子类的实例
  2. 不支持多继承

5.拷贝继承

对父类实例中的的方法与属性拷贝给子类的原型

function Son(name) {
    let f = new Father("传给父类的参数");
    for (let k in f) {
    Son.prototype[k] = f[k];
    }
    Son.prototype.name = name;
}

let s = new Son("son");
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // false
console.log(s instanceof Son); // true
console.log(s.constructor === Father); // false
console.log(s.constructor === Son); // true

优点:

  1. 支持多继承

缺点:

  1. 效率低,性能差,占用内存高(因为需要拷贝父类属性)
  2. 无法获取父类不可枚举的方法(不可枚举的方法,不能使用for-in访问到)

6.寄生组合继承

通过寄生方式,砍掉父类的实例属性,避免了组合继承生成两份实例的缺点

function Son(name) {
    Father.call(this);
    this.name = name || "son";
}

// 方法一  自己动手创建一个中间类
// (function() {
//   let NoneFun = function() {};
//   NoneFun.prototype = Father.prototype;
//   Son.prototype = new NoneFun();
//   Son.prototype.constructor = Son;
// })();

// 方法二  直接借用Object.create()方法
Son.prototype = Object.create(Father.prototype);
// 修复构造函数指向
Son.prototype.constructor = Son;

let s = new Son("son");
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
console.log(s.constructor === Father); // false
console.log(s.constructor === Son); // true

优点:

  1. 比较完美(js实现继承首选方式)

缺点: 1.实现起来较为复杂(可通过Object.create简化)

7.es6--Class继承

使用extends表明继承自哪个父类,并且在子类构造函数中必须调用super

class Son extends Father {
    constructor(name) {
    super(name);
    this.name = name || "son";
    }
}

let s = new Son("son");
console.log(s.name); // son
s.sayAge(); // 18
s.sayName(); // son
console.log(s.age); // 18
console.log(s instanceof Father); // true
console.log(s instanceof Son); // true
console.log(s.constructor === Father); // false
console.log(s.constructor === Son); // tru
avatar avatar

赶快写下您的第一条评论吧