new 操作符

new 操作符做的事情

1. 创建了一个全新的对象。
2. 将对象链接到这个函数的 prototype 对象上。
3. 执行构造函数，并将 this 绑定到新创建的对象上。
4. 判断构造函数执行返回的结果是否是引用数据类型，若是则返回构造函数执行的结果，否则返回创建的对象。

function myNew(Constructor, ...args) {
    // console.log(Constructor);
    // Constructor 输出结果
    // ƒ Test() { 
    //      console.log('被执行的函数。'); 
    //      return '返回被执行的函数。'; 
    // };

    // console.log(args);
    // args 输出结果
    // [1, "JavaScript", "辛弃疾", {…}, Array(3)]
    // console.log(args[3]);
    // args[3] 输出结果
    // {sname: "杨万里", number: 3, web: "vue"}
    // console.log(args[4]);
    // [5, "uniApp", "范仲淹"]

    // 判断 Constructor 参数是否是函数
    if (typeof Constructor !== 'function') {
        return 'Constructor.apply is not a function';
    };

    // 1、创建了一个全新的对象。
    let newObject = {};

    // 2、将对象链接到这个函数的 prototype 对象上。
    newObject.__proto__ = Constructor.prototype;

    // 此处是把 1 / 2 步结合到一起
    // const newObject = Object.create(Constructor.prototype);

    // 3、执行构造函数，
    // 并将 this 绑定到新创建的对象上。
    let result = Constructor.apply(newObject, args);

    // 4. 判断构造函数执行返回的结果是否是引用数据类型，
    // 若是则返回构造函数执行的结果，
    // 否则返回创建的对象。
    return result != undefined && result != null ? result : newObject;
};

// 需要被 new 的函数
function NewTest() {
    console.log('被执行的函数。'); // 被执行的函数。
    return '返回被执行的函数。';
};

// 定义参数
let dataObj = {
    sname: '杨万里',
    number: 3,
    web: 'vue'
};
let dataArray = [5, 'uniApp', '范仲淹'];

// 执行 myNew 函数
let test = myNew(NewTest, 1, 'JavaScript', '辛弃疾', dataObj, dataArray);
console.log(test); // 返回被执行的函数。
 

1、new 的原理是什么？

new 操作符做的事情。

2、通过 new 的方式创建对象和通过字面量创建对象有什么区别？

对象都是通过 new 产生。function Foo() {}，function 是语法糖，内部等同于 new Function() 。let object = { number: 1 } ，使用字面量创建对象，内部也是使用了 new Object() 。对于创建一个对象来说，更推荐使用字面量的方式创建对象。因为使用 new Object() 的方式创建对象，需要通过作用域链一层层找到 Object ，如果使用字面量的方式就没有这个问题。