Js几种继承实现方式
看继承之前,建议先了解一下原型、原型链和prototype之间的关系。
一、原型继承
// 父类 function Animal(name){ this.name = name; this.sleep = function(){ console.log(this.name + '正在睡觉'); } } // 父类的原型方法 Animal.prototype.eat = function(food){ console.log(this.name + '正在吃' + food) } // 子类 function Cat(){} // 继承实现 Cat.prototype = new Animal('小猫'); // 核心: 将父类的实例作为子类的原型 var cat = new Cat(); console.log(cat.name); // 小猫 console.log(cat.sleep()); // 小猫正在睡觉 console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象。
优点是继承了父类的模板,又继承了父类的原型对象;
缺点就是父类实例传参,不是子类实例化传参,不符合常规语言的写法。
二、构造继承
// 父类 function Animal(name){ this.name = name; this.sleep = function(){ console.log(this.name + '正在睡觉'); } } // 父类的原型方法 Animal.prototype.eat = function(food){ console.log(this.name + '正在吃' + food) } // 子类 function Cat(name){ //call apply 实现继承 Animal.call(this, name); } var cat = new Cat('小猫'); console.log(cat.name); // 小猫 console.log(cat.sleep()); // 小猫正在睡觉 console.log(cat.eat('鱼')); // undefined 父类的原型方法没有继承
这种原型继承的特点:继承了父类的模板,不继承了父类的原型对象。
优点是方便了子类实例传参;
缺点就是不继承了父类的原型对象。
三、混合继承(原型继承和构造继承)
// 父类 function Animal(name){ this.name = name; this.sleep = function(){ console.log(this.name + '正在睡觉'); } } // 父类的原型方法 Animal.prototype.eat = function(food){ console.log(this.name + '正在吃' + food) } // 子类 function Cat(name){ //call apply 实现继承 Animal.call(this, name); } Cat.prototype = new Animal(); var cat = new Cat('小猫'); console.log(cat.name); // 小猫 console.log(cat.sleep()); // 小猫正在睡觉 console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象。
优点方便了子类实例传参;
缺点就是调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)。
四、寄生组合继承
// 父类 function Animal(name){ this.name = name; this.sleep = function(){ console.log(this.name + '正在睡觉'); } } // 父类的原型方法 Animal.prototype.eat = function(food){ console.log(this.name + '正在吃' + food) } // 子类 function Cat(name){ //call apply 实现继承 Animal.call(this, name); } (function(){ // 这里只继承父类原型上的方法 var Super = function(){}; Super.prototype = Animal.prototype; //将实例作为子类的原型 Cat.prototype = new Super(); })(); var cat = new Cat('小猫'); console.log(cat.name); // 小猫 console.log(cat.sleep()); // 小猫正在睡觉 console.log(cat.eat('鱼')); // 小猫正在吃鱼
这种原型继承的特点:既继承了父类的模板,又继承了父类的原型对象,并且代码无冗余。
缺点就是实现较为复杂。