共计 3432 个字符，预计需要花费 9 分钟才能阅读完成。
this 应该算是前期比较容易混淆的一个关键字了，在这里，我就打算按照我的理解来说一下
首先呢，this 的值是跟运行时被调用的位置相关的，而不是词法作用域。
也就是说，他的绑定的值很可能是动态的，不同的调用位置，很可能值就不一样，比如说：
function foo() {
console.log(this.a);
}
var a = 2;
var obj = {
a: 3,
foo,
}
foo(); //2
obj.foo(); //3
var c = obj.foo;
c(); //2
然后你会惊讶的发现，foo()通过不同的形式调用，他最终的值是不一样的，咱们这一节主要就来讲一讲他们里面的这些绑定的规则
默认绑定
独立的函数调用，它的作用域是作用在全局的，这种绑定规则最常见并且是优先级最低的一种绑定规则。来一个例子
function foo() {
console.log(this.a); //2
console.log(this === window); //true
}
var a = 2;
foo();
在浏览器中执行，会发现，如果 foo()作为一个函数单独调用，那么 this 指向的就是全局对象 windows。
但是呢，也有一种例外，如果函数使用的严格模式的话，那么全局对象讲无法使用默认绑定，this 将会绑定到 undefined，还是刚才的例子：
function foo() {
“use strict”
console.log(this.a);
console.log(this === window);
}
var a = 2;
foo(); //Uncaught TypeError: Cannot read property ‘a’ of undefined
可以看到，foo 直接抛出一个 error，说 this 是 undefined，取不到 a，如果用到严格模式的时候，可以稍微注意下这个区别
咱们刚刚的例子，说的是函数内用严格模式的话，讲无法使用默认绑定，那么如果是在函数调用位置用严格模式，会受影响吗
function foo() {
console.log(this.a); //2
console.log(this === window); //true
}
var a = 2;
(function () {
“use strict”
foo();
})();
很明显，可以看出，是不受影响的，还有一个问题，如果把 var 定义变成 let 会怎么样呢
function foo() {
console.log(this.a); //undefined
console.log(this === window); //true
}
let a = 2;
(function () {
“use strict”
foo();
})();
也就是说，let 定义并不会加到全局变量中，这个和 var 的区别需要稍微留意一下
隐式绑定
这一条规则考虑的是是否有上下文对象，举个例子
function foo() {
console.log(this.a); //2
console.log(this === obj); // true
}
var obj = {
a: 2,
foo,
}
obj.foo();
在这种情况下，foo 会使用 obj 的上下文对象来引用函数，此时的 this 指向的就是 obj。
那么如果是嵌套对象这种的，会怎么处理呢？
function foo() {
console.log(this.a); // 1
console.log(this === obj) // true
console.log(this === obj1) // fale
}
var obj = {
a: 1,
foo,
};
var obj1 = {
a: 2,
obj,
}
obj1.obj.foo();
可以看到，实际上此时 foo 中的 this 指向了离他最近的对象 obj，也就是说，对象属性引用链的最后一层会影响它的调用位置
还有一种情况。
function foo() {
console.log(this.a);
}
var obj = {
a: 3,
foo,
}
var a = 2;
var f = obj.foo;
f(); // 2
这种情况下，虽然 f 是 obj.foo 的引用，但是最后依然用的是默认绑定，而不是隐式绑定，所以说呢，咱们可以这么理解，虽然他是对象中函数的引用，但是在执行的时候，调用的方式确是函数调用的方式，不是对象. 属性 () 的方式，这块在使用的时候需要注意一下
显式绑定
很简单，显式绑定就是手动直接改变其 this 指向的一种方式，这个主要是用几种 api 来实现的
function foo() {
console.log(this.a);
}
var obj = {
a: 2,
};
foo.call(obj);
foo.apply(obj);
var f = foo.bind(obj);
f();
这个就是显式绑定的常见的三种形式
这三种形式的话，call 和 apply 差不多，就不展开了，详情看文档就行，咱们仔细看一下 bind 函数，来在看一个例子
function foo(num1, num2) {
console.log(num1 + num2); //5
console.log(this === obj); // true
}
var obj = {
a: 1,
};
var f = foo.bind(obj, 2);
f(3);
这个可以看出，bind 的用法和 call 以及 apply 还是有一些差别的。
注意，如果显式绑定传入的是 null 或者是 undefined 的话，将会使用默认绑定规则，举个例子
function foo() {
console.log(this.a);
}
var a = 2;
foo.call(null); // 2
new 绑定
这个主要是 new 函数 () 的绑定形式的，这个的 this 指向的是函数构造出的那个对象，new 的时候，它的执行过程可以大概执行以下几步
创建一个全新的对象
这个新对象会被执行 prototype 连接
新对象绑定到函数调用的 this
如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象
注意最后一句话，如果函数没有返回对象，那么就会返回函数调用的新对象，如果返回了一个对象呢，那么结果就是直接返回这个对象
var abc = {
a: 10
}
function foo() {
return abc;
}
foo.prototype = {
b: 20
};
var a = new foo();
console.log(a === abc); // true
console.log(a.b); // undefined
function bar() {
this.a = 10;
}
bar.prototype = {
b: 20
};
var b = new bar();
console.log(b.a); // 10
console.log(b.b); // 20
以上四种常见的 this 绑定方式已经介绍的差不多了，那么问题来了，谁的优先级更高呢
很明显，默认绑定的优先级最低，就不展开说了
显式绑定与隐式绑定哪个优先级高呢，举个例子
function foo() {
console.log(this. a);
}
var obj1 = {
a: 2,
foo: foo
};
var obj2 = {
a: 3,
foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call(obj2); // 3
obj2.foo.call(obj1); // 2
很明显，显式绑定优先级要高于隐式绑定
那么 new 绑定和显式绑定谁更高呢，来再看个例子
function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2
var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3
很明显，new 的优先级会更高
所以，这样的话，优先级排序就出来了，分别为
new 绑定 > 显式绑定 > 隐式绑定 > 默认绑定
以上就是大家常用到的几种，不过 es6 出现了一种箭头函数，箭头函数理论上不能应用上面四种的任意一种，它的 this 是根据代码的词法作用域来走的，比如说
function foo() {
return (a) => {
console.log(this.a);
};
}
var obj1 = {
a: 2
};
var obj2 = {
a: 3
};
var bar = foo.call(obj1);
bar.call(obj2); // 2
结果已经很明显了，
好了，以上内容就讲完了，通过我的一些讲解，是不是有一点理解了呢，如果有任何的不同意见，欢迎讨论哦
参考书籍《你不知道的 Javascript》上卷
转载自：http://www.lht.ren/article/4