js中的new有什么作用呢?
new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
语法
new constructor[([arguments])]
参数
-
constructor
-
一个指定对象实例的类型的类或函数。
-
arguments
-
一个用于被
constructor
调用的参数列表。
new 究竟干了什么事
上面说了new
的作用是创建对象的实例,那么它究竟是怎么创建实例的,内部干了哪几件事?
以new Person()为例,当它执行时,会发生以下事情:
创建一个空的简单JS对象
const obj = {}
给这个对象添加属性__proto__,
并将该属性链接到构造函数的原型对象
obj.__proto__ = Person.prototype
调用构造函数Person
,并将this
绑定到新创建的对象obj
Person.apply(obj)
如果构造函数没有显式返回一个对象,则返回新创建的对象,即obj。
模拟实现 new 运算符
如上所述,new
运算符就干了这么4件事,下面我们就根据这4个步骤用函数来模拟实现new
(面试手写代码)
const _new = function(constructor, ...args) {
const obj = {}
obj.__proto__ = constructor.prototype
const res = constructor.apply(obj, args)
// 这一步在"补充"中会详细解释
return res instanceof Object ? res : obj
}
代码非常简单,就是按照上面4步,一步一步写就可以了。
另外,
ES5
提供了Object.create
方法,该方法可以创建一个对象,并让新对象的__proto__
属性指向已经存在的对象。
所以我们可以使用这个方法合并1、2两步
const obj = Object.create(constructor.prototype)
// 等价于
const obj = {}
obj.__proto__ = constructor.prototype
补充:
-
如果构造函数没有显式
return
(通常情况)那么person
就是新创建的对象obj
-
如果构造函数返回的不是一个对象,比如1、"abc" 那么
person
还是新创建的对象obj
function Person() {
...
return 1
}
如果构造函数显式返回了一个对象,比如{}
、function() {}
那么person
就不是新创建的对象obj
了,而是显式return
的这个对象
function Person() {
// 函数也是对象
return function() {}
}
所以我们在_new函数最后一句代码是:
return res instanceof Object ? res : obj
注意:模拟实现的函数_new传入的参数只能是构造函数,不能是类。
class Animal { ...}_new(Animal)//
会报错:Class constructor Animal cannot be invoked without 'new'// 类只能通过new来创建
总结
关于new内容就差不多,至于更加深入的知识,还得考大家自己去研究和探讨啦。