JavaScript手写系列(一)(手写new)

47 阅读1分钟

new执行了哪些步骤

  1. 创建一个空的简单js对象(即{})
  2. 将该空对象的原型(__proto__)指向构造函数的原型属性(prototype)
  3. 将创建的空对象作为构造函数this的上下文, 然后执行构造函数(this指向这个新对象)
  4. 如果该函数没有返回, 则返回创建的对象
    • 如果函数没有返回值(没有return语句), 那么就会返回构造函数的实例
    • 如果函数返回了一个基本数据类型的值, 那么本次构造函数的返回值是该实例
    • 如果函数返回了一个复杂数据类型的值, 那么本次函数的返回值就是该值

手写实现

// 方法一: 
        function _new() {
            let [constructor, ...args] = [...arguments]  // 第一个参数是构造函数
            let obj = {} // 1.生成一个新的空对象
            obj.__proto__ = constructor.prototype // 2.然后将该对象的__proto__属性指向构造函数的protoType
            let result = constructor.call(obj, ...args) // 3.执行构造函数,将新创建的对象做为构造函数this的上下文(this指向这个obj)
            return typeof result === 'object' ? result : obj
        }
        // 方法二
        function _new(Parent, ...rest) {
            // 1. 以构造器的prototype属性为原型,创建新对象
            let obj = Object.create(Parent.prototype)
            // 2. 执行构造函数,将新创建的对象做为构造函数this的上下文
            let result = Parent.apply(obj, rest)

            return typeof result === 'object' ? result : obj
        }