JavaScript两种继承的实现思路

191 阅读1分钟
  1. 通过原型实现继承
function Baba(color){
    this.color = color
}
Baba.prototype.say =function(){}
//声明构造函数Baba,添加实例属性color及原型上的方法say

function Erzi(name,color){
    Baba.call(this,color)
    this.name = name
}
//声明构造函数Erzi,添加实例属性name,并将Erzi的实例传入Baba构造函数中

function temp (){}
temp.prototype = Baba.prototype
//声明一个构造函数temp,并将其原型改为构造函数Baba的原型

Erzi.prototype = new temp()
//原型改为构造函数temp的原型
Erzi.prototype.constructor = Erzi
//原型上的constructor属性赋值为构造函数Erzi本身
Erzi.prototype.cry = ()=>{}
//在Erzi的原型上添加cry属性,值为一个箭头
var p1 = new Erzi('jack','red') //实例化一个Erzi对象
console.dir(p1) //结构可打印查看
  1. 通过class(类)实现继承
class Baba{
    constructor(color){
        this.color = color
        //定义实例的属性
    }
    say(){}
    //定义原型的属性
}

class Erzi extends Baba{
    constructor(color,name){
        super(color) //调用超类构造函数并传入color
        this.name = name //定义实例的属性
    }
    move(){}
    //定义原型的属性
}
var c1 = new Erzi('jack','red') //实例化一个Erzi对象
console.dir(c1) //结构可打印查看