圆月山庄资源网 Design By www.vgjia.com
前言
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.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]