new关键字原理及手写实现 | 刷题打卡

本文正在参与掘金团队号上线活动，点击 查看大厂春招职位

一、new概念及作用

new关键字一般用于创建用户自定义对象类型的实例或者内置对象的实例。

• 自定义对象类型

function PersonFactory({name, age}) {
  this.name = name
  this.age = age
  return this
}

const people = new PersonFactory({name: 'Steven', age: '20'})

• 创建内置对象实例

let userArr = new Array(10) 

实现关键点

• new 会产生一个新对象
• 新对象需要能够访问到构造函数的属性，所以需要重新指定它的原型
• 构造函数可能会显示返回

其次，根据构造函数return的不同数据，使用new初始化对象也会得到不同的结果，测试不同返回值生成的实例如下

  // return;                              // 返回 this
  // return null;                         // 返回 this
  // return this;                         // 返回 this
  // return false;                        // 返回 this
  // return 'hello world';                // 返回 this
  // return 2;                            // 返回 this
  
  // return {};                           // 返回 新建的 {}, person.name = undefined
  // return [];                           // 返回 新建的 [], person.name = undefined
  // return function(){};                 // 返回 新建的 function，抛弃 this, person.name = undefined
  // return new Boolean(false);           // 返回 新建的 boolean，抛弃 this, person.name = undefined
  // return new String('hello world');    // 返回 新建的 string，抛弃 this, person.name = undefined
  // return new Number(32);               // 返回 新的 number，抛弃 this, person.name = undefined

总结一下，构造函数中直接 return 一个简单对象，会直接返回this对象；如果返回一个复杂对象或是 new 关键字初始化的对象，会直接返回此对象。

二、手写实现

这里我们用一个函数模拟实现，第一个参数设定为构造函数，之后的参数为传入的参数。第一个参数类型限定必须是一个函数。

手写new关键字实现主要步骤如下

• 判断参数类型
• 新建一个对象
• 让对象可以访问构造函数原型链上的属性
• 根据构造函数的执行结果返回实例
  • 引用类型对象返回该对象
  • 简单对象返回新建的对象

function objectFactory(fn, ...args) {

  if (typeof fn !== 'function') {
    throw '第一个参数必须是函数'
  }

  // 创建一个对象
  const obj = {}

  // 让该对象可以访问构造函数原型链上的属性
  obj.__proto__ = fn.prototype;

  // 获取构造函数运行返回的结果
  let res = fn.apply(obj, args)

  // 当res为引用类型（复杂对象）则直接返回该结果; 否则返回obj，也就是构造函数中的this
  return typeof res === 'object' ? res || obj : obj
}

测试一下

function PersonFactory(name, age) {
  this.name = name
  this.age = age
}

const p1 = new PersonFactory('Steven',  '20')
console.log(p1) // PersonFactory { name: 'Steven', age: '20' }

const p2 = objectFactory(PersonFactory,  'Steven',  '20')
console.log(p2) // PersonFactory { name: 'Steven', age: '20' }

完美通过~

END