Day9 总结js实现对象继承的方式

Day9 打卡 js实现对象继承的方式

每日一名

Wish you a happy mood and a sweet smile.

释义：愿心情愉悦，笑容甜甜！

js实现对象继承的方式

1.原型链式继承

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}`)
}
function Update(){}
Update.prototype = new Base()
Update.prototype.name='update'
var u = new Update();
u.play();

缺点：创建子类实例里，无法向父类构造函数传参

2.构造函数继承

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){console.log(`${this.name}`)}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}...play`)
}
function Update(name){
    Base.call(this, name);
}
var u = new Update('haha');
u.say(); // haha
u.play(); // 报错

3.实例继承

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){console.log(`${this.name}`)}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}...play`)
}
function Update(name){
   var p = new Base(name);
   return p;
}
var u = Update('haha');
u.say(); // haha
u.play(); // haha...play

4.拷贝继承：无法获取父类不可for in遍历的方法

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){console.log(`${this.name}`)}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}...play`)
}
function Update(name){
   var p = new Base(name);
   for (var i in p) {
       Update.prototype[i]=p[i]
   }
   
}
var u = new Update('haha');
u.say(); // haha
u.play(); // haha...play

5.组合继承

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){console.log(`${this.name}`)}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}...play`)
}
function Update(name){
   Base.call(this, name);
}
Update.prototype = new Base(name)
Update.prototype.constructor=Update;
var u = new Update('haha');
u.say(); // haha
u.play(); // haha...play

6.寄生组合继承

// 定义基类
function Base(name){
  this.name=name
  this.say=function(){console.log(`${this.name}`)}
}
// 原型链继承
Base.prototype.play=function(){
  console.log(`${this.name}...play`)
}
function Update(name){
   Base.call(this, name);
   (function(){
     var Super = function() {}
     Super.prototype = Base.prototype; // 将实例作为子类的原型
     Update.prototype = new Super();
   })()
}
Update.prototype = new Base(name)
Update.prototype.constructor=Update;
var u = new Update('haha');
u.say(); // haha
u.play(); // haha...play

7. ES6 class extend继承

class 父类 {
  constructor(){
    ...
  }
}
class 子类 extends 父类 {
  constructor(){
    super()
    ...
  }
}