广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中的六种继承方式以及优缺点总结
  • 346

0
分享到

JS中的六种继承方式以及优缺点总结

2024-04-02 19:04:59 346人浏览 薄情痞子
摘要

目录前言原型链继承 构造函数继承 组合继承（原型链继承和构造函数继承组合） 寄生式继承 组合寄生式继承 extends继承 总结前言 继承是js世界中必不可少的一个环节，号称JS的三

前言

继承是js世界中必不可少的一个环节，号称JS的三座大山之一，使用这种方式我们可以更好地复用以前的开发代码，缩短开发的周期、提升开发效率

在es6之前，JS中的类都是通过构造函数模拟的，并不存在真正意义上的类，虽然ES6的类知识一个语法糖😂，这个时期的类是可以当作函数直接使用的，到了ES6之后，类是不可以再当作函数使用了

在开始聊继承之前，首先需要明确的是类中存在两种属性：实例上的属性和公共属性，接下来谈到的所有继承方式都是围绕这两点来展开


function Animal(name) {
  // 实例上的属性
  this.name = name;
}

// 公共属性
Animal.prototype.eat = function() {
  // todo ...
}

如何避免将ES6之前的构造函数直接当作函数调用？

ES5时期解决方案:


function Animal() {
    // 若是直接调用, 不是使用 new调用, 抛出异常
    if (!(this instanceof Animal)) {
        // new的原理, 使用new的时候, this是Animal的实例, 则 this instanceof Animal 为true
        throw new Error("请勿直接调用构造函数");
    }
}

ES6之后解决方案：


function Animal() {
    // 若是使用new, 则new.target指向自身, 否则为undefined, 但是在继承的时候不能使用,因为继承实例上属性的时候, 原来的es5是使用 Animal.call(this)的方式
    if (!new.target) {
        throw new Error("请勿直接调用构造函数");
    }
}

上述两种方案都可以解决直接当作函数调用，若是直接调用控制台会报错：Uncaught Error: 请勿直接调用构造函数

接下来便一起看看JS中有哪些继承方式

原型链继承

原型链继承是比较常见的继承方式之一，其中涉及的构造函数、原型和实例，三者之间存在着一定的关系，即每一个构造函数都有一个原型对象，原型对象又包含一个指向构造函数的指针，而实例则包含一个原型对象的指针。


function Person(name) {
    this.name = name;
    this.permission = ["user", "salary", "vacation"];
}

Person.prototype.say = function () {
    console.log(`${this.name} 说话了`);
};

function Staff(age) {
    this.age = age;
}

Staff.prototype = new Person("张三");

const zs = new Staff(12);
console.log(zs.name); // 张三
zs.say(); // 张三 说话了

此时代码是符合期望，接下来再创建一个实例并修改name和permission


const zs = new Staff(12);
const zs2 = new Staff(18);
zs.permission.pop()
zs.name = '李四';

console.log(zs.name);
console.log(zs2.name);
console.log(zs.permission);
console.log(zs2.permission);

前两个分别输出是：李四、张三，后面两个输出结果一致，都为["user", "salary"]，为什么会出现这种情况呢？
当执行zs.name = '李四';时，其实这个时候是赋值操作，赋值之后zs变为

而zs2.name是通过原型链继续查找，因此前面的两个输出是李四、张三

通过console.log(zs.__proto__ === zs2.__proto__);输出为true，可以得知两个实例使用的是同一个原型对象Person，他们的内存空间是共享的，当一个发生变化时，另外一个也随之进行了变化

通过上述发现原型链继承存在一些缺点

构造函数继承

构造函数通常时借助call、apply来完成继承


function Person(name) {
    this.name = name;
    this.permission = ["user", "salary", "vacation"];
}

Person.prototype.say = function () {
    console.log(`${this.name} 说话了`);
};

function Staff(name, age) {
    Person.call(this, name);
    this.age = age;
}

Staff.prototype.eat = function () {
    console.log('吃东西啦～～～');
}

const zs = new Staff("张三", 12);
console.log(zs);

上述代码控制台输出：

可以看到不仅拥有Staff的属性和方法，同时也继承了Person的属性，因为每次实例化的时候都会调用Person.call(this, name);,可以解决原型链继承的问题

此时调用Person原型上的方法


zs.say()

这个时候控制台会报错：Uncaught TypeError: zs.say is not a function

组合继承（原型链继承和构造函数继承组合）

原型链继承和构造函数继承都存在各自的问题和优势，结合两种继承方式便生成了组合继承


function Person(name) {
    this.name = name;
    this.permission = ["user", "salary", "vacation"];
}

Person.prototype.say = function () {
	console.log(`${this.name} 说话了`);
};

function Staff(name, age) {
    // 第二次执行 Person
    Person.call(this, name);
    this.age = age;
}

Staff.prototype.eat = function () {
    console.log("吃东西啦～～～");
};

// 第一次执行 Person
Staff.prototype = new Person();
// 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
Staff.prototype.constructor = Staff;

const zs = new Staff("张三", 12);
const ls = new Staff("李四", 12);
zs.permission.pop();
console.log(zs.permission);
console.log(ls.permission);
zs.say();
ls.say();

暂时控制台的输出都是正常的，也将上述两种继承的缺点解决了，但是此时又新增了两个个问题：

  1. Person被执行了两次，分别为：Person.call(this, name)和new Person()，期望执行一次，多执行的一次便会造成一次性能开销
  2. 在之前Staff.prototype = new Person()定义一些公共属性和方法时会被覆盖掉，例如不能实例调用zs.eat()，控制台会报错Uncaught TypeError: zs.eat is not a function，若是在其之后定义则会污染Person

