new的作用
// Otaku 御宅族，简称宅
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'Games';
}
// 因为缺乏锻炼的缘故，身体强度让人担忧
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
可以看出，实例person可以访问构造函数内的属性(name、age等)，也可以访问原型上的属性(strength、sayYourName)
new的过程中发生了什么
- 创建一个新对象
- 使新对象继承构造函数的原型链，使之可以访问构造函数原型上的属性
- 执行构造函数，为新对象添加属性
- 返回对象
new的模拟实现
因为 new 的结果是一个新对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫 obj，因为 obj 会具有 Otaku 构造函数里的属性，想想经典继承的例子，我们可以使用 Otaku.apply(obj, arguments)来给 obj 添加新的属性。
在 JavaScript 深入系列第一篇中，我们便讲了原型与原型链，我们知道实例的 proto 属性会指向构造函数的 prototype，也正是因为建立起这样的关系，实例可以访问原型上的属性。
// 第一版
function objectFactory() {
// 1. new一个新对象
const obj = new Object()
// 2. 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数
const Constructor = [].shift.call(arguments)
// 3. 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性
obj.__proto__ = Constructor.prototype
// 4. 传入剩余擦书执执行构造函数。使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性,
Constructor.apply(obj, arguments)
return obj
}
测试代码
function Otaku (name, age) {
this.name = name;
this.age = age;
this.habit = 'Games';
}
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
console.log('I am ' + this.name);
}
function objectFactory() {
const obj = new Object()
const Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
Constructor.apply(obj, arguments)
return obj
}
var person = objectFactory(Otaku, 'Kevin', '18')
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // 60
person.sayYourName(); // I am Kevin
接下来我们再来看一种情况，假如构造函数有返回值，举个例子：
function Otaku (name, age) {
this.strength = 60;
this.age = age;
return {
name: name,
habit: 'Games'
}
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // undefined
console.log(person.age) // undefined
可以看出如果构造函数返回对象，实例只能访问返回对象的属性，构造函数内的属性是undefined
如果构造函数返回非对象：
function Otaku (name, age) {
this.strength = 60;
this.age = age;
return 'handsome boy';
}
var person = new Otaku('Kevin', '18');
console.log(person.name) // undefined
console.log(person.habit) // undefined
console.log(person.strength) // 60
console.log(person.age) // 18
如果构造函数返回是非对象的值，尽管有返回值，但是相当于没有返回值进行处理
因此第2版代码需要对构造函数返回值做判断，如果构造函数返回的是对象，那就返回这个对象，不是对象就返回创建的新对象
function objectFactory() {
const obj = new Object()
const Constructor = [].shift.call(arguments)
obj.__proto__ = Constructor.prototype
const ret = Constructor.apply(obj, arguments)
return typeof ret === 'object' ? ret : obj
}
参考链接
JavaScript深入之new的模拟实现