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

jiezi

6 年前

前言
用过 Vuejs 的同学都知道，需要用 new 操作符来实例化。
new Vue({
el: ‘#app’,
mounted(){},
});
那么面试官可能会问是否想过 new 到底做了什么，怎么模拟实现呢。
附上之前写文章写过的一段话：已经有很多模拟实现 new 操作符的文章，为什么自己还要写一遍呢。学习就好比是座大山，人们沿着不同的路登山，分享着自己看到的风景。你不一定能看到别人看到的风景，体会到别人的心情。只有自己去登山，才能看到不一样的风景，体会才更加深刻。
new 做了什么
先看简单例子 1：
// 例子 1
function 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’ // true
typeof Object === ‘function’ // true
从这里例子中，我们可以看出：一个函数用 new 操作符来调用后，生成了一个全新的对象。而且 Student 和 Object 都是函数，只不过 Student 是我们自定义的，Object 是 JS 本身就内置的。再来看下控制台输出图，感兴趣的读者可以在控制台试试。与 new Object() 生成的对象不同的是 new Student()生成的对象中间还嵌套了一层__proto__，它的 constructor 是 Student 这个函数。
// 也就是说：
student.constructor === Student;
Student.prototype.constructor === Student;
小结 1：从这个简单例子来看，new 操作符做了两件事：

创建了一个全新的对象。
这个对象会被执行[[Prototype]]（也就是__proto__）链接。

接下来我们再来看升级版的例子 2：
// 例子 2
function Student(name){
console.log(‘ 赋值前 -this’, this); // {}
this.name = name;
console.log(‘ 赋值后 -this’, this); // {name: ‘ 轩辕 Rowboat’}
}
var student = new Student(‘ 轩辕 Rowboat’);
console.log(student); // {name: ‘ 轩辕 Rowboat’}
由此可以看出：这里 Student 函数中的 this 指向 new Student()生成的对象 student。
小结 2：从这个例子来看，new 操作符又做了一件事：
生成的新对象会绑定到函数调用的 this。
接下来继续看升级版例子 3：
// 例子 3
function Student(name){
this.name = name;
// this.doSth();
}
Student.prototype.doSth = function() {
console.log(this.name);
};
var student1 = new Student(‘ 轩辕 ’);
var student2 = new Student(‘Rowboat’);
console.log(student1, student1.doSth()); // {name: ‘ 轩辕 ’} ‘ 轩辕 ’
console.log(student2, student2.doSth()); // {name: ‘Rowboat’} ‘Rowboat’
student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用 ES5 则是：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true
关于 JS 的原型关系笔者之前看到这张图，觉得很不错，分享给大家。
小结 3：这个例子 3 再一次验证了小结 1 中的第 2 点。也就是这个对象会被执行 [[Prototype]]（也就是__proto__）链接。并且通过 new Student() 创建的每个对象将最终被 [[Prototype]] 链接到这个 Student.protytype 对象上。
细心的同学可能会发现这三个例子中的函数都没有返回值。那么有返回值会是怎样的情形呢。那么接下来请看例子 4
// 例子 4
function 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(‘ 轩辕 Rowboat’);
console.log(student); {name: ‘ 轩辕 Rowboat’}
笔者测试这七种类型后 MDN JavaScript 类型，得出的结果是：前面六种基本类型都会正常返回 {name: ‘ 轩辕 Rowboat’}，后面的 Object(包含 Functoin, Array, Date, RegExg, Error) 都会直接返回这些值。
由此得出小结 4：
如果函数没有返回对象类型 Object(包含 Functoin, Array, Date, RegExg, Error)，那么 new 表达式中的函数调用会自动返回这个新的对象。
结合这些小结，整理在一起就是：

创建了一个全新的对象。
这个对象会被执行[[Prototype]]（也就是__proto__）链接。
生成的新对象会绑定到函数调用的 this。
通过 new 创建的每个对象将最终被 [[Prototype]] 链接到这个函数的 prototype 对象上。
如果函数没有返回对象类型 Object(包含 Functoin, Array, Date, RegExg, Error)，那么 new 表达式中的函数调用会自动返回这个新的对象。

new 模拟实现
知道了这些现象，我们就可以模拟实现 new 操作符。直接贴出代码和注释
/**
* 模拟实现 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);
var argsArr = [].slice.call(arguments);
// 删除 ctor 构造函数这个参数
argsArr.shift();
// 3. 生成的新对象会绑定到函数调用的 `this`。
// 获取到 ctor 函数返回结果
var ctorReturnResult = ctor.apply(newObj, argsArr);
// 小结 4 中这些类型中合并起来只有 Object 和 Function 两种类型 typeof null 也是 null 所以要除去 null
if(typeof ctorReturnResult === ‘object’ && ctorReturnResult !== null){
return ctorReturnResult;
}
if(typeof ctorReturnResult === ‘function’){
return ctorReturnResult;
}
// 5. 如果函数没有返回对象类型 `Object`(包含 `Functoin`, `Array`, `Date`, `RegExg`, `Error`)，那么 `new` 表达式中的函数调用会自动返回这个新的对象。
return newObj;
}
最后用模拟实现的 newOperator 函数验证下之前的例子 3：
// 例子 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, ‘Rowboat’, 18);
// var student1 = new Student(‘ 轩辕 ’);
// var student2 = new Student(‘Rowboat’);
console.log(student1, student1.doSth()); // {name: ‘ 轩辕 ’} ‘ 轩辕 ’
console.log(student2, student2.doSth()); // {name: ‘Rowboat’} ‘Rowboat’

student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用 ES5 则是：
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true
可以看出，很符合 new 操作符。读者发现有不妥或可改善之处，欢迎指出。回顾这个模拟 new 函数 newOperator 实现，最大的功臣当属于 Object.create()这个 ES5 提供的 API。
Object.create() 用法举例
笔者之前整理的一篇文章中也有讲过，可以翻看 JavaScript 对象所有 API 解析
MDN Object.create()
Object.create(proto, [propertiesObject])方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。它接收两个参数，不过第二个可选参数是属性描述符（不常用，默认是 undefined）。
对于不支持 ES5 的浏览器，MDN 上提供了 ployfill 方案。
var anotherObject = {
name: ‘ 轩辕 Rowboat’
};
var myObject = Object.create(anotherObject, {
age: {
value：18,
},
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明 anotherObject 的原型是 Object.prototype
Object.getPrototypeOf(myObject); // {name: “ 轩辕 Rowboat”} // 说明 myObject 的原型是{name: “ 轩辕 Rowboat”}
myObject.hasOwnProperty(‘name’); // false; 说明 name 是原型上的。
myObject.hasOwnProperty(‘age’); // true 说明 age 是自身的
myObject.name; // ‘ 轩辕 Rowboat’
myObject.age; // 18;
到此，文章就基本写完了。感谢读者看到这里。
最后总结一下：

new 做了什么：

怎么模拟实现
// 去除了注释
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);
argsArr.shift();
var ctorReturnResult = ctor.apply(newObj, argsArr);
if(typeof ctorReturnResult === ‘object’ && ctorReturnResult !== null){
return ctorReturnResult;
}
if(typeof ctorReturnResult === ‘function’){
return ctorReturnResult;
}
return newObj;
}
读者发现有不妥或可改善之处，欢迎指出。另外觉得写得不错，可以点个赞，也是对笔者的一种支持。
关于
作者：常以轩辕 Rowboat 为名混迹于江湖。前端路上 | PPT 爱好者 | 所知甚少，唯善学。个人博客 segmentfault 个人主页掘金个人主页知乎 github