【JS继承】JS继承之原型链继承

article/2025/9/13 0:40:05

自我介绍:大家好,我是吉帅振的网络日志;微信公众号:吉帅振的网络日志;前端开发工程师,工作4年,去过上海、北京,经历创业公司,进过大厂,现在郑州敲代码。

JS继承专栏 

1【JS继承】什么是JS继承?

2【JS继承】常见的7种继承方式

3【JS继承】JS继承之原型链继承

4【JS继承】JS继承之构造函数继承

5【JS继承】JS继承之组合继承

6【JS继承】JS继承之原型式继承

7【JS继承】JS继承之寄生式继承

8【JS继承】JS继承之寄生组合式继承

9【JS继承】JS继承之ES6 Class继承

函数、函数原型和函数实例之间关系图

如图所示:函数 Personal 包含3个部分,转换为代码如下:// 函数对象(构造函数)
function Personal () {
}
// 函数原型对象
Personal.prototype = {constructor:Personal ,name:'hwk',sayName:function () {}
}
// p : 函数实例
var p = new Personal();
p.name      // 访问函数原型对象上的属性
p.sayName() // 调用函数原型对象上的方法

1.函数
所谓 函数 也就是 函数 Personal 其本身,也叫作构造函数 ,当一个函数被创建的同时,也会为其创建一个 prototype 属性,而这个属性,就是用来指向 函数原型,的我们可以把 prototype 理解为 Personal的一个属性,保存着函数原型的引用。

2.函数实例
函数实例 很好理解,就是上面代码中通过 new Personal() 得到的实例p,于此同时函数实例 p 内部会包含一个指向 函数原型的指针[[Prototype]],因此我们通过 p 可以去调用 函数原型 上的属性和方法,但是由于[[Prototype]] 是内部属性,无法直接访问,但是可以通过以下方式进行获取:__proto__ : 部分浏览器提供了此属性去访问[[Prototype]]属性的值,通过Object.getPrototypeOf 去获取。


3.函数原型
顾名思义,函数原型其实也是一个对象,它通过其constructor 属性与函数 Personal 进行关联,上面的代码中,通过重新赋值的方式定义了 Personal 的原型的属性和方法。

Personal.prototype = {constructor:Personal ,name:'hwk',sayName:function () {}
}

这里大家注意一下,因为这种方式定义属性和方法,会打断函数(Personal)和函数原型(Personal.prototype)之间的关系,因此需要重新将constructor 属性赋值为 Personal 函数本身,与其建立联系。

其实我们把 函数原型 看做一个独立的对象即可,它与其 函数 通过constructor 属性关联,上面说的函数(Personal) 有个prototype 属性是指向函数原型(Personal.prototype)。

Personal.prototype  === Personal.prototype 

这里的代码我们把等号后面的 Personal.prototype 理解成一个单独的对象即可,而等号前面我们理解成 Personal 调用 prototype 属性,因为函数原型对象我们一般用这样 Personal.prototype 来表示。
JS原型链继承

如上图所示: Personal 对象想要继承 Main 对象,则通过将 Main 的实例赋值给 Personal 的原型对象 :

Personal.prototype = new Main () ;

如此 Personal原型对象 就能通过 Main 对象的实例中的 [[Prototype]] 来访问到 Main原型对象 中的属性和方法了,而此时大家注意,Personal原型对象 则与 Personal函数 断开了联系,因为Personal原型对象被重新赋值了,所以还需要重新将Personal函数和Personal原型对象建立联系:

Personal.prototype.constructor = Personal ;完整代码如下:function Main () {
}
Main.prototype.sex = '男' ;
Main.prototype.eat = function () {console.log('Main eat ...')
}function Personal () {}
Personal.prototype.name = 'hwk';
Personal.prototype.sayName = function () {console.log('Personal name')
}// 继承
Personal.prototype = new Main();
Personal.prototype.constructor = Personal;var p = new Personal();
console.log(p.sex ) ; // 男
console.log(p.name) ; // undefined
p.eat();              // Main eat ...
p.sayName ();          // Uncaught TypeError:p.sayName is not a function 

