这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战
定义
new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
使用new [constructor]
的方式来创建一个对象实例,但构造函数的差异会导致创建的实例不同。
构造函数体不同
构造函数也是函数,其唯一的区别就是调用方式不同,任何函数只要使用 new
操作符调用就是构造函数,而不使用 new
操作符调用的函数就是普通函数。
因此构造函数也可以带有返回值,但是这会导致new
的结果不同。
无返回值
function Person(name) {
this.name = name;
}
let obj = new Person("Jalenl");
console.log(obj);
显然,打印的是{name:'Jalenl'}
返回对象
function Person(age) {
this.age = age;
return { name: "Jalenl" };
}
let obj = new Person(18);
console.log(obj);
打印的是{name:'Jalenl'}
,也就是说return
之前的定义都被覆盖了。这里return
的是一个对象,那返回的是个基本类型呢?
返回非对象
function Person(age) {
this.age = age;
return 1;
}
let obj = new Person(18);
console.log(obj);
返回{age:21}
,这么说return
失效了,跟没有return
一样的结果,那如果没有this
绑定内部属性,再返回基本数据类型呢?
没有属性绑定+返回非对象
function Person(){
return 1
}
new Person()
返回的是一个空对象{}
,意料之中。
综上,只有构造函数return
返回的是一个对象类型时,才能改变初始结果。
构造函数类型不同
构造函数为普通函数
ECMA-262 3rd. Edition Specification
中的说明了对象实例的创建过程:
13.2.2
[[Construct]]
When the
[[Construct]]
property for aFunction
objectF
is called, the following steps are taken:
- Create a new native ECMAScript object.
- Set the
[[Class]]
property ofResult(1)
to"Object"
.- Get the value of the prototype property of
F
.- If
Result(3)
is an object, set the[[Prototype]]
property ofResult(1)
toResult(3)
.- If
Result(3)
is not an object, set the[[Prototype]]
property ofResult(1)
to the originalObject
prototype object as described in 15.2.3.1.- Invoke the
[[Call]]
property ofF
, providingResult(1)
as thethis
value and providing the argument list passed into[[Construct]]
as the argument values.- If
Type(Result(6))
isObject
then returnResult(6)
.- Return
Result(1)
.
总结下来就是:
- 在内存中创建一个新对象。
- 这个新对象内部的
[[Prototype]]
特性被赋值为构造函数的prototype
属性。 - 构造函数内部的
this
被赋值为这个新对象(即this
指向新对象)。 - 执行构造函数内部的代码(给新对象添加属性)。
- 如果构造函数返回对象,则返回该对象;否则,返回刚创建的新对象(空对象)。
第五步就已经说明了构造函数不同导致new
结果不同的原因。
以下摘自MDN
的解释:
当代码 new Foo(…) 执行时,会发生以下事情:
- 一个继承自 Foo.prototype 的新对象被创建。
- 使用指定的参数调用构造函数 Foo,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数列表,Foo 不带任何参数调用的情况。
- 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)
构造函数为箭头函数
普通函数创建时,引擎会按照特定的规则为这个函数创建一个prototype
属性(指向原型对象)。默认情况下,所有原型对象自动获得一个名为 constructor
的属性,指回与之关联的构造函数。
function Person(){
this.age = 18;
}
Person.prototype
/** { constructor: ƒ Foo() __proto__: Object } **/
创建箭头函数时,引擎不会为其创建prototype
属性,箭头函数没有constructor
供new
调用,因此使用new
调用箭头函数会报错!
const Person = ()=>{}
new Person()//TypeError: Foo is not a constructor
手写new
综上,熟悉了new
的工作原理后,我们可以自己实现一个低配版的new
,实现的关键是:
- 让实例可以访问到私有属性;
- 让实例可以访问构造函数原型(
constructor.prototype
)所在原型链上的属性; - 构造函数返回的最后结果是引用数据类型。
function _new(constructor, ...args) {
// 构造函数类型合法判断
if(typeof constructor !== 'function') {
throw new Error('constructor must be a function');
}
// 新建空对象实例
let obj = new Object();
// 将构造函数的原型绑定到新创的对象实例上
obj.__proto__ = Object.create(constructor.prototype);
// 调用构造函数并判断返回值
let res = constructor.apply(obj, args);
let isObject = typeof res === 'object' && res !== null;
let isFunction = typeof res === 'function';
// 如果有返回值且返回值是对象类型,那么就将它作为返回值,否则就返回之前新建的对象
return isObject || isFunction ? res : obj;
};
这个低配版new
实现可以用来创建自定义类的实例,但不支持内置对象,毕竟new
属于操作符,底层实现更加复杂。
今天的文章谈谈JS中new的原理与实现分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23603.html