new操作符都做了什么

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量42 收藏 1
点赞数 7
文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63265165/article/details/134129034
版权

通常我们通过构造函数创建一个实例时，使用new操作符即可

e3f9c708c14f44518ec2a986c00afe3d.png

 eab6ace4eda442dc9aeec9ac20eb00ba.png

 但如何自己实现一个new方法呢

搞清楚原理，其实很easy

对于实例来讲，我们得到了构造函数中的

实例参数，因此一个new方法需要接收的是构造函数，和需要传入的实参

76f1e42c941e402fbe60edb3dcf4a6b1.png

 既然要生成一个实例，当然先创建实例

第一步b75824ba25864a1d8d163c8a4999d7a2.png

 第二步，让新对象指向的原型对象等于构造函数指向的原型对象

dfb20ec36d9840a4b20e33c35ace372d.png

 第三步，让新对象的this指向构造函数

cc933fcfac68468eab2dca307504ebb8.png

 这里我使用的是call改变this指向，call方法传入的参数是单个的元素，因此要展开数组，如果使用apply则直接传入args即可

第四步，根据result的类型，返回不同结果

2bf71a730c904cf5b438a567d5a0502b.png

 返回的结果注定是引用数据类型

3a37cd0ec42542daa9b28e5e433e209e.png

 425309d18fcc4113ba8f12910651570a.png

 实现了new的作用

SHENQING469
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用方法封装javascript的new操作符(一)
10-28
JavaScript是一种基于对象的语言，其中`new`操作符是创建对象实例的关键部分。它允许我们创建一个新对象并将其与特定的函数（也称为构造函数）关联起来，该函数定义了对象的行为和属性。在JavaScript中，`new`操作符...
js代码-new操作符
07-14
在JavaScript中，`new`操作符是一个至关重要的概念，它用于创建对象实例。...在实际项目中，你可能会遇到更复杂的情况，如继承、原型链以及使用`new`操作符的技巧和最佳实践，这些都是进一步学习的方向。
new操作符做了什么操作
Alex_717的博客
10-12 1845
1、创建一个空对象obj 2、设置原型链。       让obj的__proto__属性，指向函数的原型 3、让函数中的this指向obj。并且执行函数体       Function.call(obj); 4、判断函数返回值的内容      如果返回的是对象，此时就不做操作了。直到最后将该对象赋值给一个变量。      如果返回的是一个值，此时返回obj。然后直到最后的赋值操作...
new 操作符具体干了什么
可以叫我啪叽的石头
08-16 5827
一、定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 在创建一个新的实例的时候，必须使用 new 操作符。而使用 new 操作符会经历以下 4 个步骤： 创建一个新对象 将构造函数的作用域赋值给新对象（this 指向新对象） 执行构造函数中的代码（给新对象添加熟悉） 返回新对象 二、模拟 new 操作符的方法： new 实现了什么功能： 访问到了构造函数里的属性 访问到了构造函数 prototype 里的属性 我们定义一个 mockNew 来模拟一下 new
new操作符具体干了什么
蔡姐的博客
04-21 1万+
一.new是什么 定义: new操作符用于创建一个给定构造函数的实例对象 简单来说:1.new 能创建一个实例对象; 2.这个对象是给定的构造函数 例子: function Person(name, age){ this.name = name; this.age = age; console.log(this) // Person { name: 'Tom', age: 20 } } Person.prototype.sayName = function () { cons
JS中new操作符做了什么？
热门推荐
主要领域：前端开发
05-01 1万+
1.new操作符做了什么 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作： 创建一个空的简单JavaScript对象（即{}）； 链接该对象（即设置该对象的构造函数）到另一个对象 ； 将步骤1新创建的对象作为this的上下文 ； 如果该函数没有返回对象，则返回this。 2.简单实现 function create(Con, …args...
js中new操作符都做了些什么事情
sinat_34626741的博客
05-21 1291
new创建了一个对象类型的实例或具有构造函数的内置对象的实例。 第一步它会创建一个空对象{}； 第二步：链接该对象的构造函数到另一个对象； 第三步：将空对象作为this的上下文，并执行构造函数； 第四步：返回构造函数的值或this 下面用一个方法来实现new的效果： function myNew(f,...args){ //创建空对象 let obj=Object.create(null); //将空对象指向构造函数的原型链 Object.setPrototyp
JS 的 new 操作符到底做了什么？
06-06 1657
2、把这个新的空对象的隐士原型（）指向构造函数的原型对象（）3、把构造函数中的 this 指向新创建的空对象并且执行构造函数返回执行结果4、判断返回的执行结果是否是引用类型，如果是引用类型则返回执行结果，new 操作失败，否则返回创建的新对象...
new 操作符具体干了什么？
weixin_40918145的博客
02-10 1880
new共经历了四个过程。 var fn = function () { }; var fnObj = new fn(); 1、创建了一个空对象 var obj = new object(); 2、设置原型链 obj._proto_ = fn.prototype; 3、让fn的this指向obj，并执行fn的函数体 var result = fn.call(obj); 4、判断fn的返回值类型，如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。 if (typeo
js中new操作符做了什么并实现自己的new操作符
前端三脚猫的博客
05-15 1678
我们通过new运算符的使用，来探寻new操作符在执行的过程中究竟做了哪些操作，并且根据操作实现自己的new运算符。 定义 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 使用 先看正常使用new运算符调用构造函数 function Test(testText) { this.testText = testText; } Test.prototype.console = function() { console.log(this.testText); } let
new操作符的作用
xqkbx的博客
08-16 1709
new操作符的作用
js new操作符具体做了什么
weixin_45675581的博客
01-28 1141
new操作符具体做了什么
面试第二题 new 操作符 具体干了什么？
01-08
JavaScript new操作符具体干了什么呢? 在javascript 只要new 一个函数，就可以new一个对象，这应该算是JavaScript中函数式编程思想，这里主要说明的是 在new的过程中发生了什么？ 1.具体主要有4个部分： 1.创建了一...
浅谈javascript中new操作符的原理
10-22
在JavaScript中，`new`操作符是用于创建对象并执行构造函数的关键字。它的工作原理虽然看似简单，但深入了解后会发现其背后的机制相当有趣且重要。本文将深入探讨`new`操作符的内部机制。 首先，`new`操作符的主要...
详解JavaScript中new操作符的解析和实现
01-19
new 操作符的执行大概有以下几个步骤： 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象（每一个用户定义函数都有一个 prototype 属性指向一个对象，该对象有一个 constructor 属性指向...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 653
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 455
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 85
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 269
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
new操作符都做了哪些事情
05-13
new 操作符主要做了以下几件事情： 1. 在内存中分配一块连续的空间，大小为所需类型的大小。 2. 调用该类型的构造函数，对该内存空间进行初始化。 3. 返回该内存空间的首地址，即一个指向该内存空间的指针。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值