手写一个new的实现

204 阅读1分钟

new 操作符做了什么?

  1. 首先内部创建了一个空对象obj
  2. 将新对象的__proto__指向构造函数的prototype对象
  3. 将构造函数的作用域赋值给新对象(也就是this指向新对象)
  4. 执行构造函数中的代码(为这个新对象添加属性)
  5. 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

实现new操作符

// 写法一
function create() {
  const obj = new Object();
  const Con = [].shift.call(arguments);
  obj.__proto__ = Con.prototype;
  const ret = Con.apply(obj, arguments);
  return ret instanceof Object? ret: obj;
}


代码原理解析:

1、用new Object() 的方式新建了一个对象obj

2、取出第一个参数,就是我们要传入的构造函数。此外因为 shift 会修改原数组,所以 arguments 会被去除第一个参数

3、将 obj 的原型指向构造函数,这样obj就可以访问到构造函数原型中的属性

4、使用 apply,改变构造函数 this 的指向到新建的对象,这样 obj 就可以访问到构造函数中的属性

5、返回 obj

function Animal(name, age) {
  this.name = name;
  this.age = age
}

const doudou = create(Animal, 'doudou', 3)
console.log(doudou.name) // 'doudou'
console.log(doudou.age)  // 3
// 写法二
function create(fn, ...args) {
    const obj = Object.create(fn.prototype);
    const result = fn.apply(obj, args);
    return result instanceof Object? result : obj;
}

// const obj = obj = Object.create(fn.prototype) 等价于 const obj = {}; obj.__proto__ = fn.prototype