iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >对于JavaScript继承你到底了解多少
  • 910
分享到

对于JavaScript继承你到底了解多少

2024-04-02 19:04:59 910人浏览 泡泡鱼
摘要

目录前言构造函数,原型对象,实例对象三者之间的关系原型链继承借⽤构造函数继承原型式继承寄生式继承组合继承(组合原型链继承和借用构造函数继承)寄生组合式继承总结前言 关

前言

关于继承,你到底了解多少,什么样的继承是最最优的,让我们一起来学习一些关于继承的那些知识点,带你了解他们的实现过程,以及他们的优缺点

构造函数,原型对象,实例对象三者之间的关系

先来了解他们的关系有助于对继承更好的理解

原型链继承

核⼼:将⽗类实例作为⼦类原型

代码实现过程:


function Parent(name){
    this.name = name || 'xt',
    this.arr = [1]
}
function Son(age){
    this.age = age
}
Parent.prototype.say = function() { //将需要复⽤、共享的⽅法定义在⽗类原型上
    console.log('hello');
}
Son.prototype = new Parent()
let s1 = new Son(18)
let s2 = new Son(19)
console.log(s1.say() === s2.say()); //true
console.log(s1.name,s1.age); //xt 18
console.log(s2.name,s2.age); //xt 19
s1.arr.push(2)
console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

优点:

实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)

缺点:

  • ⼦类实例共享了⽗类构造函数的引⽤属性,⽐如arr属性(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
  • 不能向⽗类构造函数传参

借⽤构造函数继承

核心:借⽤⽗类的构造函数来增强⼦类实例,等于是复制⽗类的实例属性给⼦类

代码实现:


function Parent(name) {
    this.name = name;
    this.arr = [1],
    this.say = function() { console.log('hello') }
}
function Son(name, age) {
    Parent.call(this, name) // 拷⻉了⽗类的实例属性和⽅法
    this.age = age
}
let s1 = new Son('小谭', 18)
let s2 = new Son('小明', 19)
console.log(s1.say === s2.say) //false ⽅法不能复⽤ ⽅法是独⽴,不是共享的
console.log(s1.name, s1.age); //小谭 18
console.log(s2.name, s2.age); //小明 19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ]

优点:

  • 只继承了父类构造函数的属性,没有继承父类原型的属性。
  • 可以继承多个构造函数属性(call多个)
  • 在子实例中可向父实例传参。

缺点:

  • 只能继承父类构造函数的属性。
  • 无法实现构造函数的复用。(每次用每次都要重新调用)
  • 每个新实例都有父类构造函数的副本,臃肿。

原型式继承

核心:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象


function Parent(name) {
    this.name = 'xt';
    this.arr = [1]
}
function object(obj){
    function F(){}
    F.prototype = obj;
    return new F();
  }
let s1 = new Parent(object)
s1.name = '小明'
s1.arr.push(2)
let s2 = new Parent(object)
console.log(s1.name,s2.name); // 小明 xt
console.log(s1.arr, s2.arr); //[ 1, 2 ] [ 1 ]

缺点:

  • 所有实例都会继承原型上的属性,无法传递参数
  • 无法实现复用。(新实例属性都是后面添加的)

寄生式继承

核心:在原型式继承的基础上,增强对象,返回构造函数


function Parent(name) {
    this.name = 'xt';
    this.arr = [1]
}
function object(obj){
    function F(){}
    F.prototype = obj;
    return new F();
  }
let Son = new Parent()
function addobject(obj){
    var add = object(obj)
    add.name = '小白'
    return add
}
var s1 = addobject(Son)
console.log(s1.name); //小白

缺点:

  • 没用到原型,无法复用。
  • 原型链继承多个实例的引用类型属性指向相同,存在篡改的可能。

组合继承(组合原型链继承和借用构造函数继承)

核心:通过调⽤⽗类构造函数,继承⽗类的属性并保留传参的优点;然后通过将⽗类实例作为⼦类原型,实现函数复⽤。

代码实现:


function Parent(name) {
    this.name = name;
    this.arr = [1]
}
Parent.prototype.say = function () { console.log('hello') }
function Son(name, age) {
    Parent.call(this, name) // 二次
    this.age = age
}
Parent.prototype = new Son() // 一次
let s1 = new Son('小谭', 18)
let s2 = new Son('小明', 19)
console.log(s1.say === s2.say) // true
console.log(s1.name, s1.age); //小谭 18
console.log(s2.name, s2.age); //小明 19
s1.arr.push(2)
console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] 不共享⽗类的引⽤属性,