运行如上代码你会发现 p.name 为 undefined , p.sayName 这个方法没找到,原因在于我们后面重新赋值了 Personal.prototype = new Main(); 因此找不到一开始定义在 Personal.prototype 上的name属性和sayName方法,因此在使用原型链继承的时候,要在继承之后再去在原型对象上定义自己所需的属性和方法:

// 先继承
Personal.prototype = new Main();
Personal.prototype.constructor = Personal;// 后定义属性和方法
Personal.prototype.name = 'hwk';
Personal.prototype.sayName = function () {console.log('Personal name')
}// 正确输出
console.log(p.sex ) ; // 男
console.log(p.name) ; // hwk
p.eat();              // Main eat ...
p.sayName ();          // Personal name

此时 Personal的实例 已经可以访问到父类Main原型对象中的方法和属性了,这也就是原型链继承的方式。在原型对象上定义属性和方法,其所有的构造函数实例都能共享原型上的属性和方法,因此如果某一个构造函数实例对象修改了原型对象上的属性值和方法,则也会影响其他实例对象。


http://chatgpt.dhexx.cn/article/9BJGE1lP.shtml

相关文章

原型链以及继承的几种方式

原型链以及继承的几种方式 学习原型链前需要了解原型链继承的几种方式 学习原型链前需要了解 只要创建一个新函数,就会根据特定的规则为该函数创建一个 prototype 属性,这个属性是一个指针,指向一个对象。这个对象的用途是包含可以由特定类型…

深入JS原型、原型链和继承

文章目录 一、原型的理解1.对象的原型2.函数的原型3.constructor 二、原型链1.概念和理解2.原型链中最顶层的原型 三、继承1.原型链继承:2.借用构造函数继承: 一、原型的理解 1.对象的原型 JavaScript当中每个对象都有一个特殊的内置属性[[prototype]]…

原型链与继承

目录 原型链 继承 Javascript为什么没有方法签名? 原型链继承 构造函数继承 组合继承 原型式继承 寄生继承 寄生组合继承 原型链 原型链是一种原型对象和实例对象的关系,通过属性__proto__进行联系。 继承 继承是一种允许我们在已有的类的基…

JS原型链和继承

JS原型链和继承 认识对象的原型 [[Get]]:JS的存取描述符——get方法,在获取对象属性时会自动调用 JavaScript当中每个对象都有一个特殊的内置属性[[prototype]],这个特殊的属性指向另外一个对象 [[prototype]]指向的对象: 当我…

JS原型链继承

再讲述JS原型链继承之前,我希望大家能够先理解 《函数,函数原型和函数实例之间的关系》,这样有助于大家理解JS原型链继承的原理,下面先看一张图吧,咱们看图说话: 如果大家看完了 《函数,函数原型和函数实…

原型链和继承的六种实现方式

一省:HTML 12. img标签的alt和title有什么不同? alt: 当图片加载不出来的时候,就会在图片未显示的地方出现一段 alt 设置的属性内容。浏览器的搜索引擎可以通过 alt 属性的文字描述来获取图片。 title: title是鼠…

原型,原型链,原型的继承

原型的作用? 1.节省内存空间 2.实现数据共享(继承) 什么是原型? 任何一个函数都有propotype属性,它本身是一个对象,我们称之为原型 构造函数,实例化对象与原型之间的关系? 1.任何一个函数都有prototype属性,它本身是一个对象,我们称之为原型 2.构造函数也是函数,也都…

JS原型、原型链和7种继承方法【白话文讲解】

前言 在学习JS原型、原型链和继承之前,我们必须先弄懂三个W,也就是我们常说的“学习三问” 学习三问: 1.它是什么?(What) 2. 为什么用它?(Why) 3. 什么时候用它&#xff…

原型链与常用继承方法

原型链:当访问一个对象的属性时,如果该对象内部不存在这个属性,就会去该对象的__proto__ 上(也就是它构造函数的prototype)查找 。该构造函数的prototype上也有一个自己的__proto__ 属性,然后继续向上查找,…

