广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中常见的几种继承方式
  • 514
分享到

JavaScript中常见的几种继承方式

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

目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }

原型继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son() {
}
Son.prototype = new Parent();
console.log(new Son())

内存图

分析

原型继承的原理就是把子类的prototype指向父类的实例身上,这样做,子类就可以使用父类的属性和方法了,但是,无法初始化父类的属性,这个时候,盗用构造函数继承就出现了

盗用构造函数继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name)
}

console.log(new Son('jack'))

分析

盗用构造函数的原理简单理解就是吧父类函数的代码 copy 到子类里面,在上述代码中相当于把父类的this.name = name 在子类里执行了一次,这样的话,就可以在子类实例化的时候初始化父类的一些属性

如果这样的话就取不到父类原型身上的方法了,为了解决这个问题,组合继承就出现了

组合继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name) // 第二次调用
}
Son.prototype = new Parent() // 第一次调用
console.log(new Son('jack'))

组合继承,也称为伪经典继承,结合了原型继承和盗用构造函数继承,既可以初始化父类的方法,又可以取到父类的原型身上的方法

可以看到这种继承方式name会被多次创建,虽然在使用上没什么区别,但是会多开辟一些无用内存,而且还会多调用一次函数

原型链继承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent)
console.log(son)

这种继承适用于想在一个对象的基础上添加一个新的对象,这个新的对象可以有自己独立的属性

还可以有自己的属性:

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent, {
  age: {
    value: 18,
    enumerable: true,
    writable: true,
    configurable: true
  }
})
console.log(son)

寄生式继承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
function createObj(origin){
  const res = Object(origin);
  res.age = 18;
  res.getAge = function() {
    return this.age
  };
  return res
}
const son = createObj(parent)
console.log(son)

寄生式继承就是类似于工厂模式,经过它创建的函数,会有一些自带的值

寄生组合式继承

function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function () {
  return this.name;
}
function Son(name) {
  Parent.call(this, name)
};
function inhertPrototype(Son, Parent) {
  const res = Object(Parent.prototype); // 创建目标对象的原型对象
  // 可以理解为复制父类对象prototype的属性,这样做可以少调用一次父类的实例化操作
  res.constructor = Son // 将构造函数指向son
  Son.prototype = res //将子类的prototype 指向父类创建的原型对象,这样子类既可以使用父类的方法,又不用实例化父类
}
inhertPrototype(Son, Parent)
console.log(new Son('jack'))

寄生组合式继承 被称为最佳继承模式 他解决了组合继承父类函数被调用两次的问题,同时又不会给子类的prototype 加上父类的无用的属性

 可以对比组合继承的图看一下,prototype 上少了 name ,最佳的继承方式

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

--结束END--

