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 什么是动态规划 动态规划是一种通过将原问题分解为相对简单的子问题来…
阅读更多...
近期几首小诗汇总-生活~卷

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

生活 为生活飘零&#xff0c;风雨都不阻 路见盲人艰&#xff0c;为她心点灯 贺中科大家长论坛成立十五周年 科学家园有喜贺 园外丑汉翘望中 曾一学子入我科 正育科二盼长大 憧憬也能入此家 与科学家论短长 园外翘首听高论 发现有隙入此坛 竟然也能注册成 入园浏览惶然立 此贴…
阅读更多...
JAVA中的回溯算法解空间树，八皇后问题以及骑士游历问题超详解

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

1.回溯算法的概念 回溯算法顾名思义就是有回溯的算法 回溯算法实际上一个类似枚举的搜索尝试过程&#xff0c;主要是在搜索尝试过程中寻找问题的解&#xff0c;当发现已不满足求解条件时&#xff0c;就“回溯”返回&#xff0c;尝试别的路径。回溯法是一种选优搜索法&#xff…
阅读更多...
[线性RNN系列] Mamba: S4史诗级升级

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

前言 iclr24终于可以在openreview上看预印本了 这篇&#xff08;可能是颠覆之作&#xff09;文风一眼c re组出品&#xff1b;效果实在太惊艳了&#xff0c;实验相当完善&#xff0c;忍不住写一篇解读分享分享。 TL;DR &#xff08;overview&#xff09; Structured State-Sp…
阅读更多...
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 斤&…
阅读更多...
从头开始搭建一套Elasticsearch集群

从头开始搭建一套Elasticsearch集群

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

深入了解 MySQL 的 EXPLAIN 命令

一、什么是 EXPLAIN 命令&#xff1f; EXPLAIN 命令用于显示 MySQL 如何执行某个 SQL 语句&#xff0c;尤其是 SELECT 语句。通过 EXPLAIN 命令&#xff0c;可以看到查询在实际执行前的执行计划&#xff0c;这对于优化查询性能至关重要。 二、EXPLAIN 的基本用法 要使用 EXP…
阅读更多...
如何禁用键盘上的特定键或快捷方式？这里有详细步骤

如何禁用键盘上的特定键或快捷方式？这里有详细步骤

要禁用特定的键盘键或快捷键吗&#xff1f;微软官方应用程序Microsoft PowerToys使这项任务变得非常简单。以下是使用Microsoft PowerToys中的键盘管理器禁用特定键或快捷方式的快速指南。 如果你还没有安装Microsoft PowerToys 如果你的设备上没有安装Microsoft PowerToys&a…
阅读更多...
springboot上传图片

springboot上传图片

前端的name的值必须要和后端的MultipartFile 形参名一致 存储本地
阅读更多...
鸿蒙开发：Universal Keystore Kit（密钥管理服务）【匿名密钥证明(C/C++)】

鸿蒙开发：Universal Keystore Kit（密钥管理服务）【匿名密钥证明(C/C++)】

匿名密钥证明(C/C) 在使用本功能时&#xff0c;需确保网络通畅。 在CMake脚本中链接相关动态库 target_link_libraries(entry PUBLIC libhuks_ndk.z.so)开发步骤 确定密钥别名keyAlias&#xff0c;密钥别名最大长度为64字节&#xff1b;初始化参数集&#xff1a;通过[OH_Huk…
阅读更多...
css3 transform的旋转和位移制作太阳花

css3 transform的旋转和位移制作太阳花

css3 transform 实例展示知识点rotate 旋转translate 位移transform: translate(300px,200px) rotate(90deg) 实例代码 实例展示 知识点 transform的两个属性 rotate 旋转 translate 位移 transform: translate(300px,200px) rotate(90deg) 实例代码 <!DOCTYPE html&g…
阅读更多...
flask 定时任务(APScheduler)使用current_app app_context()上下文

flask 定时任务(APScheduler)使用current_app app_context()上下文

前言: 描述&#xff1a;flask定时任务调用的方法中使用了current_app.logger.info()记录日志报错 报错代码 raise RuntimeError(unbound_message) from None RuntimeError: Working outside of application context.This typically means that you attempted to use functiona…
阅读更多...
IDEA中Git常用操作及Git存储原理

IDEA中Git常用操作及Git存储原理

Git简介与使用 Intro Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git是一款分布式版本控制系统&#xff08;VSC&#xff09;&#xff0c;是团队合作开发…
阅读更多...
算法学习笔记（8.3）-（0-1背包问题）

算法学习笔记（8.3）-（0-1背包问题）

目录 最常见的0-1背包问题&#xff1a; 第一步&#xff1a;思考每轮的决策&#xff0c;定义状态&#xff0c;从而得到dp表 第二步&#xff1a;找出最优子结构&#xff0c;进而推导出状态转移方程 第三步&#xff1a;确定边界条件和状态转移顺序 方法一&#xff1a;暴力搜素…
阅读更多...
MFC之对话框--线宽/线型/颜色

MFC之对话框--线宽/线型/颜色

文章目录 线宽输入实现优化无法记录上一次线粗问题 线宽滑动实现实现选择线类型实现颜色选择总结 线宽输入实现 优化无法记录上一次线粗问题 线宽滑动实现 实现选择线类型 实现颜色选择 总结 1。创建新窗口&#xff08;dialog)会创建一个新的类&#xff0c;在类中实现窗口中的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023