JavaScript中new操作符和Object.create()的原理

Erika

new

new func()主要过程如下:

  1. 创建一个空对象obj
  2. 将该空对象的原型设置为构造函数的原型,即obj.__proto__ = func.prototype
  3. 以该对象为上下文执行构造函数,即func.call(obj)
  4. 返回该对象,即return obj

对于第3、4步还有个小细节,如果第3步func有返回值且返回值为对象,则第4步会返回func的返回值,反之则默认返回obj

模仿new原理的代码如下:

function new2(func) { // func为某个构造函数
  var createObject = Object.create(func.prototype); // 以构造函数的原型对象为原型,创建一个空对象,即创建一个{ __proto__: func.prototype }
  var returnObject = func.call(createObject); // 使用刚创建的空对象作为上下文(this)执行构造函数
  if (typeof returnObject === 'object') { // 若构造函数有返回对象,则返回该对象
    return returnObject;
  } else { // 若构造函数未返回对象,则返回Object.create创建的对象
    return createObject;
  }
};

Object.create()

在模仿new原理的代码中用到了Object.create(),它的作用是以入参为原型创建一个空对象,即

Object.create = function (obj) {
  return { '__proto__': obj};
};

Object.create = function (obj) {
  function F() {}
  F.prototype = obj;
  return new F();
};
阅读 1.7k

十字路口
记录个人技术路上的点点滴滴

外力 > 选择 > 天赋 > 努力 > 不努力

17 声望
0 粉丝
0 条评论
你知道吗?

外力 > 选择 > 天赋 > 努力 > 不努力

17 声望
0 粉丝
宣传栏