new操作符

23 阅读1分钟

一、是什么

new操作符用于创建一个给定构造函数的实例对象

  • new通过构造函数创建出来的实例对象可以访问到构造函数中的属性
  • new通过构造函数创建出来的实例对象可以访问到构造函数原型链中的属性

注意:构造函数中如果有返回值且返回值是原始类型,无影响,但是如果返回值是一个对象,那么这个返回值会被正常使用

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'xxx' }
  return { age: 26 }
}
const t = new Test('xxx')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

可以看到这里实例对象是返回值给的对象,并且这里涉及this的指向问题,这里构造函数的this指向返回的对象。

二、流程

new操作符流程:

  • 创建一个新的对象obj
  • 将对象与构造函数通过原型链连接起来
  • 将构造函数的this绑定到实例对象obj上
  • 根据构造函数返回类型进行判断,return原始值被忽略,返回对象需要处理

三、手写new操作符

看了一下手动模拟实现new,感觉跟着流程走不复杂

        function Car(speed,gas) {
            this.speed = speed
            this.gas = gas
        }
        Car.prototype.addGas = function(sum) {
            this.gas += sum
        }
        function mynew(Func,...argument) {
            // 1.先创建一个空对象obj
            let obj = {}
            // 2.将新对象的proto指向构造函数的原型对象
            obj.__proto__ = Func.prototype
            // 3.将构造函数的this指向实例对象
            let result = Func.apply(obj,argument)
            // 4.根据返回值进行判断
            return result instanceof Object ? result : obj
        }

        let p = mynew(Car,5,5)
        p.addGas(8)
        console.log(p);