JS手动实现一个new操作符

2023-10-31

要手动实现一个 new 操作符,首先要知道 new 操作符都做了什么事,即构造函数的内部原理:
1.创建一个新对象;
2.链接到原型(将构造函数的 prototype 赋值给新对象的 __proto__);
3.绑定this(构造函数中的this指向新对象并且调用构造函数)
4.返回新对象
这样我们就可以手动实现一个 new 方法了

function realizeNew () {
    //创建一个新对象
    let obj  = {};
    //获得构造函数
    let Con = [].shift.call(arguments);
    //链接到原型(给obj这个新生对象的原型指向它的构造函数的原型)
    obj.__proto__ = Con.prototype;
    //绑定this
    let result = Con.apply(obj,arguments);
    //确保new出来的是一个对象
    return typeof result === "object" ? result : obj
}

我们实现的 realizeNew() 方法需要传入的参数是:构造函数 + 属性

首先我们创建一个新对象,

然后通过 arguments 类数组我们可以知道参数中包含了构造函数以及我们调用create时传入的其他参数,接下来就是要想如何得到其中这个构造函数和其他的参数,由于arguments是类数组,没有直接的方法可以供其使用,我们可以有以下两种方法:
1.Array.from(arguments).shift(); 转换成数组 使用数组的方法 shift 将第一项弹出
2.[].shift().call(arguments) ; 通过 call()arguments能够借用shift()方法

绑定this的时候需要注意:
1.给构造函数传入属性,注意构造函数的this属性
2.参数传进 Conobj 的属性赋值,this要指向 obj 对象
3.在 Con 内部手动指定函数执行时的this 使用call、apply实现

最后我们需要返回一个对象

我们来测试一下:

function Person (name,age){
    this.name = name;
    this.age = age;
    this.say = function () {
        console.log("I am " + this.name)
    }
}

//通过new创建构造实例
let person1 = new Person("Curry",18);
console.log(person1.name);      //"Curry"
console.log(person1.age);       //18
person1.say();      //"I am Curry'

//通过realize()方法创造实例
let person2 = realizeNew (Person,"Curry",18);
console.log(person2.name);      //"Curry"
console.log(person2.age);       //18
person2.say();      //"I am Curry'

 

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

JS手动实现一个new操作符 的相关文章

