notes
  • Introduction
  • 语言
    • JS
      • JS原型到原型链
      • JS继承的实现
      • this对象
      • Promise基本概念
      • Promise实现
      • Promise实战
      • JS的EventLoop
      • JS容易出现误区的运算符
      • JS容易出现误区的操作符
      • JS深拷贝
      • JS节流与防抖
      • ES5实现原生/ES6方法
    • TS
      • 声明文件
      • 项目配置
    • CSS
      • CSS引入方式以及优先级计算
      • BFC神奇背后的原理-文摘
      • 回流reflow与重绘repaint
      • 三栏式布局
      • 垂直居中
      • 清除浮动的方法
      • 移动端适配方案
      • 纯CSS斜切角实现
      • CSS揭秘
      • 背景图片轮播
      • CSS绘制序列帧动画
      • transform实现一个多面体
    • HTML
  • ES6
  • Node.js
    • xxx
  • 前端框架
    • Vue.js
      • Vue双向数据绑定原理
      • Vue-Router原理及实现
    • React
    • AngularJS
  • 工程构建
    • Webpack
      • 01-webpack概述及背景
      • 03-webpack热更新原理
      • 04-splitChunks原理分析
      • 05-webpack工作流程
      • 07-webpack构建流程
      • 07-webpack构建流程
      • 10-webpack 如何进行性能分析
    • Gulp
    • Lint
      • ESLint
      • TSLint
    • Bable
  • 工程化
    • 模块化
    • 组件化
    • 规范化
      • 编码规范
    • 自动化
  • 运维
    • Nginx
    • GIT
    • CDN
    • VPS
    • DBA
  • 小程序
  • 跨端
  • 测试
  • 计算机技术
    • 计算机网络
      • 同源策略到前端跨域解决方案
      • TCP数据传输
      • TCP和UDP的区别
      • HTTP协议概述
      • HTTP缓存详解
      • HTTPS以及SSL建立过程
      • HTTPS的七个误解(译文)
      • cookie与Session机制区别以及Cookie SessionStorage LocalStorage异同
      • HTTP状态码Status
      • DNS原理入门
      • 网络攻击与防御
      • HTTP转发与重定向
      • 登录认证设计
    • 操作系统
      • shell脚本命令
    • Linux
      • Linux命令大全
      • vim命令
    • 浏览器
      • 浏览器内核、JS 引擎、页面呈现原理及其优化
      • 九种浏览器端缓存机制概览
      • 性能优化-网络请求方面
      • webkit解析CSS过程详解
  • 前端面试
    • 算法
Powered by GitBook
On this page
  • 1、原型链继承
  • 2、构造函数继承
  • 3、实例继承
  • 4、拷贝继承
  • 5、组合继承
  • 6、寄生组合继承
  • 7、使用ES6中的extends实现继承
  • 总结
  1. 语言
  2. JS

JS继承的实现

PreviousJS原型到原型链Nextthis对象

Last updated 3 years ago

继承的实现基于原型链,原型链不清楚的可以查看上一篇

在说JS继承之前,补充说明几个概念,方便下面的理解。

  • 多继承:顾名思义,实现多个继承,就是一个子类需要继承多个父类。

  • 来自原型对象的引用属性是所有实例共享的:所有实例共享同一个来自原型对象的引用类型,一旦某个实例操作使引用类型发生变化,则其他实例上改引用类型也会变化。例如cat1和cat2都继承于Animal,cat2执行cat2.type.push(2)操作后, cat2.type 和 cat1.type 都变成了[1,2]。

  • 向父类构造函数传参 :通过创建子类实例的过程中, 过new Cat('cat')向父类构造函数中传递参数,

下面聊一聊JS继承实现的几种方法:

先定义一个父类Animal,有一个属性,一个实例方法,一个原型方法

/** 初始化一个父类 **/
// 定义一个动物类
function Animal(name) {
    // 属性
    this.name = name || 'Animal';
    // 实例引用类型
    this.type = [1];
    // 实例方法
    this.sleep = function () {
        console.log(this.name + '正在睡觉!');
    }
}

// 原型方法
Animal.prototype.eat = function (food) {
    console.log(this.name + '正在吃:' + food);
};

1、原型链继承

将父类的实例作为子类的原型son.prototype = new father()

/** 1、原型链继承 - 将父类的实例作为子类的原型**/
function Cat() {
}

Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

var cat = new Cat();
console.log(cat.name);              //cat
cat.sleep();                        //cat正在睡觉!
cat.eat('fish');                    //cat正在吃:fish
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat);    //true

// 子类实例2
var cat2 = new Cat();
console.log(cat.type);   // [1]
console.log(cat2.type);  // [1]
cat.type.push(2);
console.log(cat.type);   // [1,2]   cat.type 也被改变了
console.log(cat2.type);  // [1,2]

特点:

  1. 非常纯粹的继承关系,实例是子类的实例,也是父类的实例

  2. 父类新增原型方法/原型属性,子类都能访问到

  3. 简单,易于实现

缺点:

  1. 可以在Cat构造函数中,为Cat实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行不能放到构造器中

  2. 无法实现多继承

  3. 来自原型对象的引用属性是所有实例共享的,例如改变子类实例2改变父类某个引用属性,则子类实例1中也会相应改变。

  4. 创建子类实例时,无法向父类构造函数传参,即不能通过new Cat('cat')向父类构造函数中传递name,只能通过Cat.prototype.name='cat'向子类属性中添加name。

