前言
new
运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new
运算符的执行过程和如何自己实现一个类似 new
运算符的函数。
new 运算符的运行过程
new
运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new
的)。new
操作符的执行大概有以下几个步骤:
- 创建一个新的空对象
- 把新对象的
__proto__
链接到构造函数的prototype
对象(每一个用户定义函数都有一个prototype
属性指向一个对象,该对象有一个constructor
属性指向该函数),让我们的公共属性和方法可以从原型上继承,不用每个实例都创建一次。 - 将第一步创建的新的对象作为构造函数的
this
的上下文,执行构造函数,构造函数的执行让我们配置对象的私有属性和方法。 - 执行构造函数,如果构造函数没有返回值或者返回值不是一个对象,则返回
this
。
我么可以用代码简单表示上面的逻辑:
function new_ (constr, ...rests) { var obj = {}; obj.__proto__ = constr.prototype; var ret = constr.apply(obj, rests); return isPrimitive(ret) "htmlcode">function new_(constr, ...rests) { if (typeof constr !== "function") { throw "the first param must be a function"; } new_.target = constr; var obj = Object.create(constr.prototype); var ret = constr.apply(obj, rests); var isObj = typeof ret !== null && typeof ret === "object"; var isFun = typeof ret === "function"; //var isObj = typeof ret === "function" || typeof ret === "object" && !!ret; if (isObj || isFun) { return ret; } return obj; } function Person(name, age) { this.name = name; this.age = age; } Person.prototype.say = function () { console.log(this.name); }; var p1 = new_(Person, 'clloz', '28') var p2 = new_(Person, 'csx', '31') console.log(p1); //Person {name: "clloz", age: "28"} p1.say(); //clloz console.log(p2); //Person {name: "csx", age: "31"} p2.say(); //csx console.log(p1.__proto__ === Person.prototype); //true console.log(p2.__proto__ === Person.prototype); //true以上就是一个简单的
new
实现,判断是否为对象那里可能不是很严谨,不过没有想到更好的方法。一个小补充,在
mdn
的Function.prototype.apply()
词条中看到的直接把方法写到Function.prototype
上,也是个不错的思路,Function.prototype
在所以函数的原型链上,所以这个方法可以在每个函数上调用,方法内部的this
也是指向调用方法的函数的。Function.prototype.construct = function (aArgs) { var oNew = Object.create(this.prototype); this.apply(oNew, aArgs); return oNew; };强制用 new 调用构造函数
function Clloz(...arguments) { if (!(this instanceof Clloz)) { return new Clloz(...arguments) } }Tips
补充两个关于 new 运算符的知识点。
- 上面提到
new
的执行过程的最后一步,如果构造函数没有返回值或者返回值不是一个对象,则返回this
。但是如果返回的是一个null
的话,依然返回this
,虽然null
也算是object
。new
操作符后面的构造函数可以带括号也可以不带括号,除了带括号可以传递参数以外,还有一个重要的点是两种用法的运算符优先级不一样,在JS运算符优先级这篇文章中有提到,带参数的new
操作符的优先级是比不带参数的要高的,new Foo() > Foo() > new Foo
。一般不太会遇到,可能有些题目会问这些问题。
以上就是详解JavaScript中new操作符的解析和实现的详细内容,更多关于JavaScript new解析和实现的资料请关注其它相关文章!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年11月19日
2024年11月19日
- 好薇2024《兵哥哥》1:124K黄金母盘[WAV+CUE]
- 胡歌.2006-珍惜(EP)【步升大风】【FLAC分轨】
- 洪荣宏.2014-拼乎自己看【华特】【WAV+CUE】
- 伊能静.1999-从脆弱到勇敢1987-1996精选2CD【华纳】【WAV+CUE】
- 刘亮鹭《汽车DJ玩主》[WAV+CUE][1.1G]
- 张杰《最接近天堂的地方》天娱传媒[WAV+CUE][1.1G]
- 群星《2022年度发烧天碟》无损黑胶碟 2CD[WAV+CUE][1.4G]
- 罗文1983-罗文甄妮-射雕英雄传(纯银AMCD)[WAV+CUE]
- 群星《亚洲故事香港纯弦》雨果UPMAGCD2024[低速原抓WAV+CUE]
- 群星《经典咏流传》限量1:1母盘直刻[低速原抓WAV+CUE]
- 庾澄庆1993《老实情歌》福茂唱片[WAV+CUE][1G]
- 许巍《在别处》美卡首版[WAV+CUE][1G]
- 林子祥《单手拍掌》华纳香港版[WAV+CUE][1G]
- 郑秀文.1997-我们的主题曲【华纳】【WAV+CUE】
- 群星.2001-生命因爱动听电影原创音乐AVCD【MEDIA】【WAV+CUE】