寄生式继承

通过利用Object.create获得一份目标对象的浅拷贝，然后添加一些方法避免污染基类，主要是解决组合继承的第二个问题

主要将如下两行代码进行替换


Staff.prototype = new Person();
Staff.prototype.constructor = Staff;

替换为：


Staff.prototype = Object.create(Person.prototype, {
    constructor: {
        // 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
        value: Staff,
    },
});

组合寄生式继承

到目前为止，还有一个两次实例化Person的问题没有解决，接下来的组合寄生式继承可完美解决上述问题，这也是ES6之前所有继承方式中最优的继承方式

完整代码如下：


function Person(name) {
    this.name = name;
    this.permission = ["user", "salary", "vacation"];
}

Person.prototype.say = function () {
    console.log(`${this.name} 说话了`);
};

function Staff(name, age) {
    Person.call(this, name);
    this.age = age;
}

Staff.prototype = Object.create(Person.prototype, {
    constructor: {
        // 若是不将Staff constructor指回到Staff, 此时的Staff实例zs.constructor则指向Person
        value: Staff,
    },
});

Staff.prototype.eat = function () {
    console.log("吃东西啦～～～");
};

其实继承时，改变Staff.prototype指向并不止上述这些方式，还有一些其他方法

  • prototype.__proto__方式

Staff.prototype.__proto__ = Person.prototype

prototype.__proto__存在兼容性问题,自己找不到,通过原型链继续向上查找,此时Animal和Tiger不会再共享同一地址,不会相互影响

  • Object.setPrototypeOf方式

Object.setPrototypeOf(Staff.prototype, Person.prototype)

es6语法, 存在兼容性，其原理就是原理就是 prototype.__proto__方式

extends继承

在ES6之后，可以使用extends进行继承，这也是目前开发中最常使用的方式，虽然目前浏览器支持度并不理想，但是在工程化如此完善的今天，这些都已经不是制约使用其的理由


class Person {
    constructor(name) {
        this.name = name;
        this.permission = ["user", "salary", "vacation"];
    }

    say() {
        console.log(`${this.name} 说话了`);
    }
}

class Staff extends Person {
    constructor(name, age) {
        super(name);
        this.age = age;
    }

    eat() {
        console.log("吃东西啦～～～");
    }
}

其实ES6的继承通过babel编译之后，采用也是组合寄生式继承，因此我们需要重点掌握其继承原理。

总结

到此这篇关于JS中六种继承方式以及优缺点的文章就介绍到这了,更多相关JS继承方式及优缺点内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS中的六种继承方式以及优缺点总结

本文链接: https://www.lsjlt.com/news/137758.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JS中的六种继承方式以及优缺点总结
    目录前言原型链继承 构造函数继承 组合继承（原型链继承和构造函数继承组合） 寄生式继承 组合寄生式继承 extends继承 总结前言 继承是JS世界中必不可少的一个环节，号称JS的三...
    99+
    2022-11-12
  • JavaScript中六种面试常考继承方式总结
    目录原型链继承盗用构造函数组合继承原型式继承寄生式继承寄生式组合继承js的几种继承方式在我们面试的时候经常会被问到，所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。 原型...
    99+
    2023-02-13
    JavaScript继承方式 JavaScript继承
  • js中常见的6种继承方式总结
    目录前言1、原型继承2、盗用构造函数3、组合继承4、原型式继承5、寄生式继承6、寄生式组合继承总结前言 js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的...
    99+
    2022-11-13
  • js面试题继承的方法及优缺点解答
    目录说一说js继承的方法和优缺点？一、原型链继承二、借用构造函数(经典继承)三、组合继承四、原型式继承五、寄生式继承六、寄生组合式继承说一说js继承的方法和优缺点？ 要点： 原型链继...
    99+
    2022-11-13
  • 深入讲解JavaScript之继承的多种方式和优缺点
    目录1.原型链继承2.借用构造函数(经典继承)3.组合继承4.原型式继承5. 寄生式继承6. 寄生组合式继承1.原型链继承 function Parent () { th...
    99+
    2022-11-12
  • js 创建对象的多种方式与优缺点小结
    目录早期创建方式工厂模式构造函数模式构造函数模式优化原型模式构造函数和原型模式组合动态原型模式寄生构造函数模式稳妥构造函数模式早期创建方式 var obj = new Objec...
    99+
    2022-11-11
  • JS中的6种打断点的方式实例总结
    目录前言普通断点条件断点DOM 断点URL 断点Event Listener 断点异常断点总结前言 Debugger 是前端开发很重要的一个工具，它可以在我们关心的代码处断住，通过单...
    99+
    2022-11-13
  • 详解Spring依赖注入的三种方式以及优缺点
    目录0.概述1.属性注入1.1 优点分析1.2 缺点分析2.Setter 注入优缺点分析3.构造方法注入优点分析总结0.概述 在 Spring 中实现依赖注入的常见方式有以下 3 种...
    99+
    2022-11-13
  • js中常见的4种创建对象方式与优缺点
    目录前言1、工厂模式2、构造函数模式3、原型模式4、Object.create()其他模式总结前言 说起创建对象，最容易想到的便是通过对象字面量方式直接定义一个对象吧，但这种方式只能...
    99+
    2022-11-13
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作