new的模拟实现

原文出处

JavaScript深入之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 中的属性

初步实现

---

分析：

1. new返回一个新对象，假设这个对象叫obj
2. obj可以调用Otaku构造函数进行初始化
3. obj的 _proto_ 属性会指向构造函数的 prototype

所以我们可以使用借用借用构造函数模式来创建该对象，现在我们可以尝试着写第一版了：

        function objectFactory() {
            var obj = new Object();
            var constructor = Array.prototype.shift.call(arguments);
            Object.setPrototypeOf(obj, constructor.prototype); //模拟实例对象的__proto__指向构造函数的prototype
            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() {
            var obj = new Object();
            var constructor = Array.prototype.shift.call(arguments);
            Object.setPrototypeOf(obj, constructor.prototype); //模拟实例对象的__proto__指向构造函数的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 : obj;

        };