优点:

  • 保留构造函数的优点:创建⼦类实例,可以向⽗类构造函数传参数。
  • 保留原型链的优点:⽗类的⽅法定义在⽗类的原型对象上,可以实现⽅法复⽤。
  • 不共享⽗类的引⽤属性。⽐如arr属性

缺点:

  • 由于调⽤了2次⽗类的构造⽅法,会存在⼀份多余的⽗类实例属性

寄生组合式继承

核心:结合借用构造函数传递参数和寄生模式实现继承


function Parent(name){
    this.name = name || 'xt',
    this.arr = [1]
}
function Son(name,age){
    Parent.call(this,name) // 核⼼
    this.age = age
}
Parent.prototype.say = function() {  
    console.log('hello');
}
Son.prototype = Object.create(Parent.prototype) // 核心 通过创建中间对象,⼦类原型和⽗类原型,就会隔离开。
Son.prototype.constructor = Son
let p1 = new Parent()

let s1 = new Son("小红",18)
let s2 = new Son("小黑",19)
console.log(p1.constructor); //[Function: Parent]
console.log(s1.constructor); // [Function: Son]
console.log(s1.say() === s2.say()); //true
console.log(s1.name,s1.age); // 小红 18
console.log(s2.name,s2.age); //小黑 19
s1.arr.push(2)
console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ]

寄生式组合继承可以算是引用类型继承的最佳继承

总结

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

--结束END--

本文标题: 对于JavaScript继承你到底了解多少

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

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

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

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

