JavaScript中的构造函数的内部原理

我们JavaScript中创建对象的方法有三种方式，第一使用对象字面量创建对象；第二使用 new Object() 创建对象；第三我们自定义一个对象，使用new关键字创建对象。其实第二种方法和第三种方法本质上是相似，都是使用new关键字来创建对象，也就是对象实例化。

但是，第二种方式是系统自带的构造函数，第三种就是自己可以定义一个构造器，实现自己的对象。

 

内部原理

构造函数的内部原理，就是三段论。我们都知道，构造函数中有this，主要原理就是this到底是什么。

自定义一个构造函数

        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            function eatFood() {
                console.log('会吃饭');
            }
        }

 它的内部原理三段论：

1. 首先系统会在函数的第一行，隐式地创建一个this对象 this{}

2. 然后执行 this.XXX = XXX 

像这样：this{name : name(实参)}

3. 最后，在函数最后return this

其实，重点就是要理解它的内部过程，要知道这么个实现过程，再往后学对一些现象，就是为什么是这样，就知道它的原理了。

还有一个问题就是，this的指向问题，下面看下关于this的指向问题。

 

this的指向

通常的话，我们都只是知道this是指向调用者，谁调用了这个函数，这个函数的this就指向谁。在DOM操作中，在添加事件监听器时，也会经常使用this，事件中的this也是指事件触发者，就是事件的调用者。这也只是我们知道的一部分，this还有其他的一些知识。

this指向问题

1. 在函数预编译环节，this指向全局对象 window

2. 在全局作用域中，this指向全局对象 window

3. call/apply ，可以改变函数运行时this的指向；这里牵扯到原型中的东西，暂且先记住有这两个方法就行

4. this指向调用者。函数不调用直接空执行时，走预编译环节，this指向window。

通常我们了解的this只是第四点，只了解那一点是远远不够的。 

在控制台输入this，也就是在全局作用域下，可以看下，this是不是指向window 。

 

下面的代码，在控制台上空执行构造函数，看下this此时是指向谁的。

        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            function eatFood() {
                console.log('会吃饭');
            }
            console.log(this);

        }

毫无疑问，上面的this指向的还是window对象。

 

但是当new一个对象，结果就不同了

        function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;

            function eatFood() {
                console.log('会吃饭');
            }
            console.log(this);

        }
        // 所以， 只要执行new关键字就一定会返回一个对象，用一个变量接收的是一个对象的引用。
        var person = new Person('kkk', 18, 'male');
        console.log(person);

这是就是this执行的是调用者，person对象是Person的一个对象实例，this指向了person，所以函数里的this的输出和person的输出结果是一致的。

 

this指向问题案例

ok，知识看完了，来几个题目看看吧。比较刺激。

第一道

        var aa = 123;

        function Print() {
            var aa = 234;
            this.aa = 456;
            console.log(aa);
        }
        Print();

这个，应该是毫无疑问的吧，直接输出234，因为函数空执行嘛，都没有牵扯到this的问题，它直接访问自己作用域的变量，所以是234。这里需要提醒的是，this指向的依然是window对象。

 

第二道

        var aa = 123;

        function Print() {
            this.aa = 456;
            console.log(aa);
        }
        Print();

这个，有点绕哈，其实也挺简单的，不用想那么多，当函数空执行的时候，产生自己的执行期上下文，放到作用域链的最顶端，在自己的作用域链中没有aa的属性，所以从作用域链找下一个作用域也就是全局（GO），但是，此时的this指向的是window对象也就是GO，aa的值被覆盖掉了，所以，输出456。

 

第三道

        var aa = 123; 
        function Print() {
            // var aa = 234;
            // this ———— > p;
            // this{
            //     aa:456
            // }
            this.aa = 456;
            console.log(this); // p
            console.log(aa); // 123
        }
        var p = new Print();
        console.log(p.aa); // 456
        console.log(this.aa); // 123

添加了new关键字，this的指向就变了，此时的this指向调用者，就是new Print() 这是一个对象，只是没有用变量接收这个对象的引用。

既然this指向了调用者不指向window，函数作用域没有aa变量，那输出aa时就是找的window里aa，所以输出123。

 

 

这三个还是比较有代表性的，多琢磨琢磨。