函数中的 this 是 JavaScript 中的难点之一。根据 this 的英文词义，有些人将 this 误解为指向自身，但事实显然不会这么简单。根据 this 的特性，到 ES6 ， this 总的来说有五种绑定情况。下面我将这些情况 一 一 列举出来:
1.默认绑定
默认绑定时， this 绑定全局对象。如果函数调用时没有任何修饰符，就会应用 this 的默认绑定。这种情况很容易分辨，具体看下方代码：
function func() {
console.log(this.c);
}
var c = 3;
func() //3
代码中函数 func 的调用就是没有任何修饰符的调用，这是 this 绑定全局对象，c 声明于全局作用域，是全局对象的属性。所以 c 可以通过 this.c 访问，结果为 3 。
此外，还应该注意严格模式与非严格模式的区别。如果函数声明于严格模式中，无论函数在何处执行，this 都不会绑定到全局对象。此时通过 this 访问全局属性只会得到 undefined ，就像下方代码。
"use strict"
function func() {
console.log(this.c);
}
var c = 3;
func() //undefined
2. 隐式绑定
隐式绑定时，this 绑定上下文对象。什么是上下文对象？举个简单的例子：
var obj = {num:2,
func:con
}
function con() {
console.log(this.num)；
}
obj.func() // 2
在上方代码中，一个对象内部包含一个函数，通过对象引用属性而间接地引用了 con 函数。 obj 就是 con 的上下文对象，this 隐式绑定到 obj ，所以 this.num 等于 2。
如果只是用 1 中的方式调用函数，结果就变成了 undefined。
func() //结果为 undefined
3. 显式绑定
显式绑定时，this 绑定到特定函数指定的对象。有三个函数可以指定 this 绑定的对象，分别为 apply、call、bind。JavaScript 中绝大部分函数都可以调用这三个方法，方式也很简单：
var obj = {a:1};
function func(c,b) {
console.log(this.a+c)
}
func.apply(obj,[1,2])
func.call(obj,[1,2]);
func.bind(obj,[1,2]);
三种方法的第一个参数都为 this 要绑定的对象，第二个参数都为要传入的参数列表。apply 与 call 的区别为 ，call 函数可以传入多个参数列表。bind 函数与另外两种方法的区别为，函数调用 apply 或 call 后会立即执行。
4. new 绑定
new 绑定时，this 绑定 new 构造的新对象。代码如下：
function func(num) {
this.num = num;
}
var obj = new func(3);
console.log(obj.num); // 3
obj 为 new 构造的新对象，所以 this.num 即为 obj.num。
5.箭头函数中 this 的绑定
箭头函数中，this 继承外层作用域的 this 绑定。如果外层作用域 this 绑定一个对象，箭头函数也绑定这个对象，就像下方代码中所展示的：
var obj = {
nun:1,
func:function(){
var boo = () => {
console.log(this.nun);
}
boo();
}
}
obj.func();//1
函数执行时，obj 是 func 的上下文对象，所以 func 函数中的 this 绑定 obj 对象。由于 func 函数是箭头函数的外层作用域，所以箭头函数的 this 也绑定 obj 对象。因此 this.nun = 1 ,函数执行结果为 1。
以上就是 JavaScript 中 this 五种绑定的完整总结。当然，实际代码中的 this 有各种各样让人迷惑的地方，以后的文章会有相关介绍。
如果文章有帮助请点个喜欢支持一下。（_）
tiger.jpg
网友评论