彻底搞懂javascript中的this的指向

一、前言

我们知道this关键字是一个非常重要的语法。毫不夸张的说不理解它的含义，大部分开发任务，都无法完成。在编写js程序的时候也会经常见到或者用到它，但是有一部分开发朋友对this可能一知半解，下面我们一起来探讨javascript中this的具体含义。
本文分为四部分：

1. 函数的声明和执行
2. this（这里）是哪里
3. 变化多端的this
4. 亘古不变的this

二、函数的声明和执行

回顾函数的声明和执行，因为一般 this 都是在函数中进行使用

1. 函数的声明：
   • 使用function关键字声明：function fn(){}
   • 使用表达式赋值声明：var fn = function(){}
2. 函数的执行：
   • 作为函数调用（默认调用）：函数名()
   • 作为对象的方法（通过上下文调用）：对象 . 方法名()
   • 作为构造函数（通过new调用）：new 函数名()
   • 通过call或apply或bind方法间接调用（）：函数名 . call()

这里需要强调的不是函数的声明，而是函数的执行，并且需要着重关注位置。
函数的执行位置 和 this的所在位置，如图：

三、this是哪里

this在英文中的含义是【这】。那么【这】是【哪】?

this关键字一般存在于函数中，在函数中，我们可能会有一些错误理解:

【这】就是指函数，或者【这】就是函数的作用域

其实，不对！

【这】指的是函数的【执行】上下文

注意【执行】这两个字，如果函数没有执行，那么this是没有内容的，只有当函数执行时，this才被 绑定 了内容。

总结一句话：谁【执行】了this所在的函数，this就是谁。

四、变化多端的this

自然语言中有一些神奇的字眼，在不同的场景下，所表示的意思都有所不同，比如：“开”，这个字：

站在一扇门前，说：“开”。表示开门。
站在一个骰盅前，说：“开”。表示开盅。
站在水龙头前，说：“开”。表示开水龙头。
无间道中，梁朝伟用枪指着刘德华，华仔说：“开”。表示开枪。

程序的this有异曲同工之处，根据不同的场景，this不同的位置，函数不同的执行方式，this所指向的内容都不一样。这里结合常见方式，总结出以下四种形式：

4.1 默认绑定

当一个没有明确隶属对象的函数，被直接调用时。该函数内部的this指向window。

function fn(){
    console.log(this.a);
}
var a = 10;
fn();    //10
// 这里的this指全局对象window

当然要注意,在ES5的严格模式下，没有明确隶属对象的函数在默认执行时，其内部的this指向undefined.

4.2 隐式绑定

所谓隐式绑定，就是将没有明确隶属对象的函数，归属到某个对象，通过该对象执行函数。
此时函数内部的this指向该对象。

function fn(){
    console.log(this.a);
}

var obj = {
    a:10,
    fn:fn
}
obj.fn();    // 10
// 这里的this指obj

隐式绑定会遇到隐式丢失的情况：

1. 当对象的方法被变量引用时，如果该变量没有从属对象，通过该变量执行函数，那么this会丢失，捕获到window。
2. 当对象的方法，作为回调函数，传入另一个函数内执行时，this会丢失，捕获到window。

function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10,
    fn:fn
}
obj.fn();    // 10

// 隐式丢失：虽然 f 是 obj.fn 的引用，但是 f 的执行，并没有归属对象
var f = obj.fn;
f();    // 20
setTimeout(obj.fn, 100);    // 20

隐式丢失，不好，也好，关键看如何应用。

但，隐式丢失是可以被修复的，这就要使用下一种绑定方式：显示绑定

4.3 显示绑定

所谓显示绑定，就是使用函数的方法，如：call，apply，bind等，可以强制改变this的指向，如果对函数的方法有疑问，可点击call和apply的使用-基础篇和call和apply的使用-扩展篇，稍作学习，本篇不做赘述。

此处以call方法举例：

function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10
};

fn.call(obj);    // 10
// 这里的this指obj

可以利用显示绑定的方式，修复隐式丢失问题：

function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10
};

// 隐式丢失被解决
fn.call(obj);    // 10

setTimeout(fn.bind(obj),100);    // 10

注意：通过修复隐式绑定，我们发现，显示绑定 的优先级要高于 隐式绑定。

4.4 构造函数绑定

构造函数绑定，又叫new绑定，主要用于面向对象编程。

这里还需要掌握new关键字的原理：

1. 创建一个新对象
2. 将函数中的this指向这个新对象
3. 将这个新对象的__proto__指向函数的prototype
4. 检查函数中是否主动返回对象，如果没有，则返回前三步处理好的对象

function fn(){
    this.a = 10;
}

var f = new fn();

console.log(f.a);    // 10
// 这里的this指创建出来的对象f

其实，只需要记住，凡是被new执行的函数，默认情况下，其内部的this都被new强行指向new出来的对象，也叫实例。

五、亘古不变的this

其实，不管this的指向如何千变万化，但基本都离不开以上几种情况：

1. 默认绑定 -----------------------------------> 严格模式绑定到undefined，否则为全局对象window
2. 隐式绑定(在上下文中调用) --------------> 绑定到当前函数的执行上下文对象
3. 显示绑定(由call或apply或bind调用) ----> 绑定到指定的对象
4. 构造函数绑定(由new调用) ---------------> 绑定到新创建的对象

只要掌握并熟练运用以上场景，那么this就会被 “玩弄于股掌之间” ~~~

---

以上，如有纰漏或不足之处，欢迎留言补充…

共同进步，加油！