返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文弄懂JavaScript的继承方式
  • 578
分享到

一文弄懂JavaScript的继承方式

2024-04-02 19:04:59 578人浏览 独家记忆
摘要

目录javascript中的继承方式问:JavaScript中有几种继承方式呢问:每种继承方式是怎么实现的呢盗用构造函数组合继承原型链式继承寄生式继承寄生时组合继承JavaScrip

JavaScript中的继承方式

问:JavaScript中有几种继承方式呢

emmm...六种?五种?还是四种来着...

这次记清楚了 一共有五种继承方式

  • 盗用构造函数 (经典继承方式 )
  • 组合继承
  • 原型链式继承
  • 寄生式继承
  • 寄生式组合继承

问:每种继承方式是怎么实现的呢

盗用构造函数

基本思路很简单:在子类构造函数中调用父类构造函数。因为毕竟函数就是在特定上下文中执行代码的简单对象,所以可以使用apply() 和 call() 方法以新创建的对象为上下文执行构造函数。

盗用构造函数的一个优点就是可以在子类构造函数中向父类构造函数传参

function SuperType(name) {
  this.name = name
  this.sayName = function () {
      console.log(this.name);
  }
}
function SubType(name, age) {
  //  继承 SuperType 并传参
  SuperType.call(this, name);
  //实例属性
  this.age = age
}
let instance1 = new SubType('zxc', 2)
let instance2 = new SuperType('gyx')
// instance1.sayHi() // ?类也不能访问父类原型上定义的方法,因此所有类型只能使用构造函数模式
console.log(instance1);  // SubType { name: 'zxc', sayName: [Function (anonymous)], age: 2 }

组合继承

组合继承(有时候也叫伪经典继承)综合了原型链和盗用构造函数,将两者的优点集中了起来。基 本的思路是使用原型链继承原型上的属性和方法,而通过盗用构造函数继承实例属性。 这样既可以把方 法定义在原型上以实现重用,又可以让每个实例都有自己的属性。

function SuperType(name) {
    this.name = name
    this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SubType(name, age) {
    //继承实例属性
    SuperType.call(this, name)
    this.age = age
}
//继承原型方法
SubType.prototype = new SuperType() 
SubType.prototype.sayAge = function () {
    console.log(this.age);
}
let instance1 = new SubType('zxc', '22')
instance1.sayName()  //zxc
instance1.sayAge()   // 22
let instance2 = new SubType("Greg", 27);
console.log(instance2.colors); // "red,blue,green"
instance2.sayName(); // "Greg";
instance2.sayAge(); // 27

原型链式继承

原型式继承适用于这种情况:你有一个对象,想在它的基础上再创建一个新对象。你需要把这个对象先传给 object() ,然后再对返回的对象进行适当修改。

Object.create() 方法将原型式继承的概念规范化了 这个方法接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象(第二个可选)

let person = {
   name: "Nicholas",
   age: 12,
   friends: ["Shelby", "Court", "Van"]
};
let anotherPerson1 = Object.create(person);
anotherPerson1.name = 'lll'  
anotherPerson1.friends.push('zxc') 
console.log(anotherPerson1);   // { name: 'lll' }
console.log(person.friends); //[ 'Shelby', 'Court', 'Van', 'zxc' ]

// ? Object.create() 的第二个参数与 Object.defineProperties() 的第二个参数一样:每个新增属性都通过各自的描述符来描述

let anotherPerson = Object.create(person, {
    name: {
        value: "Greg"
    }
});
console.log(anotherPerson.name); // "Greg"

寄生式继承

寄生式继承背后的思路类似于寄生构造函数和工厂模式:创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象。

function createAnother(original) {
    //通过调用函数创建一个对象
    let clone = Object(original)
    clone.sayHi = function () { // 以某种方式增强这个对象
        console.log("hi");
    };
    clone.sayName = function () { // 以某种方式增强这个对象
        console.log(this.name);
    };
    return clone; // 返回这个对象
}
let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};
let anotherPerson = createAnother(person);
anotherPerson.sayHi(); // "hi"
anotherPerson.sayName(); // "hi"