下载Word文档
猜你喜欢
  • 对于JavaScript继承你到底了解多少
    目录前言构造函数,原型对象,实例对象三者之间的关系原型链继承借⽤构造函数继承原型式继承寄生式继承组合继承(组合原型链继承和借用构造函数继承)寄生组合式继承总结前言 关...
    99+
    2024-04-02
  • 对于OpenStack Rocky,你了解多少?
    前不久,备受业界关注的OpenStack第18个版本Rocky正式发布。除了知道新版增强了人工智能,机器学习,NFV和边缘计算能力,关于Rocky的更多细节,相信很多人还不了解。以下信息根据OpenStack Rocky所有官方资料整理。1...
    99+
    2023-06-04
  • JavaScript面向对象中的封装和继承你了解吗
    目录1、面向对象1、封装2、原型对象3、继承总结1、面向对象 【三大显著特征】: 封装、继承、多态 1、封装 【解释】: 封装的本质就是将有关联的代码组合在一起。...
    99+
    2024-04-02
  • JavaScript的对象和包装类你了解多少
    目录一、对象1.1 描述对象1.2 属性的增删改查(以下需要在控制台输入)1.3 对象的创建方法1.3.1 字面量1.3.2 构造函数1.3.3 Object.create(原型)方...
    99+
    2024-04-02
  • Vue的底层原理你了解多少
    Observer (数据劫持) 核心是通过Obeject.defineProperty()来监听数据的变动,这个函数内部可以定义setter和getter。每当数据发生变化,就会触...
    99+
    2024-04-02
  • JavaScript 继承的 ABC:深入了解面向对象编程
    ...
    99+
    2024-04-02
  • JavaScript 原型链入门:了解对象继承的基础
    原型链概述 原型链是 JavaScript 中的一种机制,它允许对象访问和继承父对象的方法和属性。当一个对象被创建时,它会自动获得一个原型对象,该原型对象包含着该对象的所有属性和方法。当对象试图访问一个不存在的属性或方法时,它会自动搜索其...
    99+
    2024-02-06
    原型链 对象继承 原型 JavaScript JavaScript 内存
  • JavaScript 原型链揭秘:了解对象的继承和原型
    原型链是 JavaScript 中的一种继承机制,它允许对象从其原型对象继承属性和方法。通过原型链,对象可以访问其原型对象的所有属性和方法,甚至包括那些它自己没有定义的属性和方法。 原型链是如何工作的? 每个 JavaScript 对象...
    99+
    2024-02-06
    JavaScript 原型链 继承 原型 对象
  • 对现代JavaScript的了解有多少
    今天就跟大家聊聊有关现代JavaScript ,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。概念变量声明: var, const, let在 Jav...
    99+
    2024-04-02
  • JavaScript 对于 ASP 开发者来说,到底有多重要?
    JavaScript 对于 ASP 开发者来说,是一种非常重要的语言。在 ASP 开发中,JavaScript 主要用于实现网页交互效果、数据验证、Ajax 等功能。本文将详细介绍 JavaScript 在 ASP 开发中的重要性,并通过演...
    99+
    2023-07-20
    关键字 javascript 开发技术
  • 一篇文章带你了解C++面向对象编程--继承
    目录C++ 面向对象编程 —— 继承总结C++ 面向对象编程 —— 继承 "Shape" 基类 class Shape { public: Shape() { // 构造函数...
    99+
    2024-04-02
  • JavaScript的数据类型你了解多少
    JavaScript的数据类型你了解多少,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 前言作为JavaScript...
    99+
    2024-04-02
  • 【JAVA】关于接口你又了解多少呢?
    个人主页:【😊个人主页】 系列专栏:【❤️初识JAVA】 前言 Java接口是一种抽象数据类型,用于定义类必须遵守的方法,但不包含任何实现。它通常用来定义一组操作,并将这些...
    99+
    2023-10-09
    java python 网络
  • 一篇文章带你了解JAVA面对对象之继承与修饰符
    目录Java面向对象之继承与修饰符继承1.含义2.实现3.好处4.短处5.成员变量的访问特点6.super () 方法7.继承中结构方法的访问特点8.方法重写9.java继承的注意事...
    99+
    2024-04-02
  • 你对 Go 中的关键字了解多少?
    Go 是一门强类型、静态类型、编译型的编程语言,它在设计时强调了简洁、快速和安全。作为一个程序员,熟练掌握 Go 的关键字是非常重要的,因为它们是 Go 语言的基础。 package 在 Go 中,每个文件必须属于一个 package,...
    99+
    2023-08-18
    开发技术 数组 关键字
  • 关于服务连接器(Servlet)你了解多少?
    文章目录 Servlet1 简介2 快速入门3 执行流程4 生命周期5 方法介绍6 体系结构7 urlPattern配置8 XML配置最后说一句 Servlet 1 简介 S...
    99+
    2023-08-31
    servlet java 前端
  • JavaScript的引用数据类型你了解多少
    目录三种传递1、Object1、创建对象语法2、普通对象在内存中的存储方式2、Array1、创建数组语法2、数组的在内存中的存储方式3、数组常用方法1、 concat:用于拼接为新数...
    99+
    2024-04-02
  • Linux 关键字对于 ASP 程序员的重要性,你了解多少?
    在开发 ASP 网站时,我们经常使用的是 Windows 操作系统和 IIS 服务器。但是,在最近几年,越来越多的 ASP 开发者开始使用 Linux 服务器来部署他们的网站。这是因为 Linux 操作系统拥有众多的优点,比如高可靠性、高...
    99+
    2023-11-09
    面试 linux 关键字
  • 关于Linux系统和Windows系统你了解多少?
      Linux、Windows都属于操作系统,但是相对于Linux来说,Windows更加普遍使用的人也比较多,不用做过多的介绍,而Linux虽然使用率不是很高,但是也具有非常重要的作用,那么Linux和Windows到底有着怎样的区别一起...
    99+
    2023-06-05
  • 编程算法对于ASP和Laravel面试的重要性:你了解多少?
    在ASP和Laravel的面试中,编程算法是一个非常重要的考察点。编程算法是程序员必备的基础技能之一,掌握好编程算法对于提高程序员的编程能力和面试成功率都有着至关重要的作用。在这篇文章中,我们将深入探讨编程算法在ASP和Laravel面试...
    99+
    2023-07-06
    laravel 面试 编程算法
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作