JavaScript new一个对象的详细过程

JavaScript new一个对象的详细过程 new实现过程 new实现原理 new手写实现

实现过程/原理

  1. 开辟一块内存,创建一个空对象

  2. 执行构造函数对这个空对象进行构造

  3. 给空对象添加__proto__属性

  4. 调用函数改变this指向

  5. 最后返回this指向的新对象(如果是引用类型则返回引用类型,否则返回Objective)

手写

/**
 * 模拟 new
 * @param {function} constructor
 * @param  {...any} args
 * @returns {object}
 */
function __new(constructor, ...args) {
    if (typeof constructor !== 'function') throw new TypeError('Error')

    // 创建一个空对象,指定原型为constructor.prototype
    const obj = Object.create(constructor.prototype)

    // 执行构造函数,绑定this
    const result = constructor.apply(obj, args)

    // 如果构造函数返回值是一个对象,那么返回该对象, 如果没有就返回 obj
    return result && result instanceof Object ? result : obj
}

// ------------------------------ 测试 ------------------------------

function Person(name, age) {
    this.name = name
    this.age = age
}

// __new
console.log('__new')
const __mxin = __new(Person, '__mxin', 18)
console.log(__mxin)
// Person {name: "__mxin", age: "18"}
//     age: "18"
//     name: "__mxin"
//     __proto__:
//         constructor: ƒ Person(name, age)
//         __proto__: Object

// new
console.log('new')
const mxin = new Person('mxin', 18)
console.log(mxin)
// Person {name: "mxin", age: "18"}
//     age: "18"
//     name: "mxin"
//     __proto__:
//         constructor: ƒ Person(name, age)
//         __proto__: Object

100+小程序源码关注公众号回复 5 获取(不想看激励视频的可私信)

alt

本文由 mdnice 多平台发布

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

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

相关文章

【学习】JMeter和Postman两种测试工具的主要区别有哪些

Postman和JMeter都是常用的API测试工具,但它们之间存在一些不同之处。以下是Postman和JMeter的主要区别: 语言支持 Postman是一个基于Chrome的应用程序,因此它使用JavaScript作为编程语言。这意味着你可以使用JavaScript来编写测试脚本和断…

【spring】@Autowired注解学习

Autowired介绍 Spring框架是Java领域中一个非常重要的企业级应用开发框架,它提供了全面的编程和配置模型,旨在帮助开发者更快速、更简单地创建应用程序。在Spring框架中,Autowired是一个非常重要的注解,它用于实现依赖注入&#…

【WebJs 爬虫】逆向进阶技术必知必会

前言 在数字化时代,网络爬虫已成为一种强大的数据获取工具,广泛应用于市场分析、竞争对手研究、舆情监测等众多领域。爬虫技术能够帮助我们快速、准确地获取网络上的海量信息,为决策提供有力支持。然而,随着网络环境的日益复杂和…

EditText 实现密码可见与不可见

效果图 布局代码 <androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width"match_parent"android:layout_height"wrap_content"><TextViewandroid:id"id/tv_account_hint"style"style/create_account_left"…

JAVA面试八股文之集合

JAVA集合相关 集合&#xff1f;说一说Java提供的常见集合&#xff1f;hashmap的key可以为null嘛&#xff1f;hashMap线程是否安全, 如果不安全, 如何解决&#xff1f;HashSet和TreeSet&#xff1f;ArrayList底层是如何实现的&#xff1f;ArrayList listnew ArrayList(10)中的li…

flutter 修改app名字和图标

一、修改名字 在Android中修改应用程序名称&#xff1a; 在AndroidManifest.xml文件中修改应用程序名称&#xff1a; 打开Flutter项目中的android/app/src/main/AndroidManifest.xml文件。找到<application>标签&#xff0c;然后在android:label属性中修改应用程序的名称…

《QT实用小工具·四》屏幕拾色器

1、概述 源码放在文章末尾 该项目实现了屏幕拾色器的功能&#xff0c;可以根据鼠标指定的位置识别当前位置的颜色 项目功能包含&#xff1a; 鼠标按下实时采集鼠标处的颜色。 实时显示颜色值。 支持16进制格式和rgb格式。 实时显示预览颜色。 根据背景色自动计算合适的前景色…

基于Python的电商特产数据可视化分析与推荐系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 利用网络爬虫技术从某东采集某城市的特产价格、销量、评论等数据&#xff0c;经过数据清洗后存入数据库&#xff0c;并实现特产销售、市场占有率、价格区间等多维度的可视化统计分析&#xff0c;并…

linux中查看内存占用空间

文章目录 linux中查看内存占用空间 linux中查看内存占用空间 使用 df -h 查看磁盘空间 使用 du -sh * 查看每个目录的大小 注意这里是当前目录下的文件大小&#xff0c;查看系统的可以回到根目录 经过查看没有发现任何大的文件夹。 继续下面的步骤 如果您的Linux磁盘已满&a…

【LVGL-字库应用】

LVGL-中文字库应用 ■ LVGL-内部字库■ LVGL 内部字库的使用流程&#xff1a; ■ LVGL-自定义字库■ 方法一&#xff1a;C 语言数组&#xff08;内部读取&#xff09;-在线转换工具■ 方法二&#xff1a;C 语言数组&#xff08;内部读取&#xff09;-利用离线字体转换软件&…

ISG100-160立式管道泵

引言&#xff1a; 在现代工业生产和日常生活中&#xff0c;安全且高效的流体输送系统是不可或缺的。其中&#xff0c;ISG100-160立式管道泵因其出色的性能和可靠性而广受青睐。本文将全面介绍这款管道泵的技术参数、特点、应用场景以及安装与维护的相关知识&#xff0c;以帮助用…

免费翻译pdf格式论文

进入谷歌翻译网址https://translate.google.com/?slauto&tlzh-CN&opdocs 将需要全文翻译的pdf放进去 选择英文到中文&#xff0c;然后点击翻译 可以选择打开译文或者下载译文&#xff0c;下载译文会下载到电脑上&#xff0c;打开译文会在浏览器打开。