javaScript基础面试题 --- new操作符具体做了什么?

2023-11-12

当我们使用new操作符调用函数时,背后发生了很多事情。这里是简单的new操作符的行为:

  1. 创建一个新的空对象。
  2. 将这个空对象的原型链接到构造函数的prototype对象。
  3. 使用这个新对象作为上下文(即this的值)调用该构造函数。
  4. 如果构造函数返回一个对象,则返回这个对象;否则返回上下文。

现在,让我们尝试写一个简化版本的new操作符,我们称之为create

function create(Constructor, ...args) {
    // 步骤1: 创建一个新的空对象
    const obj = {};

    // 步骤2: 将这个空对象的原型链接到构造函数的`prototype`对象
    Object.setPrototypeOf(obj, Constructor.prototype);

    // 步骤3: 使用这个新对象作为上下文调用该构造函数
    const result = Constructor.apply(obj, args);

    // 步骤4: 如果构造函数返回一个对象,则返回这个对象;否则返回上下文
    return result instanceof Object ? result : obj;
}

// 测试
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.sayName = function() {
    console.log(this.name);
};

const person = create(Person, "Alice", 30);
console.log(person.name); // Alice
console.log(person.age);  // 30
person.sayName();         // Alice

这个create函数是new操作符的简化实现,它尝试模仿new的基本行为。然而,要注意,真实的new操作符比这个简化版要复杂得多,处理了更多的边缘情况和特性。但这个简化版本为你提供了一个对new的基本理解。

注意: 这里的Constructor其实是外部传递过来的一个函数参数,是构造函数。将空对象obj的原型链接到Constructor.prototype构造函数的原型上

疑惑:

这个对象的原型链接到构造函数的 prototype上的意义是什么?

当你访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript 会查找该对象的原型,看是否有这个属性或方法。将这个对象的原型链接到构造函数的 prototype上意义是实现方法属性的继承。

setPrototypeOf不就是用来实现继承吗?那extends和setPrototypeOf又有什么区别?

功能很像,都用来实现继承
但是setPrototypeOf老旧,extends比较新
extends底层不是使用setPrototypeOf实现的

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javaScript基础面试题 --- new操作符具体做了什么? 的相关文章

