JS 面试问题: 手写 new

Myth丶恋晨 2024-05-24 03:22 82阅读 0赞

## JS 面试问题: 手写 new ? ##

首先, `new` 操作符可以创建一个用户自定义的对象类型或者创建一个带有构造函数的内置对象类型.

当一个函数通过 `new` 方式调用时, 这个函数被当作一个构造函数. `new` 将做下面的事情

1.  创建一个空的纯 `JS` 对象. 我们称之为 `newInstance`.
2.  将 `newInstance` 的 `[[Prototype]]` 指向构造函数的 `prototype` 属性如果 `prototype` 是一个对象. 否则指向 `Object.prototype`.
    
     *  ?原型链, 从构造函数创建的所有实例都可以访问添加到构造函数的 `prototype` 上的属性或对象
3.  用给定的参数执行构造函数, 将 `newInstance` 绑定为 `this` 上下文. 即在构造函数中所有对 `this` 的引用都将指向 `newInstance`
4.  如果构造函数返回 `non-primitive`, 其将作为 `new` 操作符的返回值返回. 否则, 如果构造函数不返回任何值或者返回了 `primitive`, `new` 操作符返回 `newInstance`.
    
     *  ?`primitive`: 指 `null/undefined/string/number/boolean/bigint/symbol`
     *  通常构造函数不返回值, 但是可以通过返回值来覆盖正常对象的返回过程.

有了上面的介绍, 就可以开始写代码了

function myNew(constructor, ...args) {
        
      // 第一步
      let newInstance = {
        }
    
      // 第二步
      if (constructor.prototype !== null) {
        
        Object.setPrototypeOf(newInstance, constructor.prototype)
      } else {
        
        Object.setPrototypeOf(newInstance, Object.prototype)
      }
    
      let result = constructor.apply(newInstance, args)
    
      if (typeof result === 'object' && result !== null) {
        
        return result
      } else {
        
        return newInstance
      }
    }

测试

function Person(name) {
        
      return {
        
        name,
        sayName() {
        
          console.log('this.name',this.name)
        }
      }
    }
    
    let p = myNew(Person, 'levi')
    p.sayName()
    console.log('p',p)
    let p1 = new Person('levi')
    p1.sayName()
    console.log('p1',p1)
    
    console.log('================================')
    
    function Mistake() {
         return 1 }
    let m = myNew(Mistake)
    console.log('m',m)
    let m1 = new Mistake()
    console.log('m1',m1)

![在这里插入图片描述][dd77333139b44687b4a4e28546aa1164.png_pic_center]

谢谢你看到这里?

[dd77333139b44687b4a4e28546aa1164.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/5017220cb417424880a226de46a349e6.png