本文标题: JavaScript中常见的几种继承方式

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中常见的几种继承方式
    目录原型继承内存图分析盗用构造函数继承分析组合继承原型链继承寄生式继承寄生组合式继承原型继承 function Parent(name) { this.name = name }...
    99+
    2022-11-13
  • 分享JavaScript 中的几种继承方式
    目录一、原型链1.1 原型链的问题二、盗用构造函数2.1 基本思想2.2 可向父类构造函数传参2.3 盗用构造函数的问题三、组合继承(伪经典继承)3.1 基本思想3.2 组合继承的问...
    99+
    2022-11-13
  • 浅谈JavaScript的几种继承实现方式
    目录当前需求: 实现 Student 继承自 Person构造函数Person构造函数Student希望满足的条件功能利用原形链实现方法的继承方式1: 子类原型指向父类原型方式2 子...
    99+
    2023-05-17
    JavaScrip 继承
  • js中常见的6种继承方式总结
    目录前言1、原型继承2、盗用构造函数3、组合继承4、原型式继承5、寄生式继承6、寄生式组合继承总结前言 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的...
    99+
    2022-11-13
  • JavaScript中常见的七种继承及实现
    目录1. 原型链继承2. 借用构造函数继承3. 组合继承4. 原型式继承5. 寄生式继承6. 寄生式组合继承7. class继承1. 原型链继承 原型链继承是 JavaScript ...
    99+
    2023-03-08
    JavaScript实现继承方式 JavaScript继承
  • JavaScript中常见的七种继承怎么实现
    本篇内容主要讲解“JavaScript中常见的七种继承怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中常见的七种继承怎么实现”吧!1. 原型链继承原型链继承是 Jav...
    99+
    2023-07-05
  • JavaScript中六种面试常考继承方式总结
    目录原型链继承盗用构造函数组合继承原型式继承寄生式继承寄生式组合继承js的几种继承方式在我们面试的时候经常会被问到,所以深入理解js几种继承方式以及它们的优缺点是非常有必要的。 原型...
    99+
    2023-02-13
    JavaScript继承方式 JavaScript继承
  • JavaScript中的常见继承总结
    目录前言原型链常用的继承方法原型继承原理优点缺点执行结果借用构造函数继承原理优点缺点执行结果组合继承原理优点缺点执行结果前言 我们在学习前端的过程中一定会遇到继承这个问题 继承其实就...
    99+
    2022-11-13
  • c++继承的实现方式有哪几种
    在C++中,有三种继承的实现方式:公有继承、私有继承和保护继承。 公有继承: 公有继承是最常用的继承方式。使用关键字"publi...
    99+
    2023-10-26
    c++
  • JavaScript实现继承的6种常用方式总结
    目录1.原型链继承2.借用构造函数继承3.组合继承(经典继承)4.原型式继承方法一:借用构造函数方法二:Object.create()5.寄生式继承6.寄生组合式继承7.ES6、Cl...
    99+
    2022-11-13
  • javascript 几种常用继承方法和信用盘平台搭建
    1.原型链继承(最简单)核心 (实现思路):信用盘平台搭建【企鹅21717-93408】用父类的实例充当子类原型对象 function Person(name) {this.name = name;this...
    99+
    2022-10-18
  • JavaScript原型链及常见的继承方法
    目录原型链原型链的概念原型链的问题几种常见的继承方法盗用构造函数组合继承原型式继承寄生式继承寄生组合式继承原型链 原型链的概念 在JavaScript中,每一个构造函数都有一个原型,...
    99+
    2022-11-13
  • appium中常见的几种点击方式
    目录1、最常见的点击方式click()方法 2、手指轻敲屏幕操作tap()方法3、手指按下操作press()方法4、模拟手指长按操作long_press()方法首先从app...
    99+
    2022-11-13
  • JavaScript实现继承的7种方式总结
    目录什么是继承实现继承的6种方式1. 原型链继承2. 构造函数继承3. 组合继承(伪经典继承)4. 原型式继承5. 寄生式继承6.寄生组合式继承7.class 类继承什么是继承 用官...
    99+
    2023-05-14
    JavaScript实现继承方式 JavaScript继承方式 JavaScript继承
  • Vue中常见的几种传参方式小结
    目录前言父子组件之间传参兄弟组件之间传参provide/inject传参总结前言 Vue组件传参方也是面试最常考的内容,犹记得当初刚出来实习的时候,遇到一个需求,大概就是一个tabs...
    99+
    2023-05-19
    vue传参方式有哪些 vue传参方法 vue传参
  • java中实现分页的常见几种方式
    文章目录 1. 前言2. 先说结论3. 例子1. 数据库SQL的限制条件(limit、fetch)2. 使用List集合的截取功能实现3. 插件PageHelper 1. 前言 无论是...
    99+
    2023-08-31
    mybatis java 分页 数据库 PageHelper
  • javascript创建对象的几种常见方法
    本篇内容介绍了“javascript创建对象的几种常见方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!既...
    99+
    2022-10-19
  • js中有哪三种继承方式
    这篇文章主要介绍js中有哪三种继承方式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.js原型(prototype)实现继承代码如下<body>  <s...
    99+
    2022-10-19
  • JavaScript继承的三种方法实例
    继承 1. 什么是继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。 继承也是为了数据共...
    99+
    2022-11-12
  • JavaScript中的继承方式有哪些
    这篇文章将为大家详细讲解有关JavaScript中的继承方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。类式继承(构造函数)JS中其实是没有类的概念的,所谓的类也...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作