寄生时组合继承

function SuperType(name) {
    this.name = name
    this.colors = ['red', 'blue']
}
SuperType.prototype.sayName = function () {
    console.log(this.name)
}
function SubType(name, age) {
    SuperType.call(this, name); // 第二次调用 SuperType()
    this.age = age;
}
SubType.prototype = new SuperType(); // 第一次调用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
    console.log(this.age);
};
let instance1 = new SubType('zxc', 12)
console.log(instance1);

在上面的代码执行后, SubType.prototype上会有两个属性: name 和 colors 。它们都是 SuperType 的实例属性,但现在成为了 SubType 的原型属性。在调用 SubType构造函数时,也会调用SuperType 构造函数,这一次会在新对象上创建实例属性 name 和 colors 。这两个实例属性会遮蔽原型上同名的属性。

如图所示,有两组 name 和 colors 属性:一组在实例上,另一组在 SubType 的原型上。这是 调用两次 SuperType 构造函数的结果,好在有办法解决这个问题。

寄生式组合继承通过盗用构造函数继承属性,但使用混合式原型链继承方法。基本思路是不通过调 用父类构造函数给子类原型赋值,而是取得父类原型的一个副本。说到底就是使用寄生式继承来继承父 类原型,然后将返回的新对象赋值给子类原型。寄生式组合继承的基本模式如下所示:

function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype); // 创建对象
    prototype.constructor = subType; // 增强对象
    subType.prototype = prototype; // 赋值对象
}

