首页 > 其他分享 >手写js new,new的过程到底发生了什么

手写js new,new的过程到底发生了什么

时间:2024-10-28 17:20:10浏览次数:4  
标签:obj name js Person new 手写 prototype 构造函数

在JavaScript中,new关键字的应用可以说是再平常不过了,最基础的有new Array()、new Set(),再而就是new一个自己创建的构造函数,也就是创建一个该构造函数的示例。如:var person1 = new Person("一颗苹果", 18);但你是否真的了解new以及它的底层原理呢,本文将举出几个例子并且手写一个 new 来带大家深入理解。

new

new的使用方法

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);   //输出: "Eagle"

那么new的过程发生了什么呢

  • 创建一个空对象:创建一个空的简单 JavaScript 对象。为方便起见,我们称之为 newInstance

  • 指定原型链:将 newInstance 的 [[Prototype]] 指向构造函数的 prototype 属性,否则 newInstance 将保持为一个普通对象,其 [[Prototype]] 为 Object.prototype

  • 更改this指向:使用给定参数执行构造函数,并将 newInstance 绑定为 this 的上下文。

  • 返回值:返回newInstance。

 

手写一个new

function myNew(Fun, ...args) {
    let obj = {}
    obj.__proto__ = Fun.prototype
    Fun.apply(obj, args)
    return obj
}
function Person(name,age) {
    this.name = name
    this.age = age
}
let apple = myNew(Person, '一颗苹果','18')
console.log(apple.name);   //输出:一颗苹果
console.log(apple.age);    //输出:18
  • ...args:将剩下的元素都放进args

  • obj. __ proto __ = Fun.prototype:将 obj 的原型链指向构造函数的 prototype 属性

  • Fun.apply(obj, args):将构造函数内部的this绑定到obj上,并执行构造函数

通过这一系列操作,我们就可以拿到构造函数中的 nameage属性了

看似完成了,但其实落了很重要的一点

回想一下,我们通过new函数创建一个对象时,除了引用它的属性,我们还会做些什么呢?
let arr = new Array()
arr.push(4)
arr.unshift(3)
console.log(arr);

 当然是使用它自带的方法,但是上面并没有给出方法上的引用。这就得引入原型链这个知识点了,我们只需要给Person的原型链上增加我们想要的方法就可以了,实现代码如下:

function myNew(Fun, ...args) {
    let obj = {}
    obj.__proto__ = Fun.prototype
    Fun.apply(obj, args)
    return obj
}
function Person(name,age) {
    this.name = name
    this.age = age
}
Person.prototype.who = function () {
    console.log('我是Person的实例对象');
}
Person.prototype.myname = function () {
    console.log(this.name)
}
let p = myNew(Person, '一颗苹果')
p.who();      // 输出:我是Person的实例对象
p.myname();   // 输出:一颗苹果
console.log(p.name);  // 输出:一颗苹果
这就是我们的最终答案了,把它交给面试官,perfect!!

标签:obj,name,js,Person,new,手写,prototype,构造函数
From: https://www.cnblogs.com/wangguoxinyue/p/18511144

相关文章

  • Vue.js 组件开发高级指南
    Vue.js组件开发高级指南引言Vue.js是一个极具灵活性的JavaScript框架,广泛应用于构建现代化的用户界面。组件是Vue.js的核心概念之一,它使得应用的结构化和可维护性大大增强。本文将深入探讨Vue.js组件开发的高级技巧,包括组件的设计模式、优化策略、状态管理、插件......
  • JS新功能:Promise.try
    Promise.try旨在解决JavaScript中处理可能返回Promise的函数时的一些不便之处,包括:统一处理同步和异步函数::在实际编程中,经常遇到需要处理一个函数f,这个函数可能是同步的,也可能是异步的(即返回Promise)。传统上,为了统一处理这两种情况,开发者可能不得不使用如Promise.resolve().t......
  • Vue项目在安装依赖时报错:“this[kHandle] = new _Hash(algorithm, xofLen);“
    问题:Vue项目在安装依赖时报错:"this[kHandle]=new_Hash(algorithm,xofLen);"原因:这个错误通常是由于Node.js版本更新导致的。新版本的Node.js包含了OpenSSL3.0,它对加密算法和密钥大小有更严格的限制,可能会影响一些旧项目。解决方案:1.临时解决(需要每次启动时设置):......
  • 大话Java系列-并发场景下HashMap的环形链表问题,jmap检查内存状态,jstack查看线程状态,线
    文章目录童话故事故事开始发现问题解决问题代码实现1.使用普通`HashMap`导致的环形链表问题2.使用`jmap-histo`检查内存状态3.使用`jstack`查看当前线程的状态4.分析结果`jmap-histo`输出示例`jstack`输出示例5.使用ConcurrentHashMap解决问题6.使用外部加锁保......
  • js逆向笔记
    Cookie和Session:服务器和客户端的交互仅限于请求/响应过程,结束之后便断开,在下一次请求时,服务器会认为新的客户端。为了维护他们之间的链接,让服务器知道这是前一个用户发送的请求,必须在一个地方保存客户端的信息。Cookie:通过在客户端记录的信息确定用户的身份。Session:通过......
  • vue(vue.js)—组件(1)非单文件组件
    原文连接:vue(vue.js)—组件(1)非单文件组件–每天进步一点点现在流行的前端框架都支持组件化开发,什么是组件呢?试想一个场景,你开发了一个系统,系统中有一个修改密码的功能,点击后弹出一个小窗口,然后修改密码。系统中一共有5个页面需要用到这个功能,按照以前的做法是把写完的代码复......
  • Nuxt.js 应用中的 imports:extend 事件钩子详解
    title:Nuxt.js应用中的imports:extend事件钩子详解date:2024/10/28updated:2024/10/28author:cmdragonexcerpt:imports:extend是Nuxt.js中的一个生命周期钩子,允许开发者在模块设置过程中扩展导入。使用此钩子,开发者可以灵活地管理和调整模块的导入配置,从而增强模块......
  • J. New Energy Vehicle
    怎样实现自定义排序函数的堆呢?从C++11开始,如果使用lambda函数自定义Compare则需要将其作为构造函数的参数代入,如:priority_queue<int,vector<int>,decltype(cmp)>q(cmp);decltype说明符可以推断表达式的类型当然本题其实不需要自定义排序函数,因为在调用排序运算符时,决......
  • 基于nodejs+vue基于手机售后管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于手机售后管理系统的研究,现有研究多集中于售后服务的一般性流程或特定品牌手机售后的部分环节,专门针对一个全面整合多方面功能(如包含用户、服务类型......
  • 基于nodejs+vue基于考研资料分享系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于考研资料分享系统的研究,现有研究主要以考研资料的整合与提供为主,如一些考研资料数据库主要侧重于资料的分类整理与存储,而专门针对考研资料分享系统......