面试官问：能否模拟实现 JS 的 new 操作符

new Vue({    el: '#app',    mounted(){},});

// 例子1function Student(){}var student = new Student();console.log(student); // {}// student 是一个对象。console.log(Object.prototype.toString.call(student)); // [object Object]// 我们知道平时声明对象也可以用new Object(); 只是看起来更复杂// 顺便提一下 `new Object`(不推荐)和Object()也是一样的效果// 可以猜测内部做了一次判断，用new调用/** if (!(this instanceof Object)) {*    return new Object();*  }*/var obj = new Object();console.log(obj) // {}console.log(Object.prototype.toString.call(student)); // [object Object]
typeof Student === 'function' // truetypeof Object === 'function' // true

// 也就是说：student.constructor === Student;Student.prototype.constructor === Student;

// 例子2function Student(name){    console.log('赋值前-this', this); // {}    this.name = name;    console.log('赋值后-this', this); // {name: '若川'}}var student = new Student('若川');console.log(student); // {name: '若川'}

// 例子3function Student(name){    this.name = name;    // this.doSth();}Student.prototype.doSth = function() {    console.log(this.name);};var student1 = new Student('若');var student2 = new Student('川');console.log(student1, student1.doSth()); // {name: '若'} '若'console.log(student2, student2.doSth()); // {name: '川'} '川'student1.__proto__ === Student.prototype; // truestudent2.__proto__ === Student.prototype; // true// __proto__ 是浏览器实现的查看原型方案。// 用ES5 则是：Object.getPrototypeOf(student1) === Student.prototype; // trueObject.getPrototypeOf(student2) === Student.prototype; // true

// 例子4function Student(name){    this.name = name;    // Null（空） null    // Undefined（未定义） undefined    // Number（数字） 1    // String（字符串）'1'    // Boolean（布尔） true    // Symbol（符号）（第六版新增） symbol
    // Object（对象） {}        // Function（函数） function(){}        // Array（数组） []        // Date（日期） new Date()        // RegExp（正则表达式）/a/        // Error （错误） new Error()    // return /a/;}var student = new Student('若川');console.log(student); {name: '若川'}

/** * 模拟实现 new 操作符 * @param  {Function} ctor [构造函数] * @return {Object|Function|Regex|Date|Error}      [返回结果] */function newOperator(ctor){    if(typeof ctor !== 'function'){      throw 'newOperator function the first param must be a function';    }    // ES6 new.target 是指向构造函数    newOperator.target = ctor;    // 1.创建一个全新的对象，    // 2.并且执行[[Prototype]]链接    // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。    var newObj = Object.create(ctor.prototype);    // ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);    // 除去ctor构造函数的其余参数    var argsArr = [].slice.call(arguments, 1);    // 3.生成的新对象会绑定到函数调用的`this`。    // 获取到ctor函数返回结果    var ctorReturnResult = ctor.apply(newObj, argsArr);    // 小结4 中这些类型中合并起来只有Object和Function两种类型 typeof null 也是'object'所以要不等于null，排除null    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;    var isFunction = typeof ctorReturnResult === 'function';    if(isObject || isFunction){        return ctorReturnResult;    }    // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，那么`new`表达式中的函数调用会自动返回这个新的对象。    return newObj;}

// 例子3 多加一个参数function Student(name, age){    this.name = name;    this.age = age;    // this.doSth();    // return Error();}Student.prototype.doSth = function() {    console.log(this.name);};var student1 = newOperator(Student, '若', 18);var student2 = newOperator(Student, '川', 18);// var student1 = new Student('若');// var student2 = new Student('川');console.log(student1, student1.doSth()); // {name: '若'} '若'console.log(student2, student2.doSth()); // {name: '川'} '川'
student1.__proto__ === Student.prototype; // truestudent2.__proto__ === Student.prototype; // true// __proto__ 是浏览器实现的查看原型方案。// 用ES5 则是：Object.getPrototypeOf(student1) === Student.prototype; // trueObject.getPrototypeOf(student2) === Student.prototype; // true

var anotherObject = {    name: '若川'};var myObject = Object.create(anotherObject, {    age: {        value：18,    },});// 获得它的原型Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明anotherObject的原型是Object.prototypeObject.getPrototypeOf(myObject); // {name: "若川"} // 说明myObject的原型是{name: "若川"}myObject.hasOwnProperty('name'); // false; 说明name是原型上的。myObject.hasOwnProperty('age'); // true 说明age是自身的myObject.name; // '若川'myObject.age; // 18;

if (typeof Object.create !== "function") {    Object.create = function (proto, propertiesObject) {        if (typeof proto !== 'object' && typeof proto !== 'function') {            throw new TypeError('Object prototype may only be an Object: ' + proto);        } else if (proto === null) {            throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");        }
        if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
        function F() {}        F.prototype = proto;        return new F();    };}

// 去除了注释function newOperator(ctor){    if(typeof ctor !== 'function'){      throw 'newOperator function the first param must be a function';    }    newOperator.target = ctor;    var newObj = Object.create(ctor.prototype);    var argsArr = [].slice.call(arguments, 1);    var ctorReturnResult = ctor.apply(newObj, argsArr);    var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;    var isFunction = typeof ctorReturnResult === 'function';    if(isObject || isFunction){        return ctorReturnResult;    }    return newObj;}