随机推荐

  • Python基础学完了再学什么?

    Python基础学完了再学什么 基础阶段学完Python 基础语法 python 容器 函数和文件操作 面向对象 python编程和web基础 Linux 操作系统多任务编程 Python 网络编程 静态 web 服务器 HTML CSS
  • HTML实现简单的注册页面

    HTML是一种标记语言 用于创建网页 这里使用HTML创建了一个简单的注册页面 其中包含表单元素 如文本框 密码框 单选按钮 下拉列表 文件上传和文本域 先看看效果图 代码如下
  • 可视化图片时显示中文标签

    coding UTF 8 import cv2 import glob import os from PIL import Image ImageFont ImageDraw import numpy as np color 0 255 0
  • 无线连接让智能手表用户可以自行沟通和监控

    诸如智能手表和智能眼镜之类的产品正在激增 它们中的大多数由于多个传感器 低功耗嵌入式处理器 直视或虚拟显示器以及无线通信链路 Wi Fi或蓝牙 来连接到智能手机 从而提供各种功能 主机系统 或互联网 尽管这些高度集成的系统中有许多提供了所需
  • Flutter: Dart 参数,以及 @required 与 required

    1 Dart 参数 Dart 函数的参数分 3 种类型 位置参数 命名参数 可选位置参数 1 1 位置参数 positional parameters 参数位置重要 名称任意 定义 void debugger String message
  • uniapp开发的App(安卓)端跳转uniapp微信小程序

    本文总结两种跳转方法 适合自己的才是最好的 1 根据微信开放文档提供的方法获取小程序的URL 两种 小程序的URL Scheme weixin dl business t TICKET 小程序的URL Link https wxaurl c
  • 宝塔控制面板无法访问,浏览器提示连接失败

    防火墙已经关闭 端口已经开好 但宝塔控制面板无法访问 浏览器提示连接失败 错误信息 火狐浏览器提示连接失败 解决思路 连接ssl重启宝塔 宝塔重启命令 bt restart
  • 全国地区树形结构列表。TreeNode工具

    Select select from shop region order by id ResultType java util LinkedList class 虽然这里用了LinkedList 但好像后面并没有用到 List
  • 三色标记算法

    什么是三色标记 CMS的运行过程中存在并发标记过程 由于不产生STW 所以对垃圾的清理必须存在标记和删除两个过程分开 而不能看到是垃圾就直接清除 否则会引起不必要的麻烦 CMS为了解决这个问题 采用了三色标记算法来记录对象是否已经被扫描过
  • 环境篇-在Qt工程中调用OpenSSL

    本文属于 OpenSSL加密算法库使用系列教程 之一 欢迎查看其它文章 我们知道OpenSSL有一个命令行工具openssl exe 可以通过命令实现很多的操作 同时OpenSSL还提供了动态库 所以如果我们想调用OpenSSL 有2种方法
  • 树的应用举例

    二叉树 先序遍历 这里指根在先 from collections import deque class BitTree def init self self root None def insert self node pos pass s
  • meilisearch使用记录

    分页 查找内容 默认一页十条 def search q from size 10 return client index indexName search q opt params limit size offset from 当前页 st
  • 剖析RedHat Linux中三个重要内核文件

    在网络中 不少服务器采用的是Linux系统 为了进一步提高服务器的性能 可能需要根据特定的硬件及需求重新编译Linux内核 编译Linux内核 需要根据规定的步骤进行 编译内核过程中涉及到几个重要的文件 比如对于RedHat Linux 在
  • (简单成功)原生js实现点击复制文本

    目录 背景 核心代码 案例 背景 我们开发中可能会有点击复制的功能 那么下面将讲述 核心代码 select 方法用于选择该元素中的文本 document execCommand copy 执行浏览器复制命令 案例
  • 微信网页调用jssdk扫一扫,63002报错的坑,ios的兼容问题

    一 因为项目需要用到微信网页扫一扫功能 并且去找了很多文章都没有统一的整理 所以就整理了一下 比较常见的坑 1 如何在网页调用扫一扫功能 1 先引入npm npm install weixin js sdk 如果你需要用微信的支付那些api
  • PWN学习-ADworld刷题

    前言 搁置了一段时间没更博 经历了考试还有一些其他事 决心好好去学pwn 学习的方法打算是按照看视频课加刷题加查找资料来学习 先把新手题都刷了一遍 都是很入门的题目 没啥好提的 收获也少 然后去刷进阶的题 但是目前还没有遇到堆的题目 视频课
  • C语言队列的理解

    队列是一种特殊的线性表 特殊之处在与允许在表的前端 front 进行删除操作 而在表ide后端进行插入操作 和栈一样 队列时一种操作受限制的线性表 进行 插入操作的端称为队尾 进行删除操作的端称为队头 队列的数据元素称为队列元素 在队列中插
  • Spring cloud系列-Nacos:Nacos的使用和报错处理

    目前你让我刚接触SpringCloud就来说Nacos做注册中心的优劣 或者深入的讲解Nacos 可能是有点为难我 Nacos是阿里开源的一个项目 一个负责发现 配置 管理微服务的一个平台 也就是说微服务这一块他还是不错的 下面是Nacos
  • uniapp - App 超详细消息推送功能实现,从 0-1 实现官方 unipush 推送全步骤稳定性毋庸置疑(附带详细的可运行示例源码和注释,保证 100% 完美接入)苹果安卓手机

    效果图 网上的教程太乱用不了 无法改造成自己想要的效果 在uniapp中开发的app 安卓苹果 使用 unipush 官方推送 从0 1实现完整过程及功能开发 你可以直接复制示例源码 跟着教程一步步配置 注释详细 准备 消息
  • JS手动实现一个new操作符

    要手动实现一个 new 操作符 首先要知道 new 操作符都做了什么事 即构造函数的内部原理 1 创建一个新对象 2 链接到原型 将构造函数的 prototype 赋值给新对象的 proto 3 绑定this 构造函数中的this指向新对象