JavaScript中new操作符具体干了什么

news2024/11/25 16:54:08

文章目录

    • 一、是什么
    • 二、流程
    • 三、手写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 = name
  return 1
}
const t = new Test('xxx')
console.log(t.name) // 'xxx'

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

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

function Test(name) {
  this.name = name
  console.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.prototype
    let 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

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

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

相关文章

【堆、位运算、数学】算法例题

目录 十九、堆 121. 数组中的第K个最大元素 ② 122. IPO ③ 123. 查找和最小的K对数字 ② 124. 数据流的中位数 ③ 二十、位运算 125. 二进制求和 ① 126. 颠倒二进制位 ① 127. 位1的个数 ① 128. 只出现一次的数字 ① 129. 只出现一次的数字 II ② 130. 数字范围…

Java项目:66 ssm实验室耗材管理系统设计与实现+jsp

作者主页:源码空间codegym 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员管理实验材料,审核教师与学生对实验材料的申请信息,统计每学年实验材料的使用总数信息。 教师申请使用实验材料…

未来有无限可能,加油年轻人!

在浩渺的宇宙中,我们如同微尘般渺小,然而,正是这些微小的存在,构成了世界的五彩斑斓。而对于年轻人来说,他们就是这个世界的未来,是希望的象征,是无限可能的源泉。他们拥有青春的热情&#xff0…

什么是智能体(agent)

智能体(Agent)是人工智能领域中的一个核心概念。在最基本的层面上,智能体可以被定义为一个实体,它能够在其所处的环境中自主地感知信息,并根据这些信息做出决策,以实现特定的目标或任务。智能体的关键特性包…

idea将Java代码打成jar包

1.进入idea的项目管理界面编写好代码 2.点击Artifacts的“”号下的jar->“From modules with dependencies” 3.在Main Class选择主函数 4.点击OK后,选择菜单栏的“Build” -> “Build Artifacts” -> “Build” 之后我们就可以看到在左侧生成了一个out文件…

生成单一c段或者连续c段范围内的所有ip地址+生成范围内C段脚本

1. 背景 马上有电子政务外网攻防演练要处理ip 2. 脚本1 生成c段和连续c段所有ip地址.py 用处:生成单一c段或者连续c段范围内的所有ip地址。 用法:ipc.txt 放入 ip段或者两个ip段范围:如: 192.168.3.0/24 172.16.1.0/24-1…

罐头鱼AI视频混剪矩阵获客系统|批量剪辑定时发送

罐头鱼AI视频混剪矩阵获客系统 随着数字化时代的来临,视频内容已经成为各行业吸引用户关注和提升品牌形象的重要方式之一。为了帮助用户更便捷、高效地进行视频制作和推广,罐头鱼AI推出了全新的视频混剪矩阵获客系统,为您的视频营销增添智能利…

使用Python读取一个文本文件并计算其中每个单词出现的次数

import re import matplotlib.pyplot as plt from collections import Counter word_counts {} with open(E:\自然语言处理\Hamlet(2).txt) as f:for line in f:words line.strip().lower().split()for word in words:word re.sub(r[^a-zA-Z],,word)if word in word_counts:…

【链表】Leetcode 2. 两数相加【中等】

两数相加 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的, 并且每个节点只能存储 一位 数字。请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数字 0 之外,这两个数都不…

网速监控,实时网络速度监控

带宽与网速 现在,对高带宽的需求空前高涨,而且网络(包括标准的内部部署)以及公共、私有和混合环境都变得更加复杂。 虽然带宽和网速经常互换使用,但它们并不总是相同的。网速更多的是与延迟有关,而不是与…

文件上传基础篇

文件上传基础篇 文件上传漏洞原理 ​ 目标网站存在文件上传接口,但是对用户上传的文件没有做仔细甄别,导致黑客可以根据此功能点直接上传木马到网站服务器,造成危害 文件上传存在点 ​ 通常有头像上传,pdf上传 文件上传防护 …

Vue 计算属性和监视属性

Vue 计算属性和监视属性 computed computed 计算属性 规则: 用已有的属性计算不存在的属性默认调用一次get()只有值不发生改变的时候才可以使用简写(函数);值发生改变 使用对象式写法,才可以配置set()方法底层原理使…

har的编译及引用

1.创建HAR 选择文件->新建->模块,然后再下一个页面选择static library,之后在接下来的页面设置模块名字,然后下一步直到完成。 2.创建成功后在新建的模块下编写自己的代码内容。 3.编译HAR 编译默认是从Index.ets文件下进行导出,如果…

Flink:使用 Faker 和 DataGen 生成测试数据

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,…

用图解说明mysql 行锁加锁规则

加锁原则 原则 1:加锁的基本单位是 next-key lock。希望你还记得,next-key lock 是前开后闭区间。原则 2:查找过程中访问到的对象才会加锁。优化 1:索引上的等值查询,给唯一索引加锁的时候,next-key lock …

Linux---基本操作命令之用户管理命令

1.1useradd 添加新用户 root用户:/root 普通用户:/home/ 创建的用户还是david,只是在dave文件夹下 1.2 passwd 设置密码 给用户tony设置密码: 123456 1.3 id 查看用户是否存在 查看有没有这个用户:id 名字 gid:用…

当人工智能无处不在

以下文章来源:新华社 2024年度的“西南偏南”多元创新大会和艺术节8日至16日在得克萨斯州首府奥斯汀举行。在今年的数百场讲座或沙龙讨论中,热度最高、讨论最多的前沿话题不难猜——人工智能(AI)。 焦点高度发散。从太空探索到音乐…

【windows】Python文件打包成dll文件及遇见的问题

最近需要将py文件转为dll,特此记录。 操作步骤来自于:将Python文件发布成DLL并调用 写一个py文件 文件名:test_numpy.py import numpy as npdef func(my_list1, my_list2):list_np1 np.array(my_list1)list_np2 np.array(my_list2)retur…

Visual Studio 2013 - 输出窗口一闪而过问题解决

Visual Studio 2013 - 输出窗口一闪而过问题解决 1. Visual Studio Console 一闪而过问题解决1.1. set Debug1.2. set Release References 1. Visual Studio Console 一闪而过问题解决 工程 -> 属性 -> 配置属性 -> 链接器 -> 系统 -> 子系统 -> 下拉框 -&g…

机器视觉系统选型-镜头参数

镜头参数: 光圈:光圈是一个用来控制镜头通光量的装置 ,表示光圈大小我们是用光圈值(F值) ,如F1.4,F2,F2.8 焦距(Focus):透镜中心到其焦点的距离 景…