JS实现继承的方式

2020-09-08  本文已影响0人  醉月梦仙

假设有如下父类

function Parent(name){
  this.name = name
  this.show = function(){
    console.log(this.name)
  }
}
Parent.prototype.age = 10

1. 构造函数继承

/*
* 构造函数继承
*/
function Child(name){
  Parent.apply(this, arguments)   //重点
}

var c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // undefined

2. 原型继承

/*
* 原型继承
*/
function Child(name){
  this.name = name
}

for(var i in Parent.prototype){
  Child.prototype[i] = Parent.prototype[i];  // 重点
}

let c = new Child('xiaoming')
c.show()   // 报错,父构造函数无法继承
console.log(c.age) // 10

3. 原型链继承

/*
* 原型链继承
*/
function Child(name){
  //无法向父类传参name
  this.name = name
}

Child.prototype = new Parent() //重点

let c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // 10

4. 组合继承

组合继承(组合原型链继承构造函数继承)(常用)

/*
* 组合继承
*/
function Child(name){
  Parent.apply(this, arguments) //重点
}

Child.prototype = new Parent() //重点

let c = new Child('xiaoming')
c.show()   // xiaoming
console.log(c.age) // 10

5. 寄生继承(Object.create()的原理)

/*
* 寄生继承(Object.create()的原理)
*/
function createChild(obj){
  function F(){}
  F.prototype = obj
  return new F()   // 返回一个实例,实例的原型是传入的obj
}

function create(obj, name){
  let child = createChild(obj)  // 重点
  child.name = name
  return child
}

let p = new Parent()  // 获取一个Parent实例
let child = create(p, 'xiaoming')

console.log(child.name) // xiaoming
console.log(child.age) // 10 通过原型找到

6. ES6 class继承

extends 使用关键字继承
super 调用父类构造函数

上一篇下一篇

猜你喜欢

热点阅读