如何用原型链的方式实现一个 JS 继承?

大家好,我是前端西瓜哥。今天讲一道经典的原型链面试题。 原型链是什么? JavaScript 中,每当创建一个对象,都会给这个对象提供一个内置对象 [[Prototype]] 。这个对象就是原型对象,[[Prototype]] 的层层嵌套就形成了…

JS学习笔记 原型链和利用原型实现继承

原型链 原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的 实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持构造函数中有prototype属性,也是对象,叫原型 注意 原型中的方法是可…

Arduino基本知识(marlin固件配置)

初识arduino,根据mega2560(某宝可以买到)官网的100个管脚具体控制一句传输进行操作。 https://www.arduino.cc/en/Hacking/PinMapping2560 其管脚图如上所示。 首先在官网下载arduino的配套软件 https://www.arduino.cc/ 对于编程&#xf…

3D打印机硬件驱动-马林固件最新版本2.0.X中文注释(3)marlin 2.0.9.2 截至发稿时间2021年12月16日

/** * Marlin 3D Printer Firmware 头描述详见其他两个文件头描述 * Copyright (c) 2020 MarlinFirmware [https://github.com/MarlinFirmware/Marlin] * * Based on Sprinter and grbl. * Copyright (c) 2011 Camiel Gubbels / Erik van der Zalm * * This program is…

Marlin固件配置

文档来源自http://www.geek-workshop.com/thread-33314-1-1.html 1、基本配置基本配置是可选的,主要是给你的固件起个名字,如果你的配置很牛,让大家知道你是谁。据说这个在启动的时候会显示在显示屏中,应为我没有显示屏,所以无法验证。这个修改也很简单,通过搜索找到“S…

MKS MONSTER8 V1.0使用说明书(基于Marlin 2.0.X固件配置Voron 2.4)

广州谦辉信息科技有限公司 (基于Marlin 2.0.x 固件配置 Voron 2.4) 创客基地QQ群:489095605 232237692 邮箱:Huangkaidamakerbase.com.cn 主板购买链接:https://item.taobao.com/item.htm?spma1z10.5-c-s.w4002-23356668283.43.7eec55caLT…

ESP32烧录Marlin固件

安装platformIO 这点很简单,保证你拥有一个能够成功连接外网的环境即可。内网可能不太稳定有可能安装失败。 克隆代码 我这里采用的是fyset_e4的代码,这个代码开源在了https://github.com/FYSETC/FYSETC-E4,作者已经针对marlin固件做了一些配置。 更改…

i3型3D打印机制作详解——Marlin固件中文介绍

关注微信公众号:嵌入式基地 后台回复:3d打印机 获取资料 硬件框架搭建介绍 https://blog.csdn.net/qq_39020934/article/details/80380250 Marlin固件中文介绍 https://download.csdn.net/download/qq_39020934/10401251 …

3D打印机Marlin固件双Z轴设置

3D打印机Marlin固件双Z轴设置 在3D打印机Marlin固件的最新版本2.1.1中,设置双Z轴和老版本有一些改动。记录一下如何在最新版本的Marlin固件中设置双Z轴。 以MKS GEN_L V2.1的主板为例,硬件连接还是和原来一样,第二个Z轴的电动机连接到空闲的…

Marlin 固件配置手动退换料

换料的步骤首先把喷头加热,软化喷嘴里残余的线材,然后反转挤出机,把线材抽出来。最后装入新线材,并挤出余留在喷头里的材料。整个过程用一个命令 M600 就能完成。默认情况下 Marlin 固件并没有开启这个功能,但是可以修…

MKS_SGEN_L V1.0 marlin 固件编译

1.下载 Visual Studio Code 打开Visual Studio Code 安装插件 在应用商店搜索下载安装如下图: 安装完这些还是不行的 还要另外安装python 3.8.8 其他版本python 不行右下角会报错,提示安装python 3.8 python 3.8.8 百度网盘下载链接:https://pan.bai…