js中new操作符详解

在这里插入图片描述


文章目录

  • 一、是什么
  • 二、流程
  • 三、手写new操作符


一、是什么

JavaScript中,new操作符用于创建一个给定构造函数的实例对象

例子

function Person(name, age){this.name = name;this.age = age;
}
Person.prototype.sayName = function () {console.log(this.name)
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'

从上面可以看到:

  • new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性
  • new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性(即实例与构造函数通过原型链连接了起来)

现在在构建函数中显式加上返回值,并且这个返回值是一个原始类型

function Test(name) {this.name = namereturn 1
}
const t = new Test('xxx')
console.log(t.name) // 'xxx'

可以发现,构造函数中返回一个原始值,然而这个返回值并没有作用

下面在构造函数中返回一个对象

function Test(name) {this.name = nameconsole.log(this) // Test { name: 'xxx' }return { age: 26 }
}
const t = new Test('xxx')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

从上面可以发现,构造函数如果返回值为一个对象,那么这个返回值会被正常使用


二、流程

从上面介绍中,我们可以看到new关键字主要做了以下的工作:

  • 创建一个新的对象obj
  • 将对象与构建函数通过原型链连接起来
  • 将构建函数中的this绑定到新建的对象obj上

根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理

举个例子:

function Person(name, age){this.name = name;this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'

在这里插入图片描述


三、手写new操作符

现在我们已经清楚地掌握了new的执行过程

那么我们就动手来实现一下new

function mynew(Func, ...args) {// 1.创建一个新对象const obj = {}// 2.新对象原型指向构造函数原型对象obj.__proto__ = Func.prototype// 3.将构建函数的this指向新对象let result = Func.apply(obj, args)// 4.根据返回值判断return result instanceof Object ? result : obj
}

测试一下

function mynew(func, ...args) {const obj = {}obj.__proto__ = func.prototypelet result = func.apply(obj, args)return result instanceof Object ? result : obj
}
function Person(name, age) {this.name = name;this.age = age;
}
Person.prototype.say = function () {console.log(this.name)
}let p = mynew(Person, "huihui", 123)
console.log(p) // Person {name: "huihui", age: 123}
p.say() // huihui

可以发现,代码虽然很短,但是能够模拟实现new


希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

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

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

相关文章

编曲学习:旋律创作基础概念 和弦进行作曲 和弦外音使用 作曲技巧

旋律创作基础概念 和弦进行作曲 和弦外音使用 作曲技巧https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_65be1ba7e4b064a83b92a3d7?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv文档https://app8epdhy0u9502.pc.xiaoe-tech.com/p/t_pc/course_pc_detail/camp_pro/cour…

【Larry】英语学习笔记语法篇——从句=连词+简单句

目录 三、从句连词简单句 1、必须有连词 主从结构 疑问词的词性 2、名词性从句 同位语从句 形式主语 形式宾语 that的省略 3、形容词性从句(上) 关系代词 关系词的作用 介词前置问题 4、形容词性从句(中) 定语关系…

【开源】SpringBoot框架开发医院门诊预约挂号系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 功能性需求2.1.1 数据中心模块2.1.2 科室医生档案模块2.1.3 预约挂号模块2.1.4 医院时政模块 2.2 可行性分析2.2.1 可靠性2.2.2 易用性2.2.3 维护性 三、数据库设计3.1 用户表3.2 科室档案表3.3 医生档案表3.4 医生放号…

vue3 之 商城项目—home

home—整体结构搭建 根据上面五个模块建目录图如下&#xff1a; home/index.vue <script setup> import HomeCategory from ./components/HomeCategory.vue import HomeBanner from ./components/HomeBanner.vue import HomeNew from ./components/HomeNew.vue import…

k8s filebeat 应用日志搜集

方案&#xff1a; 采用node上部署filebeat&#xff0c;并监控node上的日志记录&#xff0c;应用pod的日志文件它通过磁盘挂载将其输出到node的本地filbeat监控目录上。 实施&#xff1a; filebeat使用daemonSet&#xff08;见附录&#xff09;进行构建&#xff1a; 【k8s】…

让macOS外接键盘Home/End键可用

让 Mac 外接键盘支持 HOME 键_macos home键-CSDN博客 步骤&#xff1a; 1、打开终端创建文件夹&#xff0c;并编辑 DefaultKeyBinding.dict 文件 mkdir -p ~/Library/KeyBindings vim ~/Library/KeyBindings/DefaultKeyBinding.dict 2、往DefaultKeyBinding.dict添加下面的内容…

基于SSM的网络在线考试系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的网络在线考试系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring …

《MySQL 简易速速上手小册》第6章:MySQL 复制和分布式数据库(2024 最新版)

文章目录 6.1 设置和管理复制6.1.1 基础知识6.1.2 重点案例&#xff1a;使用 Python 设置 MySQL 主从复制6.1.3 拓展案例 1&#xff1a;自动故障转移6.1.4 拓展案例 2&#xff1a;设置双主复制 6.2 复制的类型和策略6.2.1 基础知识6.2.2 重点案例&#xff1a;使用 Python 设置半…

gerrit(3) | gerrit code review 产品概况

gerrit(3) | gerrit code review 产品概况 本文是对 Gerrit Code Review Product Overview 的机器翻译&#xff0c; 然后增加了一点个人的看法。 Gerrit Code Review 是基于 Git 版本控制的基于 Web 的代码审查工具。 Gerrit Code Review 是个啥 ? Gerrit provides a frame…

FastAPI从入门到实战(18)——FastAPI 中间件、CORS、后台任务

中间件 app.middleware(http) async def add_process_time_header(request: Request, call_next): # call_next将接收request请求做为参数start_time time.time()response await call_next(request)process_time time.time() - start_timeresponse.headers[X-Process-Time…

架构整洁之道-软件架构-测试边界、整洁的嵌入式架构、实现细节

6 软件架构 6.14 测试边界 和程序代码一样&#xff0c;测试代码也是系统的一部分。甚至&#xff0c;测试代码有时在系统架构中的地位还要比其他部分更独特一些。 测试也是一种系统组件。 从架构的角度来讲&#xff0c;所有的测试都是一样的。不论它们是小型的TDD测试&#xff…

windowsserver 2016 PostgreSQL9.6.3-2升级解决其安全漏洞问题

PostgreSQL 身份验证绕过漏洞(CVE-2017-7546) PostgreSQL 输入验证错误漏洞(CVE-2019-10211) PostgreSQL adminpack扩展安全漏洞(CVE-2018-1115) PostgreSQL 输入验证错误漏洞(CVE-2021-32027) PostgreSQL SQL注入漏洞(CVE-2019-10208) PostgreSQL 安全漏洞(CVE-2018-1058) …

数据库管理-第146期 最强Oracle监控EMCC深入使用-03(20240206)

数据库管理145期 2024-02-06 数据库管理-第146期 最强Oracle监控EMCC深入使用-03&#xff08;20240206&#xff09;1 概览2 性能中心3 性能中心-Exadata总结 数据库管理-第146期 最强Oracle监控EMCC深入使用-03&#xff08;20240206&#xff09; 作者&#xff1a;胖头鱼的鱼缸&…

dddddddddddddddddddd

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 磁盘满的本质分析 专栏&#xff1a;《Linux从小白到大神》 | 系统学习Linux开发、VIM/GCC/GDB/Make工具…

安全之护网(HVV)、红蓝对抗

文章目录 红蓝对抗什么是护网行动&#xff1f;护网分类护网的时间 什么是红蓝对抗红蓝对抗演练的目的什么是企业红蓝对抗红蓝对抗价值参考 红蓝对抗 什么是护网行动&#xff1f; 护网的定义是以国家组织组织事业单位、国企单位、名企单位等开展攻防两方的网络安全演习。进攻方…

[office] Excel中去除表格小数点后面数字的操作方法 #知识分享#学习方法

Excel中去除表格小数点后面数字的操作方法 如何去除EXCEL表格中小数点后面的数字&#xff0c;双击表格时只留有整数&#xff0c;今天&#xff0c;小编就教大家在Excel中去除表格小数点后面数字的操作方法。 Excel中去除表格小数点后面数字的操作步骤如下&#xff1a; 如图&…

力扣344-反转字符串

反转字符串 题目链接 解题思路 双指针算法两个指针向中间靠拢&#xff0c;直至相遇交换两个指针的值 class Solution { public:void reverseString(vector<char>& s) {int l 0;int r s.size()-1;while(l < r){char temp s[l];s[l] s[r];s[r] temp;l;r--;}} …

基于CNN卷积网络的MNIST手写数字识别matlab仿真,CNN编程实现不使用matlab工具箱

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络&#xff08;CNN&#xff09; 4.2 损失函数和优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ......................…

Bert下载和使用(以bert-base-uncased为例)

Bert官方github地址&#xff1a;https://github.com/google-research/bert?tabreadme-ov-file 【hugging face无法加载预训练模型】OSError&#xff1a;Can‘t load config for ‘./bert-base-uncased‘. If you‘re trying 如何下载和在本地使用Bert预训练模型 以bert-base-u…

计算机网络基本知识(一)

文章目录 概要速率带宽、吞吐量带宽吞吐量 时延发送&#xff08;传输&#xff09;时延传播时延排队时延处理时延时延带宽积 利用率 概要 速率、带宽、吞吐量、时延、利用率 速率 记忆要点&#xff1a;10的三次方 记忆要点&#xff1a;2的10次方 带宽、吞吐量 带宽 单位&…