继承 · 前端笔记

[TOC] # 继承 ## 原型链继承核心：将父类的实例作为子类的原型 ~~~ function Parent () { this.names = ['kevin', 'daisy']; } Parent.prototype.getName = function () { return this.name } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); child1.names.push('yayu'); console.log(child1.names); // ["kevin", "daisy", "yayu"] var child2 = new Child(); console.log(child2.names); // ["kevin", "daisy", "yayu"] ~~~ 特点： * 非常纯粹的继承关系，实例是子类的实例，也是父类的实例 * 父类新增原型方法/原型属性，子类都能访问到 * 简单，易于实现缺点 * 要想为子类新增属性和方法，必须要在`new Animal()`这样的语句之后执行，不能放到构造器中 * 无法实现多继承 * 来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的） * 创建子类实例时，无法向父类构造函数传参 ## 构造函数继承核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型） ~~~ function Parent () { this.names = ['kevin', 'daisy']; } Parent.prototype.say = function () {}; function Child () { Parent.call(this); this.type = 'child1'; } var child1 = new Child(); child1.names.push('yayu'); child1.names // ["kevin", "daisy", "yayu"] var child2 = new Child(); child2.names // ["kevin", "daisy"] new Child1().say() // undefined ~~~ 特点： * 解决了1中，子类实例共享父类引用属性的问题 * 创建子类实例时，可以向父类传递参数 * 可以实现多继承（call多个父类对象）缺点： * 实例并不是父类的实例，只是子类的实例 * 只能继承父类的实例属性和方法，不能继承原型属性/方法 * 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能 ## 实例继承核心：为父类实例添加新特性，作为子类实例返回 ~~~ // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); }; function Cat(name){ var instance = new Animal(); instance.name = name || 'Tom'; return instance; } // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // false ~~~ 特点： * 不限制调用方式，不管是`new 子类()`还是`子类()`,返回的对象具有相同的效果缺点： * 实例是父类的实例，不是子类的实例 * 不支持多继承 ## 组合继承 ~~~ function Parent3 () { this.name = 'parent3'; this.play = [1, 2, 3]; } function Child3 () { Parent3.call(this); this.type = 'child3'; } Child3.prototype = new Parent3(); var s3 = new Child3(); var s4 = new Child3(); s3.play.push(4); console.log(s3.play, s4.play); ~~~ 缺点 * 父级的构造函数执行了2次 优化 ~~~ function Parent4 () { this.name = 'parent4'; this.play = [1, 2, 3]; } function Child4 () { Parent4.call(this); this.type = 'child4'; } Child4.prototype = Parent4.prototype; // 同时Child4的实例的constructor也指向Parent4~~~ var s5 = new Child4(); var s6 = new Child4(); console.log(s5, s6); console.log(s5 instanceof Child4, s5 instanceof Parent4); // true true console.log(s5.constructor); // Parent4 ~~~ 特点： * 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法 * 既是子类的实例，也是父类的实例 * 不存在引用属性共享问题 * 可传参 * 函数可复用缺点： * 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了） ## 寄生组合式继承核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点 ~~~ function Parent (name) { this.name = name; this.colors = ['red', 'blue', 'green']; } Parent.prototype.getName = function () { console.log(this.name) } function Child (name, age) { Parent.call(this, name); this.age = age; } var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; var child1 = new Child('kevin', '18'); ~~~ 优化 ~~~ function Parent5 () { this.name = 'parent5'; this.play = [1, 2, 3]; } function Child5 () { Parent5.call(this); this.type = 'child5'; } Child5.prototype = Object.create(Parent5.prototype); Child5.prototype.constructor = Child5 var s7 = new Child5() console.log(s7 instanceof Child5, s7 instanceof Parent5); // true true console.log(s7.constructor) // function Child (name, age) { Parent.call(this, name); this.age = age;} ~~~ ## Class ~~~ class Animal{ constructor(){ console.log("Animal Constructor"); } } Animal.prototype.species = "动物"; class Cat extends Animal{ constructor(name,color){ super(); this.name = name; this.color = color; } } let cat1 = new Cat("测试1","红色") console.log(cat1); ~~~ # 参考资料 * [JavaScript深入之继承的多种方式和优缺点](https://github.com/mqyqingfeng/Blog/issues/16) * [JS实现继承的几种方式](https://www.cnblogs.com/humin/p/4556820.html) * [JavaScript继承](https://github.com/273539918/blog/issues/1) * 前端跳槽面试必备技巧