这篇文章主要介绍“怎么实现JS中的new”,在日常操作中,相信很多人在怎么实现JS中的new问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么实现JS中的new”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
MDN文档:new
运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
class Person {
constructor(name) {
this.name = name;
}
}
// 创建自定义对象类型的实例
const person = new Person('小明')
// 创建具有构造函数的内置对象的实例
const date = new Date()
new的作用:创建对象的实例
上面说了new
的作用是创建对象的实例,那么它究竟是怎么创建实例的,内部干了哪几件事?
以new Person()为例,当它执行时,会发生以下事情:
创建一个空的简单JS对象
const obj = {}
给这个对象添加属性__proto__,
并将该属性链接到构造函数的原型对象
obj.__proto__ = Person.prototype
调用构造函数Person
,并将this
绑定到新创建的对象obj
Person.apply(obj)
如果构造函数没有显式返回一个对象,则返回新创建的对象,即obj
如上所述,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
对于第4步,再解释一下
如果构造函数没有显式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来创建
到此,关于“怎么实现JS中的new”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。