【Javascript高级知识】深入剖析JS中New一个对象的过程(实现原理)

new一个对象的原理是怎样的呢?

    1. 用new Object() 的方式新建了一个对象 obj
    1. 取出第一个参数,就是我们要传入的构造函数。此外因为 shift 会修改原数组,所以 arguments 会被去除第一个参数
    1. 将 obj 的原型指向构造函数,这样 obj 就可以访问到构造函数原型中的属性
    1. 使用 apply,改变构造函数 this 的指向到新建的对象,这样 obj 就可以访问到构造函数中的属性
    1. 返回 obj

如何模拟实现一个自己的new构造器?

// v1
  function objectFactory() {
      var obj = new Object(),
          // 因为 shift 会修改原数组,所以 arguments 会被去除第一个参数
          Constructor = [].shift.call(arguments);     // 拿到伪数组中的第一个参数
      // 取出参数中的第一个参数,就是我们要传入的构造函数,建立继承关系
      obj.__proto__ = Constructor.prototype;
      Constructor.apply(obj, arguments);
      return obj;
  }

  // v2 : 还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么就返回什么。
  function objectFactory() {
      var obj = new Object(),
          Constructor = [].shift.call(arguments);
      // 建立继承关系(二者之间的关系)
      obj.__proto__ = Constructor.prototype;
      // 开始执行这个构造函数
      var ret = Constructor.apply(obj, arguments);
      // 看一下构造函数的返回值,是对象还是一个基本数据类型?
      return typeof ret === 'object' ? ret : obj;
  }

 
  // v4:Object.create的原理
    // var obj = Object.create(Constructor.prototype);
    // 等价于:
    // var obj = new Object();
    // obj.__proto__ = Constructor.prototype;
    const _new = function () {
        var Constructor = [].shift.call(arguments);
        // 1. 创建一个对象,这个对象要继承与构造函数的原型对象
        var obj = Object.create(Constructor.prototype);
        // 2. 执行这个构造函数
        var ret = Constructor.apply(obj, arguments);
        return typeof ret === 'object' ? ret || obj : obj;
    }
    
    // v5: 实现一个自己的new构造函数
    const _new = function() {
        // 从Object.prototype上克隆一个对象 
        var obj = new Object();
        // 取出来外部传入的构造器
        var Constructor = [].shift.call(arguments);
        
        // 使用一个中间的函数来维护原型的关系
        var F = function(){};
        F.prototype = Constructor.prototype;
        obj = new F();
        
        // 开始执行这个构造函数
        var res = Constructor.apply(obj, arguments);
        // 确保构造器总是返回一个对象(使用res || obj 的方式来防止返回null参数)
        return typeof res === 'object' ? res || obj : obj;
    }

你可能感兴趣的:(JavaScript学习,Javascript高级,JS基础)