面试官：熟悉JS中的new吗？能手写实现吗？

大佬教程收集整理的这篇文章主要介绍了面试官：熟悉JS中的new吗？能手写实现吗？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

⚠ 预备知识：

1. 了解原型和原型链
2. 了解this绑定

1 new 运算符简介

MDN文档：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

class Person {
    constructor(name) {
        this.name = name;
    }
}
// 创建自定义对象类型的实例
const person = new Person('小明')
// 创建具有构造函数的内置对象的实例
const date = new Date()

new的作用：创建对象的实例

2 new 究竟干了什么事

上面说了new的作用是创建对象的实例，那么它究竟是怎么创建实例的，内部干了哪几件事？

以new Person()为例，当它执行时，会发生以下事情：

1. 创建一个空的简单JS对象

   const obj = {}
   

2. 给这个对象添加属性__proto__，并将该属性链接到构造函数的原型对象

   obj.__proto__ = Person.prototype
   

3. 调用构造函数Person，并将this绑定到新创建的对象obj

   Person.apply(obj)
   

4. 如果构造函数没有显式返回一个对象，则返回新创建的对象，即obj

3 模拟实现 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步，一步一步写就可以了

4 补充

1. ES5提供了Object.create方法，该方法可以创建一个对象，并让新对象的__proto__属性指向已经存在的对象。

   所以我们可以使用这个方法合并1、2两步

   const obj = Object.create(constructor.prototype)
   // 等价于
   const obj = {}
   obj.__proto__ = constructor.prototype
   

2. 对于第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
   

3. 注意，模拟实现的函数_new传入的参数只能是构造函数，不能是类

   class Animal {  ...}_new(Animal)// 会报错：Class constructor Animal cannot be invoked without 'new'// 类只能通过new来创建实例
   

公众号【前端嘛】获取更多优质内容

大佬总结

以上是大佬教程为你收集整理的面试官：熟悉JS中的new吗？能手写实现吗？全部内容，希望文章能够帮你解决面试官：熟悉JS中的new吗？能手写实现吗？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。