2、构造函数继承

使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型) 这里用到了Animal.call(this);,就是讲Animal的属性和方法等创建到了cat对象里面,但是Animal的原型方法不能创建到cat对象。

/** 2、构造函数 **/
function Cat(name) {
    Animal.call(this);
    this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);              //Tom
console.log(cat.sleep());           //Tom正在睡觉!
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat);    // true
console.log(cat.eat('fish'));       //报错Uncaught TypeError: cat.eat is not a function

优点:

  1. 解决了1中,子类实例共享父类引用属性的问题

  2. 创建子类实例时,可以向父类传递参数

  3. 可以实现多继承(call多个父类对象)

缺点:

  1. 实例并不是父类的实例,只是子类的实例

  2. 只能继承父类的实例属性和方法,不能继承原型属性/方法

  3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

  4. 多继承时,对于同名属性,会发生覆盖。

3、实例继承

为父类实例添加新特性,作为子类实例返回

/** 3、实例继承 **/
function Cat(name) {
    var instance = new Animal();
    instance.name = name || 'Tom';
    return instance;
}

// Test Code
var cat = new Cat('jack');
console.log(cat.name);              //jack
console.log(cat.sleep());           //jack正在睡觉!
console.log(cat.eat('fish'));       //jack正在吃:fish
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

特点:

  1. 不限制调用方式,不管子类实例创建时是new 子类()还是子类(),返回的对象具有相同的效果

缺点:

  1. 实例是父类的实例,不是子类的实例 注意跟构造函数继承区别。

  2. 不支持多继承

4、拷贝继承

这是没有什么特点,就是遍历对象,拷贝继承

/** 4、拷贝继承 **/
function Cat(name) {
    var animal = new Animal();
    for (var p in animal) {
        Cat.prototype[p] = animal[p];
    }
    Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);              //Tom
console.log(cat.sleep());           //Tom正在睡觉!
console.log(cat.eat('fish'));       //Tom正在吃:fish
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

特点:

  1. 支持多继承

缺点:

  1. 效率较低,内存占用高(因为要拷贝父类的属性)

  2. 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)

5、组合继承

结合原型继承和构造函数继承两种方法,

  • 使用原型链实现对原型属性和方法的继承,

  • 使用构造函数来实现对实例属性的继承。

通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用。

/** 5、组合继承 **/
function Cat(name) {
    Animal.call(this);          // 第二次调用父类构造函数
    this.name = name || 'Tom';
}

Cat.prototype = new Animal();  // 第一次调用父类构造函数
Cat.prototype.constructor = Cat;  //要修改函数的执行

// Test Code
var cat = new Cat();
console.log(cat.name);              //Tom
console.log(cat.sleep());           //Tom正在睡觉!
console.log(cat.eat('fish'));       //Tom正在吃:fish
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat);    // true

特点:

  1. 弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法

  2. 既是子类的实例,也是父类的实例

  3. 不存在引用属性共享问题

  4. 可传参

  5. 函数可复用

缺点:

  1. 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

6、寄生组合继承

通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

/** 6、寄生组合继承 **/
function Cat(name) {
    Animal.call(this);
    this.name = name || 'Tom';
}


(function () {
    // 创建一个没有实例方法的类
    var Super = function () {
    };
    Super.prototype = Animal.prototype;
    //将实例作为子类的原型
    Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);              //Tom
console.log(cat.sleep());           //Tom正在睡觉!
console.log(cat.eat());             //Tom正在吃:fish
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat);    //true

跟组合继承不同点在于

  • 通过一个立即执行函数作用域,在此作用域中创建一个临时类,临时类的原型 = 父类原型(解决构造函数继承中不能继承父类原型方法属性问题),

  • 再将临时类的实例等于子类原型,因为是立即执行函数作用域,执行完就销毁了临时类的实例,也就避免了在组合继承里面保存了两份实例的问题。

完美方法,但是复杂。

7、使用ES6中的extends实现继承

extends继承肯定是最好的继承方法,优先推荐使用.

/** 7、extends继承 **/
class Animal {
    constructor(name) {
        // 属性
        this.name = name || 'Animal';
        // 实例方法
        this.sleep = function () {
            console.log(this.name + '正在睡觉!');
        }
    }

    eat(food) {
        console.log(this.name + '正在吃:' + food);
    }
}

class Cat extends Animal {
    constructor() {
        super('jack');
    }
}

var cat = new Cat();
console.log(cat.name);              //jack
cat.sleep();                        //jack正在睡觉!
cat.eat('fish');                    //jack正在吃:fish
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat);    //true

在实际应用中, 上面说的前六种继承,基本不怎么会用到,现在基本上都是使用extends继承实现。对于继承的关注

总结

7种继承方法循序渐进,慢慢根据各自的问题探寻出一种都能解决所有问题的继承方法,一般常用的就是使用原型继承,对原型的继承存在的问题没有在特定的场景中不会遇到,从严瑾的角度,还是推荐使用寄生组合继承。

不过目前基本上代码都是ES6的,毫无疑问优先使用extends继承。

参考:

JS从原型到原型链
JS实现继承的几种方式
Class 的继承