当我开始学习JavaScript时，花了一些时间来理解JavaScript中的this关键字并且能够快速识别this关键字所指向的对象。我发现理解this关键字最困难的事情是，您通常会忘记在您已阅读或观看过一些JavaScript课程或资源中解释的不同案例情况。在ES6中引入箭头函数后，事情变得更加混乱，因为箭头函数this以不同的方式处理关键字。我想写这篇文章来陈述我学到的东西，并尝试以一种可以帮助任何正在学习JavaScript并且难以理解this关键字的人的方式来解释它。
您可能知道，执行任何JavaScript行的环境（或scope）称为“执行上下文”。Javascript运行时维护这些执行上下文的堆栈，并且当前正在执行存在于该堆栈顶部的执行上下文。this变量引用的对象每次更改执行上下文时都会更改。
默认情况下，执行上下文是全局的，这意味着如果代码作为简单函数调用的一部分执行，则该this变量将引用全局对象。在浏览器的情况下，全局对象是window对象。例如，在Node.js环境中，this值是一个特殊对象global。
例如，尝试以下简单的函数调用：
function foo () {
console.log("Simple function call");
console.log(this === window);
}
foo();
调用foo()，得到输出：
“Simple function call”
true
证明这里的this指向全局对象，此例中为window。
注意，如果实在严格模式下，this的值将是undefined，因为在严格模式下全局对象指向undefined而不是window。
试一下如下示例：
function foo () {
'use strict';
console.log("Simple function call");
console.log(this === window);
}
foo();
输出：
“Simple function call”
false
我们再来试下有构造函数的：
function Person(first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
this.displayName = function() {
console.log(`Name: ${this.first_name} ${this.last_name}`);
};
}
创建Person实例：
let john = new Person('John', 'Reid');
john.displayName();
得到结果：
"Name: John Reid"
这里发生了什么？当我们调用 new Person，JavaScript会在Person函数内创建一个新对象并把它保存为this。接着，first_name, last_name 和 displayName 属性会被添加到新创建的this对象上。如下：
你会注意到在Person的执行上下文中创建了this对象，这个对象有first_name, last_name 和 displayName 属性。希望您能根据上图理解this对象是如何创建并添加属性的。
我们已经探讨了两种相关this绑定的普通案例我不得不提出下面这个更加困惑的例子，如下函数：
function simpleFunction () {
console.log("Simple function call")
console.log(this === window);
}
我们已经知道如果像下面这样作为简单函数调用，this关键字将指向全局对象，此例中为window对象。
simpleFunction()
因此，得到输出：
“Simple function call”
true
创建一个简单的user对象：
let user = {
count: 10,
simpleFunction: simpleFunction,
anotherFunction: function() {
console.log(this === window);
}
}
现在，我们有一个simpleFunction属性指向simpleFunction函数，同样添加另一个属性调用anotherFunction函数方法。
如果调用user.simpleFunction()，得到输出：
“Simple function call”
false
为什么会这样呢？因为simpleFunction()现在是user对象的一个属性，所以this指向这个user对象而不是全局对象。
当我们调用user.anotherFunction，也是一样的结果。this关键字指向user对象。所以，console.log(this === window);应该返回false:
false
再来，以下操作会返回什么呢？
let myFunction = user.anotherFunction;
myFunction();
现在，得到结果：
true
所以这又发生了什么？在这个例子中，我们发起普通函数调用。正如之前所知，如果一个方法以普通函数方式执行，那么this关键字将指向全局对象（在这个例子中是window对象）。所以console.log(this === window);输出true。
再看一个例子：
var john = {
name: 'john',
yearOfBirth: 1990,
calculateAge: function() {
console.log(this);
console.log(2016 - this.yearOfBirth);
function innerFunction() {
console.log(this);
}
innerFunction();
}
}
调用john.calculateAge()会发生什么呢？
{name: "john", yearOfBirth: 1990, calculateAge: ƒ}
26
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
calculateAge函数内部， this 指向 john对象，但是，在innerFunction函数内部，this指向全局对象（本例中为window），有些人认为这是JS的bug，但是规则告诉我们无论何时一个普通函数被调用时，那么this将指向全局对象。
...
我所学的JavaScript函数也是一种特殊的对象，每个函数都有call, apply, bind方法。这些方法被用来设置函数的执行上下文的this值。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.displayName = function() {
console.log(`Name: ${this.firstName} ${this.lastName}`);
}
}
创建两个实例：
let person = new Person("John", "Reed");
let person2 = new Person("Paul", "Adams");
调用：
person.displayName();
person2.displayName();
结果：
Name: John Reed
Name: Paul Adams
call：
person.displayName.call(person2);
上面所做的事情就是设置this的值为person2对象。因此，
Name: Paul Adams
apply：
person.displayName.apply([person2]);
得到：
Name: Paul Adams
call，apply唯一的区别就是参数的传递形式，apply应该传递一个数组，call则应该单独传递参数。
我们用bind来做同样的事情，bind返回一个新的方法，这个方法中的this指向传递的第一个参数。
let person2Display = person.displayName.bind(person2);
调用person2Display，得到Name: Paul Adams结果。
...
箭头函数
ES6中，有一个新方法定义函数。如下：
let displayName = (firstName, lastName) => {
console.log(Name: ${firstName} ${lastName});
};
不像通常的函数，箭头函数没有他们自身的this关键字。他们只是简单的使用写在函数里的this关键字。他们有一个this词法变量。
ES5：
var box = {
color: 'green', // 1
position: 1, // 2
clickMe: function() { // 3
document.querySelector('body').addEventListener('click', function() {
var str = 'This is box number ' + this.position + ' and it is ' + this.color; // 4
alert(str);
});
}
}
如果调用：
box.clickMe()
弹出框内容将是This is box number undefined and it is undefined'.
我们一步一步来分析是怎么回事。在//1和//2行，this关键字能访问到color和position属性因为它指向box对象。在clickMe方法内部，this关键字能访问到color和position属性因为它也指向box对象。但是，clickMe方法为querySelector方法定义了一个回调函数，然后这个回调函数以普通函数的形式调用，所以this指向全局对象而非box对象。当然，全局对象没有定义color和position属性，所以这就是为什么我们得到了undefined值。
我们可以用ES5的方法来修复这个问题：
var box = {
color: 'green',
position: 1,
clickMe: function() {
var self = this;
document.querySelector('body').addEventListener('click', function() {
var str = 'This is box number ' + self.position + ' and it is ' + self.color;
alert(str);
});
}
}
添加 var self = this，创建了一个可以使用指向box对象的this关键字的闭包函数的工作区。我们仅仅只需要在回调函数内使用self变量。
调用：
box.clickMe();
弹出框内容This is box number 1 and it is green。
怎么使用箭头函数能够达到上述效果呢？我们将用箭头函数替换点击函数的回调函数。
var box = {
color: 'green',
position: 1,
clickMe: function() {
document.querySelector('body').addEventListener('click', () => {
var str = 'This is box number ' + this.position + ' and it is ' + this.color;
alert(str);
});
}
}
箭头函数的神奇之处就是共享包裹它的this词法关键字。所以，本例中外层函数的this共享给箭头函数，这个外层函数的this关键字指向box对象，因此，color和position属性将是有正确的green和1值。
再来一个：
var box = {
color: 'green',
position: 1,
clickMe: () => {
document.querySelector('body').addEventListener('click', () => {
var str = 'This is box number ' + this.position + ' and it is ' + this.color;
alert(str);
});
}
}
oh！现在又弹出了‘This is box number undefined and it is undefined’.。为什么？
click事件监听函数闭包的this关键字共享了包裹它的this关键字。在本例中它被包裹的箭头函数clickMe，clickMe箭头函数的this关键字指向全局对象，本例中是window对象。所以this.color和this.position将会是undefined因为window对象没有position和color属性。
我想再给你看个在很多情况下都会有帮助的map函数，我们定义一个Person构造函数方法如下：
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.displayName = function() {
console.log(`Name: ${this.firstName} ${this.lastName}`);
}
}
Person的原型上添加myFriends方法：
Person.prototype.myFriends = function(friends) {
var arr = friends.map(function(friend) {
return this.firstName + ' is friends with ' + friend;
});
console.log(arr);
}
创建一个实例：
let john = new Person("John", "Watson");
调用john.myFriends(["Emma", "Tom"])，结果：
["undefined is friends with Emma", "undefined is friends with Tom"]
本例与之前的例子非常相似。myFriends函数体内有this关键字指向回调对象。但是，map闭包函数内是一个普通函数调用。所以map闭包函数内this指向全局对象，本例中为window对象，因此this.firstNameundefined。现在，我们试着修复这个情况。
- 在
myFriends函数体内指定this为其它变量如self，以便map函数内闭包使用它。
Person.prototype.myFriends = function(friends) {
// 'this' keyword maps to the calling object
var self = this;
var arr = friends.map(function(friend) {
// 'this' keyword maps to the global object
// here, 'this.firstName' is undefined.
return self.firstName + ' is friends with ' + friend;
});
console.log(arr);
}
map闭包函数使用bind。
Person.prototype.myFriends = function(friends) {
// 'this' keyword maps to the calling object
var arr = friends.map(function(friend) {
// 'this' keyword maps to the global object
// here, 'this.firstName' is undefined.
return this.firstName + ' is friends with ' + friend;
}.bind(this));
console.log(arr);
}
调用bind会返回一个map回调函数的副本，this关键字映射到外层的this关键字，也就是是调用myFriends方法，this指向这个对象。
- 创建
map回调函数为箭头函数。
Person.prototype.myFriends = function(friends) {
var arr = friends.map(friend => `${this.firstName} is friends with ${friend}`);
console.log(arr);
}
现在，箭头函数内的this关键字将共享未曾包裹它的词法作用域，也就是说实例myFriends。
所有以上解决方案都将输出结果：
["John is friends with Emma", "John is friends with Tom"]
...
在这一点上，我希望我已经设法使this关键字概念对您来说有点平易近人。在本文中，我分享了我遇到的一些常见情况以及如何处理它们，但当然，在构建更多项目时，您将面临更多情况。我希望我的解释可以帮助您在接近this关键字绑定主题时保持坚实的基础。如果您有任何问题，建议或改进，我总是乐于学习更多知识并与所有知名开发人员交流知识。请随时写评论，或给我留言！
