详解JavaScript中new操作符的解析和实现
(编辑:jimmy 日期: 2024/11/25 浏览:3 次 )
前言
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解析和实现的资料请关注其它相关文章!
下一篇:我所理解的JavaScript中的this指向