JavaScript进阶(7） ----构造函数和原型对象

目录

构造函数

prototype

定义：

使用场景：

constructor

使用场景：

原型proto

原型链

定义

特点

instanceof 运算符

原型继承的基本概念

在JavaScript中，构造函数和原型是面向对象编程的核心概念，它们共同构成了JavaScript对象的创建和继承机制。

构造函数

构造函数是一种特殊的函数，用于创建和初始化对象。当你想要创建一个具有特定属性和方法的对象时，你可以定义一个构造函数。构造函数通常以大写字母开头，以区分普通函数。

  // 1. 构造函数实现封装，封装人的姓名、年龄和 sayHi方法function Person(name, age) {this.name = namethis.age = agethis.sayHi = function () {console.log('hi~')}}// 实例化const zs = new Person('张三', 18)const ls = new Person('李四', 19)console.log(zs)console.log(ls)console.log(zs === ls)  // false // 2. 构造函数实现封装有个小问题console.log(zs.sayHi === ls.sayHi)  // false 两个函数不一样

prototype

定义：

构造函数通过原型分配的函数是所有对象所共享的。JavaScript 规定，每一个构造函数都有一个 prototype属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

使用场景：

可以解决：构造函数封装时函数（方法）会多次创建，占用内存的问题

原型对象可以挂载函数，对象实例化不会多次创建原型对象里面的函数，节约内存

<body><script>// 1. 构造函数实现封装，封装人的姓名、年龄和 sayHi方法
​function Person(name, age) {this.name = namethis.age = age// this.sayHi = function () {//   console.log('hi~')// }}Person.prototype.sayHi = function () {console.log('hi~')}console.log(Person.prototype)  // 原型对象// 实例化const zs = new Person('张三', 18)const ls = new Person('李四', 19)zs.sayHi()ls.sayHi()// console.log(zs)// console.log(ls)
​// 构造函数实现封装有个小问题console.log(zs.sayHi === ls.sayHi)  //  true
​
​</script>
</body>

构造函数和原型对象中的this 都指向实例化的对象

  // 1. 构造函数this指向 实例对象function Person(name, age) {this.name = name}// 2. 原型对象this指向 实例对象Person.prototype.sayHi = function () {console.log('hi~')console.log(this)  // 指向实例对象 zs}const zs = new Person('张三')zs.sayHi()

constructor

每个原型对象里面都有个constructor 属性（constructor 构造函数）

作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

<body><script>// constructor属性function Person(name) {this.name = name}
​// 1. constructor属性在原型对象里面// console.log(Person.prototype)
​// 2.  constructor属性 指向原型对象的构造函数console.log(Person.prototype.constructor === Person)  // true
​// 3. 有什么使用场景呢？// Person.prototype.sing = function () {//   console.log('我会唱歌')// }// Person.prototype.dance = function () {//   console.log('我会跳舞')// }
​// console.log(Person.prototype)
​Person.prototype = {// 手动指定一个constructor 指回构造函数constructor: Person,sing() {console.log('我会唱歌')},dance() {console.log('我会跳舞')}}console.log(Person.prototype)
​</script>
</body>

原型proto

对象都会有一个属性 proto 指向构造函数的prototype 原型对象

之所以我们对象可以使用构造函数 prototype 原型对象的方法，就是因为对象有 proto 原型的存在

<body><script>// 构造函数function Person(name) {this.name = name}
​// 1. 实例对象里面有 __proto__ 属性const zs = new Person('张三')console.log(zs)
​// 2.  __proto__ 指向原型对象 console.log(zs.__proto__ === Person.prototype)  // true
​// 3. 注意事项// 3.1 prototype 原型对象    __proto__ 原型// 3.2 __proto__ 非标准属性，在现代浏览器里面显示的是 [[Prototype]] 但是他们是等价的// 3.3 __proto__ 尽量不要修改它，否则会影响性能
​</script>
</body>

原型链

定义

当你访问一个对象的属性时，JavaScript 引擎会首先在对象自身查找该属性，如果没有找到，它会沿着原型链向上查找，直到找到该属性或者到达原型链的末端（通常是一个空对象）。这个机制允许对象继承属性。

特点

①当访问一个对象成员(属性/方法)时，首先查找这个对象自身有没有该成员(属性/方法)

②如果没有就查找它的原型对象（也就是 proto指向的 prototype 原型对象）

③如果还没有就查找原型对象的原型对象（Object的原型对象）

④依此类推一直找到 Object 为止（null）

⑤原型链就在于为对象成员查找机制提供一个方向，或者说一条路线

<body><script>// __proto__属性链状结构称为原型链// Person构造函数function Person(name) {this.name = name}// 1. 实例对象const zs = new Person('张三')zs.sayHi = function () {console.log('实例对象的方法')}// zs.sayHi()// 2. Person 原型对象Person.prototype.sayHi = function () {console.log('Person原型对象的方法')}// zs.sayHi()// 3. Ojbect 原型对象Object.prototype.sayHi = function () {console.log('Object原型对象的方法')}// zs.sayHi()// 4. nullzs.sayHi()// console.log(zs.sayHi)  // undefined</script>
</body>

instanceof 运算符

用来检测构造函数.prototype 是否存在于实例对象的原型链上

<body><script>// instanceof 运算符 // 语法:  实例对象  instanceof  构造函数// 作用： 检测构造函数的原型对象是否在实例对象的原型链上// Person构造函数function Person(name) {this.name = name}function Person1(name) {this.name = name}const zs = new Person('张三')console.log(zs instanceof Person)  // trueconsole.log(zs instanceof Person1)  // false// 数组 const arr = [1, 2, 3]console.log(arr instanceof Array)  //  trueconsole.log(arr instanceof Object)  //  true console.log(arr) // __proto__console.log(arr.__proto__ === Array.prototype) // trueconsole.log(Array.prototype.__proto__ === Object.prototype) // true</script>

原型继承的基本概念

  1. 原型对象：每个函数在创建时都会自动创建一个prototype属性，这个属性是一个对象，包含了该函数的所有实例共享的属性和方法。
  2. 原型链：对象的[[Prototype]]属性指向其原型对象，而原型对象本身也可能有一个[[Prototype]]属性，指向另一个对象。这样，对象之间形成了一条链式结构，这就是原型链。
  3. 属性查找：当访问一个对象的属性或方法时，JavaScript引擎首先在对象自身查找，如果找不到，就沿着原型链向上查找，直到找到属性或方法，或者到达原型链的末端。

<body><script>// 1. 抽取封装 公共的属性和方法  Person构造函数// 父级function Person() {this.eyes = 2}Person.prototype.eat = function () {console.log('我会吃饭')}console.log(new Person())console.log(new Person() === new Person())  // false// 男人构造函数function Man() {}// 女人构造函数function Woman() {}// 2. 继承-借助于原型对象Man.prototype = new Person()Man.prototype.constructor = Manconsole.log(Man.prototype)const zs = new Man()// console.log(zs)Woman.prototype = new Person()Woman.prototype.constructor = Womanconst xl = new Woman()// console.log(xl)Woman.prototype.baby = function () {console.log('我会生孩子')}console.log(xl)console.log(zs)  // 张三没有baby方法了</script>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/45082.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

海康工业相机驱动

海康工业相机驱动

1.新建基于对话框的MFC程序&#xff0c;界面布局如下 2.修改控件ID&#xff0c;为控件绑定变量 3.创建全局变量&#xff0c;构造函数中初始化变量&#xff0c;初始化对话框界面&#xff0c;补齐各控件按钮响应函数 全文程序如下&#xff1a; // MFC_GrabimageDlg.h : 头文件 /…
阅读更多...
【动态规划Ⅰ】斐波那契、爬楼梯、杨辉三角

【动态规划Ⅰ】斐波那契、爬楼梯、杨辉三角

动态规划—斐波那契系列 什么是动态规划斐波那契数组相关题目509. 斐波那契数 Easy1137. 第 N 个泰波那契数 Easy 杨辉三角118. 杨辉三角 Easy 爬楼梯相关题目70. 爬楼梯 Easy746. 使用最小花费爬楼梯 Easy 什么是动态规划 动态规划是一种通过将原问题分解为相对简单的子问题来…
阅读更多...
linux下解压命令

linux下解压命令

在Linux下&#xff0c;解压缩文件通常涉及多种命令&#xff0c;具体取决于文件的压缩格式。以下是一些常用的解压缩命令&#xff1a; tar.gz / .tgz 如果文件扩展名为 .tar.gz 或 .tgz&#xff0c;你可以使用 tar 命令来解压缩&#xff1a; tar -xzf filename.tar.gz这里的 -x …
阅读更多...
近期几首小诗汇总-生活~卷

近期几首小诗汇总-生活~卷

生活 为生活飘零&#xff0c;风雨都不阻 路见盲人艰&#xff0c;为她心点灯 贺中科大家长论坛成立十五周年 科学家园有喜贺 园外丑汉翘望中 曾一学子入我科 正育科二盼长大 憧憬也能入此家 与科学家论短长 园外翘首听高论 发现有隙入此坛 竟然也能注册成 入园浏览惶然立 此贴…
阅读更多...
系统架构的基础：定义、原则与发展历程

系统架构的基础：定义、原则与发展历程

目录 1. 系统架构的定义 2. 系统架构的基本组成部分 2.1 架构层次 2.2 架构视图 2.3 架构原则 3. 系统架构的发展历程 3.1 初期阶段：单体架构（Monolithic Architecture） 3.2 面向对象和组件化阶段 3.3 客户端-服务器架构（Client-Server Architecture） 3.4 三层架…
阅读更多...
在 Linux 上使用 lspci 命令查看 PCI 总线硬件设备信息

在 Linux 上使用 lspci 命令查看 PCI 总线硬件设备信息

lspci 命令用于显示 Linux 系统上的设备和驱动程序 当在个人电脑或服务器上运行 Linux 时&#xff0c;有时需要识别该系统中的硬件。lspci 命令用于显示连接到 PCI 总线的所有设备&#xff0c;从而满足上述需求。该命令由 pciutils 包提供&#xff0c;可用于各种基于 Linux 和…
阅读更多...
JAVA中的回溯算法解空间树，八皇后问题以及骑士游历问题超详解

JAVA中的回溯算法解空间树，八皇后问题以及骑士游历问题超详解

1.回溯算法的概念 回溯算法顾名思义就是有回溯的算法 回溯算法实际上一个类似枚举的搜索尝试过程&#xff0c;主要是在搜索尝试过程中寻找问题的解&#xff0c;当发现已不满足求解条件时&#xff0c;就“回溯”返回&#xff0c;尝试别的路径。回溯法是一种选优搜索法&#xff…
阅读更多...
E12.【C语言】练习：求两个数的最大公约数

E12.【C语言】练习：求两个数的最大公约数

1.枚举 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {int a 0;int b 0;int tmp 0;scanf("%d %d", &a, &b);if (a < b){for (int i1; i < a; i){if (0a% i && 0b%i)tmp i;}}if (a>b){for (int i 1; i <…
阅读更多...
[线性RNN系列] Mamba: S4史诗级升级

[线性RNN系列] Mamba: S4史诗级升级

前言 iclr24终于可以在openreview上看预印本了 这篇&#xff08;可能是颠覆之作&#xff09;文风一眼c re组出品&#xff1b;效果实在太惊艳了&#xff0c;实验相当完善&#xff0c;忍不住写一篇解读分享分享。 TL;DR &#xff08;overview&#xff09; Structured State-Sp…
阅读更多...
Nginx 日志统计分析命令

Nginx 日志统计分析命令

统计访问量最多的IP地址&#xff1a; awk {print $1} /path/to/nginx/access.log | sort | uniq -c | sort -nr | head -n 10统计不同状态码的出现次数&#xff1a; awk {print $9} /path/to/nginx/access.log | sort | uniq -c | sort -nr统计访问量最多的URL&#xff1a; awk…
阅读更多...
SQL Server端口配置指南

SQL Server端口配置指南

SQL Server是微软推出的关系型数据库管理系统&#xff0c;它支持多种操作系统平台。默认情况下&#xff0c;SQL Server使用TCP/IP协议的1433端口进行通信。然而&#xff0c;出于安全或其他考虑&#xff0c;我们可能需要更改SQL Server实例的默认端口。本文将指导你如何更改SQL …
阅读更多...
利率债与信用债的区别及其与债券型基金的关系

利率债与信用债的区别及其与债券型基金的关系

利率债与信用债的定义及其区别 定义 利率债&#xff1a; 定义&#xff1a;利率债是指由主权或类主权主体&#xff08;如中华人民共和国财政部、国家开发银行等&#xff09;发行的债券。这些债券通常被认为没有信用风险&#xff0c;因为它们由国家信用背书。特点&#xff1a;由…
阅读更多...
【Python】 深入了解 Python 字典的 | 更新操作

【Python】 深入了解 Python 字典的 | 更新操作

我白天是个 搞笑废物 表演不在乎 夜晚变成 忧伤怪物 撕扯着孤独 我曾经是个 感性动物 小心地感触 现在变成 无关人物 &#x1f3b5; 张碧晨/王赫野《何物》 Python 3.9 引入了一种新的字典更新操作&#xff0c;即使用 | 运算符合并字典。这种方式不仅简洁…
阅读更多...
xshell公钥免密登录

xshell公钥免密登录

设备&#xff1a;一台linux系统机器&#xff0c;一台windows系统机器 软件&#xff1a;xshell 要求&#xff1a;公钥免密登录 一、生成公钥、私钥 1、打开shell &#xff1b; 点击工具 &#xff1b; 新建用户生成密钥向导 2、生成密钥参数 密钥类型&#xff1a;RS…
阅读更多...
element ui ts table重置排序

element ui ts table重置排序

#日常# 今天带的实习生&#xff0c;在遇到开发过程中&#xff0c;遇到了element ui table 每次查询的时候都需要重置排序方式&#xff0c;而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…
阅读更多...
bi项目笔记

bi项目笔记

1.bi是什么 bi项目就是商业智能系统&#xff0c;也就是数据可视画、报表可视化系统&#xff0c;如下图的就是bi项目了 2.技术栈
阅读更多...
Linux rsync文件同步工具

Linux rsync文件同步工具

scp的不足 1. 性能问题 单线程传输 SCP只使用单线程进行传输&#xff0c;这意味着在传输大文件或大量小文件时&#xff0c;其传输速度和效率可能不如其他多线程工具。 无法压缩数据传输 SCP不支持内置的压缩机制&#xff0c;这在传输大文件时会导致带宽使用效率较低。 2.…
阅读更多...
我花了5年时间训练自己这种能力，希望你也能成功

我花了5年时间训练自己这种能力，希望你也能成功

人生最重要的能力是日拱一卒&#xff0c;即每天做一点点对自己有利的事并持续足够长的时间。作者之前急于求成&#xff0c;减肥失败。同事通过每月改进一件小事成功减肥且知识储备丰富。作者受启发后&#xff0c;通过走楼梯、换代糖等小改变&#xff0c;用 4 年减了 40 斤&…
阅读更多...
Hive的基本操作（创建与修改）

Hive的基本操作（创建与修改）

必备知识 数据类型 基本类型 类型写法字符char, varchar, string✔整数tinyint, smallint, int✔, bigint✔小数float, double, numeric(m,n), decimal(m,n)✔布尔值boolean✔时间date✔, timestamp✔ 复杂类型(集合类型) 1、数组&#xff1a;array<T> 面向用户提供…
阅读更多...
从头开始搭建一套Elasticsearch集群

从头开始搭建一套Elasticsearch集群

前言 刚开始使用ES接触的就是rpm或者是云上提供的ES服务&#xff0c;基本上开箱即用。特别是云上的ES服务&#xff0c;开局就是集群版本&#xff0c;提供的是优化后的参数配置、开箱即匹配访问鉴权及常用插件&#xff0c;如无特殊需要基本上屏蔽了所有细节&#xff0c;直接可投…
阅读更多...
最新文章

Copyright @ 2022~2023