this魔术背后的秘密

作为一个前端学习者，在学习之路上总会遇到一些难题，突发奇想，便随手记录一下。

关于this

this作为javascript常用的关键字之一，被人们称为最复杂的机制之一，他就像一个魔术师，变幻着令人着迷的戏法，来混淆你的视听。而作为观众的我们在欣赏完这眼花缭乱的魔术之后，总想了解一下背后的秘密。

理解this的指向

在js中，函数的几种调用方式有：
普通函数调用
作为对象方法来调用
作为构造函数来调用
使用apply/call方法来调用

this是在运行时进行绑定的，它的上下文取决于函数调用时的各种条件，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
简单来说：this的最终指向的是那个调用它的对象（谁调用这个函数或者方法，this就指向谁）

普通函数调用

　　function foo(){
　　　　this.x = 1;
　　　　console.log(this.x);
　　　　console.log(this);
　　}
　　foo(); // 1   window

在这段代码中foo是直接使用了不带任何修饰的函数引用进行调用的，所以使用了默认绑定，即作为全局对象window的方法来进行调用的,可以看作window.foo();所以这里是window对象调用了foo这个方法,也就是说foo函数当中的this是指向window,同时window还具有了一个属性x,值为1。

var x = 1;
　　function foo(){
　　　　console.log(this.x);
　　}
　　foo(); // 1

这里为了证明this是全局变量，进行了一下小改变。一开始定义的全局变量x作为window的属性，在调用时，this肯定是指向全局对象window。

但是在严格模式下，则不能将全局对象用于默认绑定，因此this会绑定到undefined。

function foo(){
        "use strict";
　　　　console.log(this.x);
　　}
       var x = 1;
　　foo(); // Uncaught TypeError: Cannot read property 'x' of undefined

虽然this的绑定规则完全取决于调用位置，但是只有foo()运行在非严格模式下时，默认绑定才能绑定到全局对象。

作为对象方法的调用

var obj = {
            x : "1",
            foo: function() {
              console.log(this.x);
            }
       };
　　obj.foo(); // 1

这里的this指向的是对象obj，因为你调用这个foo是通过obj.foo()执行的，那this就指向就是对象obj。再次强调，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式，谁调用的就指向谁，这个很重要。

作为构造函数来调用

function foo(){
  　　　　this.x = 1;
  　　}
  　　var obj = new foo();
  　　console.log(obj.x); // 1

这里可以实现输出1是因为new关键字可以改变this的指向，将this指向了obj对象。在传统的面向类语言中的new与js的new机制有着很多不同。在js中，构造函数只是使用new操作符时被调用的函数，不属于某个类，也不会实例化一个类，只是被new操作符调用的普通函数。new是可以影响函数调用时this绑定行为的方法，称之为new绑定。

使用apply/call方法来调用

function foo(){
  　　　　console.log(obj.x);
　}
　　var obj = {
    x:2
  };
  foo.call(obj); // 2

通过foo.call()，调用foo时将this绑定在了obj上。从this绑定的角度上，call()和apply()是一样的。如果你把null或者undefined作为this绑定的对象传入call，apply或者bind，在调用时会被忽略，执行的是默认绑定规则。

最后

如果要判断一个运行中的函数的this指向，就需要找到这个函数直接调用的位置。即谁调用这个函数或者方法，this就指向谁。

this虽然只是js里的一小部分，对于我们学习者而言还是很重要的。this还有很多奥秘等着我们去发掘，我也只是知晓了其冰山一角，希望能分享一点自己的想法给一起学习路上的同学们，与君共勉。

参考

• 《你不知道的javascript》
• Javascript的this用法