随机推荐

  • H.264 标准简介

    JVT Joint Video Team 视频联合工作组 于2001年12月在泰国Pattaya成立 它由ITU T和ISO两个国际标准化组织的有关视频编码的专家联合组成 JVT的工作目标是制定一个新的视频编码标准 以实现视频的高压缩比 高
  • Visual Studio编译出来的程序无法在其它电脑上运行

    在其它电脑 比如Windows Server 2012 上运行Visual Studio编译出来的应用程序 结果报错 无法启动此程序 因为计算机中丢失VCRUNTIME140 dll 尝试重新安装该程序以解决此问题 解决方法 属性 gt 配
  • PNP和NPN磁感应开关有什么区别

    1 我们以磁性开关为例 先要搞清楚PNP NPN 表示的意思是什么 P表示正 N表示负 PNP表示平时为高电位 信号到来时信号为负 NPN表示平时为低电位 信号到来时信号为高电位输出 接近开关和光电开关只是检测电路不同输出相同 至于PLC接
  • Spring 提示:无法找到元素 'aop:aspectj-autoproxy'

    问题描述 org springframework beans factory xml XmlBeanDefinitionStoreException Line 18 in XML document from class path resou
  • 程序员从初级到中级10个秘诀

    新闻来源 techrepublic comJustin James曾发表过一篇博文 10 tips for advancing from a beginner to an intermediate developer 为我们分享如何才能完成
  • syskey (win7启动密码)加密和破解方法

    1 什么是syskey Syskey是NT Service Pack 3中带的一个工具 用来保护SAM数据库不被离线破解 用过去的加密机制 如果攻击者能够得到一份加密过的SAM库的拷贝 他就能够在自己的机器上来破解用户口令 2 如何开启sy
  • [Json依赖] JSONObject的依赖包

  • Windos10专业版开启远程桌面协助

    我需要控制局域网的电脑 这台电脑是win10专业版 搜索 远程桌面设置 进入后启动远程桌面设置 然后发现当前用户已经有访问权 当前用户没有密码 那么远程失败 解决方法是 按win r 输入GPEDIT MSC 计算机配置 gt 安全设置 g
  • 前端框架React

    前端框架React 组件基础 React事件机制 哪些方法会让React重新渲染 render会做什么 React类组件和函数组件 React高阶组件 和普通组件的区别 适用场景 React受控组件和非受控组件 React有状态组件和无状态
  • java enum compare_Java Compare Enum value

    In Java you can use operator to compare Enum value 1 Java Enum example Language java package com mkyong java public enum
  • 啥?简单的题都不会,可咋整呢?

    目录 一 寻找原因 二 寻找解决方法 三 常见的刷题网站 刷题技巧 明明自觉学会了不少知识 可真正开始做题时 却还是出现了 一支笔 一双手 一道力扣 Leetcode 做一宿 的窘境 你是否也有过这样的经历 题型不算很难 看题解也能弄明白
  • Python3获取股票行情数据(中国个股/中国指数/全球指数)

    usr local bin python3 coding utf 8 source http www cnblogs com txw1958 import os io sys re time json base64 import webbr
  • Js常用面试题目知识整理

    Js代码题 1 千分位 题目 要求返回参数数字的千分位分隔符字符串 思路 在字符串长度不确定的情况下 可以使用递归 comma number 1000 是获取数字最后三位 将其放在返回值的最后面 并且在前面加一个逗号 comma Math
  • freenom域名申请教程

    freenom域名申请教程 1 注册 申请域名 打开freenom官网 注册一个账户 注意 如果没有明显的注册按钮 可以通过如下方式同时申请域名和注册账户 打开域名申请 不用注册 选择好了域名之后 点击Checkout 选择免费期限 最长的
  • shell脚本编程 实例讲解(键盘输入三个数字,按照从大到小的书顺序输出)

    1 键盘输入三个数字 按照从大到小的书顺序输出 排序题 a b c 2 10 9 a 2 b 10 c 9 第一步 两两相互进行比较 比较三次 第二步 不论谁大谁小 最后都输出 a b c 从大从小 a永远存储的都是最大值 a和b进行比较
  • 笔记&代码

    可视化前三步走 数据类型 分析目的 实现工具 2 1 类别数据可视化 显示各类别的绝对频数及百分比等 条形图 饼图等 2 1 1 条形图及其变种 垂直条形图 类别在x轴 水平条形图 类别在y轴 简单条形图 并列条形图 堆叠条形图 1 简单条
  • 前端知识——css 之 flex 布局

    目录 一 认识 flex 布局 1 flex 布局的重要概念 二 flex 相关属性 1 flex container 中的属性 1 1 flex direction item 的排布方向 1 2 flex wrap 排布是否换行 1 3
  • Java多线程下载文件

    Java多线程下载文件 优化 合理利用服务器资源 将资源利用最大化 加快下载速度 一般有两种方式 线程池里面有N个线程 多线程下载单个文件 将网络路径的文件流切割成多快 每个线程下载一小部分 然后写入到文件里面 组成一个文件 当有很多个文件
  • MQ队列消息怎么保证100%不丢失

    面试官在面试候选人时 如果发现候选人的简历中写了在项目中使用了 MQ 技术 如 Kafka RabbitMQ RocketMQ 基本都会抛出一个问题 在使用 MQ 的时候 怎么确保消息 100 不丢失 这个问题在实际工作中很常见 既能考察候
  • javaScript基础面试题 --- new操作符具体做了什么?

    当我们使用new操作符调用函数时 背后发生了很多事情 这里是简单的new操作符的行为 创建一个新的空对象 将这个空对象的原型链接到构造函数的prototype对象 使用这个新对象作为上下文 即this的值 调用该构造函数 如果构造函数返回一