JavaScript深刻之new的模拟实现

JavaScript深刻系列第十二篇，经过new的模拟实现，带你们揭开使用new得到构造函数实例的真相

new

一句话介绍 new:

new 运算符建立一个用户定义的对象类型的实例或具备构造函数的内置对象类型之一

也许有点难懂，咱们在模拟 new 以前，先看看 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 能够：

1. 访问到 Otaku 构造函数里的属性
2. 访问到 Otaku.prototype 中的属性

接下来，咱们能够尝试着模拟一下了。

由于 new 是关键字，因此没法像 bind 函数同样直接覆盖，因此咱们写一个函数，命名为 objectFactory，来模拟 new 的效果。用的时候是这样的：

function Otaku () {
    ……
}

// 使用 new
var person = new Otaku(……);
// 使用 objectFactory
var person = objectFactory(Otaku, ……)复制代码

初步实现

分析：

由于 new 的结果是一个新对象，因此在模拟实现的时候，咱们也要创建一个新对象，假设这个对象叫 obj，由于 obj 会具备 Otaku 构造函数里的属性，想一想经典继承的例子，咱们能够使用 Otaku.apply(obj, arguments)来给 obj 添加新的属性。

在 JavaScript 深刻系列第一篇中，咱们便讲了原型与原型链，咱们知道实例的 __proto__ 属性会指向构造函数的 prototype，也正是由于创建起这样的关系，实例能够访问原型上的属性。

如今，咱们能够尝试着写初版了：

// 初版代码
function objectFactory() {

    var obj = new Object(),

    Constructor = [].shift.call(arguments);

    obj.__proto__ = Constructor.prototype;

    Constructor.apply(obj, arguments);

    return obj;

};复制代码

在这一版中，咱们：

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

更多关于：

原型与原型链，能够看《JavaScript深刻之从原型到原型链》

apply，能够看《JavaScript深刻之call和apply的模拟实现》

经典继承，能够看《JavaScript深刻之继承》

复制如下的代码，到浏览器中，咱们能够作一下测试：

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() {
    var obj = new Object(),
    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复制代码

在这个例子中，构造函数返回了一个对象，在实例 person 中只能访问返回的对象中的属性。

并且还要注意一点，在这里咱们是返回了一个对象，假如咱们只是返回一个基本类型的值呢？

再举个例子：

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复制代码

结果彻底颠倒过来，此次尽管有返回值，可是至关于没有返回值进行处理。

因此咱们还须要判断返回的值是否是一个对象，若是是一个对象，咱们就返回这个对象，若是没有，咱们该返回什么就返回什么。

再来看第二版的代码，也是最后一版的代码：

// 第二版的代码
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;

};复制代码

下一篇文章

JavaScript深刻之类数组对象与arguments

相关连接

《JavaScript深刻之从原型到原型链》

《JavaScript深刻之call和apply的模拟实现》

《JavaScript深刻之继承》

深刻系列

JavaScript深刻系列目录地址：github.com/mqyqingfeng…。

JavaScript深刻系列预计写十五篇左右，旨在帮你们捋顺JavaScript底层知识，重点讲解如原型、做用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

若是有错误或者不严谨的地方，请务必给予指正，十分感谢。若是喜欢或者有所启发，欢迎star，对做者也是一种鼓励。