这个 inheritPrototype() 函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数:子 类构造函数和父类构造函数。在这个函数内部,第一步是创建父类原型的一个副本。然后,给返回的 prototype 对象设置 constructor 属性,解决由于重写原型导致默认 constructor 丢失的问题。最 后将新创建的对象赋值给子类型的原型。如下例所示,调用 inheritPrototype() 就可以实现前面例 子中的子类型原型赋值:

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SubType(name, age) {
    SuperType.call(this, name)
    this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function () {
    console.log(this.age);
};

这里只调用了一次 SuperType 构造函数,避免了 SubType.prototype 上不必要也用不到的属性, 因此可以说这个例子的效率更高。而且,原型链仍然保持不变,因此 instanceof 操作符和 isPrototypeOf() 方法正常有效。寄生式组合继承可以算是引用类型继承的最佳模式。

到此这篇关于一文弄懂JavaScript的继承方式的文章就介绍到这了,更多相关js继承方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 一文弄懂JavaScript的继承方式

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

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

猜你喜欢
  • 一文弄懂JavaScript的继承方式
    目录JavaScript中的继承方式问:JavaScript中有几种继承方式呢问:每种继承方式是怎么实现的呢盗用构造函数组合继承原型链式继承寄生式继承寄生时组合继承JavaScrip...
    99+
    2024-04-02
  • 【Java】还不理解继承?一篇文章看懂继承|继承入门
    作者:努力学习的大一在校计算机专业学生,热爱学习和创作。目前在学习和分享:算法、数据结构、Java等相关知识。 博主主页: @是瑶瑶子啦 所属专栏: Java岛冒险记【从小白到大佬之路】...
    99+
    2023-09-03
    java 开发语言 jvm
  • 一文读懂C++中的继承之菱形继承(案例分析)
    目录前言一、什么是多继承?1.单继承2.多继承二、菱形继承1.虚基类的引入2.虚基表的引入总结前言 我们上一篇说了世间万物都有一个继承体制,或多或少子类继承了父类的某些特征,但大多都...
    99+
    2024-04-02
  • JavaScript继承方式介绍
    本篇内容介绍了“JavaScript继承方式介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、构造函数...
    99+
    2024-04-02
  • javascript的继承方式有哪些
    这篇文章主要讲解了“javascript的继承方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript的继承方式有哪些”吧! ...
    99+
    2024-04-02
  • JavaScript的继承方式是什么
    本文小编为大家详细介绍“JavaScript的继承方式是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript的继承方式是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。JavaScript中...
    99+
    2023-06-30
  • 一文带你搞懂Maven的继承与聚合
    目录一、继承二、继承关系实施步骤三、聚合与继承的区别一、继承 我们已经完成了使用聚合工程去管理项目,聚合工程进行某一个构建操作,其他被其管理的项目也会 执行相同的构建操作。那么接下来...
    99+
    2024-04-02
  • JavaScript中的继承方式有哪些
    这篇文章将为大家详细讲解有关JavaScript中的继承方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。类式继承(构造函数)JS中其实是没有类的概念的,所谓的类也...
    99+
    2024-04-02
  • 一文搞懂C++中继承的概念与使用
    目录前言继承概念及定义继承概念继承定义继承方式父类和子类对象赋值转换继承中的作用域派生类的默认成员函数派生类的友元与静态成员继承关系单继承多继承菱形继承前言 我们都知道面向对象语言的...
    99+
    2024-04-02
  • JavaScript中有哪些继承方式
    这期内容当中小编将会给大家带来有关JavaScript中有哪些继承方式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。原型链首先得要明白什么是原型链,在一篇文章看懂prot...
    99+
    2024-04-02
  • JavaScript中的继承采用什么方式
    这篇文章主要讲解了“JavaScript中的继承采用什么方式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的继承采用什么方式”吧! ...
    99+
    2024-04-02
  • 分享JavaScript 中的几种继承方式
    目录一、原型链1.1 原型链的问题二、盗用构造函数2.1 基本思想2.2 可向父类构造函数传参2.3 盗用构造函数的问题三、组合继承(伪经典继承)3.1 基本思想3.2 组合继承的问...
    99+
    2024-04-02
  • JavaScript中常见的几种继承方式
    目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }...
    99+
    2024-04-02
  • javascript继承实现的方式有哪些
    本文小编为大家详细介绍“javascript继承实现的方式有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript继承实现的方式有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是继承用官...
    99+
    2023-07-05
  • 一篇文章弄懂javascript内存泄漏
    1、什么是内存泄漏 在了解什么是内存泄漏之前, 我们应该要对内存是什么有个概念, 随机存取存储器(英语:Random Access Memory,缩写:RAM)是与 CPU 直接交...
    99+
    2024-04-02
  • JavaScript实现继承的7种方式总结
    目录什么是继承实现继承的6种方式1. 原型链继承2. 构造函数继承3. 组合继承(伪经典继承)4. 原型式继承5. 寄生式继承6.寄生组合式继承7.class 类继承什么是继承 用官...
    99+
    2023-05-14
    JavaScript实现继承方式 JavaScript继承方式 JavaScript继承
  • 浅谈JavaScript的几种继承实现方式
    目录当前需求: 实现 Student 继承自 Person构造函数Person构造函数Student希望满足的条件功能利用原形链实现方法的继承方式1: 子类原型指向父类原型方式2 子...
    99+
    2023-05-17
    JavaScrip 继承
  • 一篇文章让你看懂Js继承与原型链
    目录继承与原型链继承属性继承方法在 JavaScript 中使用原型性能附:原型链是实现继承的主要方法总结继承与原型链 当谈到继承时,JavaScript 只有一种结构:对象。每个实...
    99+
    2024-04-02
  • javascript继承方法的使用
    这篇文章主要介绍“javascript继承方法的使用”,在日常操作中,相信很多人在javascript继承方法的使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”javascript继承方法的使用”的疑惑有所...
    99+
    2023-06-20
  • JavaScript中的继承模式有哪些
    JavaScript中的继承模式有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一. 原型链继承所谓原型链继承,就是让父类的一个实例作为子...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作