js 继承的优缺点

115 阅读1分钟

原型链继承

function Parent() {
  this.name = '嘻嘻嘻'
}
function Child() {}
Child.prototype = new Parent()
const c1 = new Child()
console.log(c1.name)

问题:

  1. 引用类型的属性将被所有实例共享(如下)
function Parent() {
  this.name = ['张三','李四']
}
function Child() {}
Child.prototype = new Parent()
const c1 = new Child()
c1.name.push('赵五')
console.log(c1.name) // ['张三','李四','赵五']
const c2 = new Child()
console.log(c2.name) // ['张三','李四','赵五']
  1. 创建Child不能传参给Parent

构造函数继承

function Parent(name) {
  this.name = name
}
function Child(name) {
  Parent.call(this, name)
}

const c1 = new Child('张三')
console.log(c1.name)

优点: 解决原型链继承的两个问题

class继承

class Parent {
  name
  constructor(name) {
    this.name = name
  }
  getName() {
    return this.name
  }
}

class Child extends Parent {
  age
  constructor(age, name) {
    super(name)
    this.age = age
  }
}
const c1 = new Child(10, '张三')