前端面试手写代码——模拟实现new运算符

时间：2021-10-25 17:36:26

预备知识：

  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来创建实例

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

相关文章