深度解析JavaScript的this关键字

者｜Austin Tackaberry

译者｜无明

出处丨前端之巅

这篇文章通过简单的术语和一个真实的例子解释了 this 是什么以及为什么说它很有用。

你的 this

我发现，很多教程在解释 JavaScript 的 this 时，通常会假设你拥有 Java、C++ 或 Python 等面向对象编程语言的背景。这篇文章主要面向那些对 this 没有先入之见的人。我将尝试解释什么是 this 以及为什么它很有用。

或许你迟迟不肯深入探究 this，因为它看起来很奇怪，让你心生畏惧。你之所以使用它，有可能仅仅是因为 StackOverflow 说你需要在 React 用它来完成一些事情。

在我们深入了解它的真正含义以及为什么要使用它之前，我们首先需要了解函数式编程和面向对象编程之间的区别。

函数式编程与面向对象编程

你可能知道也可能不知道，JavaScript 具有函数和面向对象的构造，你可以选择关注其中一个或两者兼而有之。

在我的 JavaScript 之旅的早期，我一方面拥抱函数式编程，一方面像避免瘟疫一样排斥面向对象编程。我对面向对象关键字 this 不甚了解。其中的一个原因是我不明白它存在的必要性。在我看来，完全可以不依赖 this 就可以完成所有的事情。

在某种程度上，我的看法是对的。

你可能只关注其中一种范式而从来不去了解另外一种，作为一名 JavaScript 开发者，你的局限性就体现在这里。为了说明函数式编程和面向对象编程之间的差别，我将使用一组 Facebook 好友数据作为示例。

假设你正在构建一个用户登录 Facebook 的 Web 应用，在登录后显示一些 Facebook 好友的数据。你需要访问 Facebook 端点来获取好友的数据，可能包含一些信息，例如 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts。

const data = [
 {
 firstName: 'Bob',
 lastName: 'Ross',
 username: 'bob.ross', 
 numFriends: 125,
 birthday: '2/23/1985',
 lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
 },
 ...
]

你从（臆造的）Facebook API 获得上面的数据。现在，你需要转换它们，让它们符合项目需要的格式。假设你要为每个用户的朋友显示以下内容：

它们的名字，格式为$ {firstName} $ {lastName}；
三篇随机的帖子；
从他们生日起到现在的天数。

函数式方法

如果使用函数式方法，就是将整个数组或数组的每个元素传给一个返回所需操作数据的函数：

const fullNames = getFullNames(data)
// ['Ross, Bob', 'Smith, Joanna', ...]

你从原始数据开始（来自 Facebook API），为了将它们转换为对你有用的数据，你将数据传给一个函数，这个函数将输出你可以在应用程序中显示给用户的数据。

你也可以通过类似的方式获取三个随机帖子并计算朋友生日至今的天数。

函数式方法就是指接受原始数据，将数据传给一个或多个函数，并输出对你有用的数据。

面向对象方法

对于那些刚接触编程和学习 JavaScript 的人来说，面向对象方法可能会更难掌握。面向对象是指你将每个朋友转换为对象，对象包含了用于生成你所需内容的一切。

你可以创建包含 fullName 属性的对象，以及 getThreeRandomPosts 和 getDaysUntilBirthday 函数。

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 }
 };
}
const objectFriends = data.map(initializeFriend)
objectFriends[0].getThreeRandomPosts() 
// Gets three of Bob Ross's posts

面向对象方法是为你的数据创建对象，这些对象包含了状态和用于生成对你和你的项目有用的数据的信息。

这与 this 有什么关系？

你可能没有想过会写出类似 initializeFriend 这样的东西，你可能会认为它很有用。你可能还会注意到，它其实并非真正的面向对象。

getThreeRandomPosts 或 getDaysUntilBirthday 方法之所以有用，主要是因为闭包。因为使用了闭包，所以在 initializeFriend 返回之后，它们仍然可以访问 data。

假设你写了另一个方法，叫 greeting。请注意，在 JavaScript 中，方法只是对象的一个属性，这个属性的值是一个函数。我们希望 greeting 可以做这些事情：

function initializeFriend(data) {
 return {
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from data.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use data.birthday to get the num days until birthday
 },
 greeting: function() {
 return `Hello, this is ${fullName}'s data!`
 }
 };
}

这样可以吗？

不行！

新创建对象的所有东西都可以访问 initializeFriend 的变量，但对象本身的属性或方法不行。当然，你可能会问：

难道你不能用 data.firstName 和 data.lastName 来返回 greeting 吗？

当然可以。但如果我们还想在 greeting 中包含朋友生日至今的天数，该怎么办？我们必须以某种方式从 greeting 中调用 getDaysUntilBirthday 方法。

是时候让 this 上场了！

那么，this 是什么

在不同的情况下，this 代表的东西也不一样。默认情况下，this 指向全局对象（在浏览器中，就是 window 对象）。但光知道这点对我们并没有太大帮助，对我来说有用的是 this 的这条规则：

如果 this 被用在一个对象的方法中，并且这个方法在对象的上下文中调用，那么 this 就指向这个对象本身。

你会问：“在对象的上下文中调用……这又是什么意思”？

别担心，稍后我们会解释这个。

因此，如果我们想在 greeting 中调用 getDaysUntilBirthday，可以直接调用 this.getDaysUntilBirthday，因为在这种情况下，this 指向对象本身。

注意：不要在全局作用域或在另一个函数作用域内的常规 ole 函数中使用 this！this 是一个面向对象的构造。因此，它只在对象（或类）的上下文中有意义！

让我们重构 initializeFriend，让它使用 this：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays = this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 }
 };
}

现在，在执行完 intializeFriend 后，这个对象的所有东西都限定在对象本身。我们的方法不再依赖于闭包，它们将使用对象本身包含的信息。

这是 this 的一种使用方式，现在回到之前的问题：为什么说 this 因上下文不同而不同？

有时候，你希望 this 可以指向不一样的东西，比如事件处理程序就是一个很好的例子。假设我们想在用户点击链接时打开朋友的 Facebook 页面。我们可能会在对象中添加一个 onClick 方法：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const numDays = this.getDaysUntilBirthday() 
 return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

请注意，我们向对象添加了 username，让 onFriendClick 可以访问它，这样我们就可以在新窗口中打开朋友的 Facebook 页面。现在编写 HTML：

<button id="Bob_Ross">
 <!-- A bunch of info associated with Bob Ross -->
</button>

然后是 JavaScript：

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

在上面的代码中，我们为 Bob Ross 创建了一个对象。我们获得与 Bob Ross 相关的 DOM 元素。现在我们想要调用 onFriendClick 方法来打开 Bob 的 Facebook 页面。应该没问题吧？

不行！

什么地方出了问题？

请注意，我们为 onclick 处理程序选择的函数是 bobRossObj.onFriendClick。看到问题所在了吗？如果我们像这样重写它：

bobRossDOMEl.addEventListener("onclick", function() {
 window.open(`https://facebook.com/${this.username}`)
})

现在你看到问题所在了吗？当我们将 onclick 处理程序指定为 bobRossObj.onFriendClick 时，我们实际上是将 bobRossObj.onFriendClick 的函数作为参数传给了处理程序。它不再“属于”bobRossObj，也就是说 this 不再指向 bobRossObj。这个时候 this 实际上指向的是全局对象，所以 this.username 是 undefined 的。

是时候让 bind 上场了！

显式绑定 this

我们需要做的是将 this 显式绑定到 bobRossObj。我们可以使用 bind 来实现：

const bobRossObj = initializeFriend(data[0])
const bobRossDOMEl = document.getElementById('Bob_Ross')
bobRossObj.onFriendClick = bobRossObj.onFriendClick.bind(bobRossObj)
bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)

之前，this 是基于默认规则设置的。通过使用 bind，我们在 bobRossObj.onFriendClick 中将 this 的值显式设置为对象本身，也就是 bobRossObj。

到目前为止，我们已经知道为什么 this 很有用以及为什么有时候需要显式绑定 this。接下来我们要讨论的最后一个主题是箭头函数。

箭头函数

你可能已经注意到，箭头函数像是一个时髦的新事物。人们似乎很喜欢它们，因为它们简洁而优雅。你可能已经知道它们与一般函数略有不同，但不一定非常清楚这些区别究竟是什么。

或许箭头函数的不同之处在于：

在箭头函数内部，无论 this 处于什么位置，它指的都是相同的东西。

让我们用 initializeFriend 示例解释一下。假设我们想在 greeting 中添加一个辅助函数：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 function getLastPost() {
 return this.lastTenPosts[0]
 }
 const lastPost = getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

这样可以吗？如果不行，要怎样修改才行？

这样当然是不行的。因为 getLastPost 不是在对象的上下文中调用的，所以 getLastPost 中的 this 会回退到默认规则，即指向全局对象。

“在对象的上下文中调用”可能是一个比较含糊的概念。要确定一个函数是否是在“对象的上下文中”被调用，最好的办法是看一下函数是如何被调用的，以及是否有对象“附加”在函数上。

让我们来看看执行 bobRossObj.onFriendClick() 时会发生什么：“找到 bobRossObj 对象的 onFriendClick 属性，调用分配给这个属性的函数”。

再让我们来看看执行 getLastPost() 时会发生什么：”调用一个叫作 getLastPost 的函数”。有没有注意到，这里并没有提及任何对象？

现在来测试一下。假设有一个叫作 functionCaller 的函数，它所做的事情就是调用其他函数：

functionCaller(fn) {
 fn()
}

如果我们这样做会怎样：functionCaller(bobRossObj.onFriendClick)？可不可以说 onFriendClick 是“在对象的上下文中”被调用的？this.username 的定义存在吗？

让我们来看一下：“找到 bobRossObj 对象的 onFriendClick 属性。找到这个属性的值（恰好是一个函数），将它传给 functionCaller，并命名为 fn。现在，执行名为 fn 的函数”。请注意，函数在被调用之前已经从 bobRossObj 对象中“分离”，因此不是“在对象 bobRossObj 的上下文中”调用，所以 this.username 是 undefined 的。

让箭头函数来救场：

function initializeFriend(data) {
 return {
 lastTenPosts: data.lastTenPosts,
 birthday: data.birthday,
 username: data.username, 
 fullName: `${data.firstName} ${data.lastName}`,
 getThreeRandomPosts: function() {
 // get three random posts from this.lastTenPosts
 },
 getDaysUntilBirthday: function() {
 // use this.birthday to get the num days until birthday
 },
 greeting: function() {
 const getLastPost = () => {
 return this.lastTenPosts[0]
 }
 const lastPost = getLastPost() 
 return `Hello, this is ${this.fullName}'s data!
 ${this.fullName}'s last post was ${lastPost}.`
 },
 onFriendClick: function() {
 window.open(`https://facebook.com/${this.username}`)
 }
 };
}

箭头函数是在 greeting 中声明的。我们知道，当我们在 greeting 中使用 this 时，它指向对象本身。因此，箭头函数中的 this 指向的对象就是我们想要的。

英文原文：

https://medium.freecodecamp.org/a-deep-dive-into-this-in-javascript-why-its-critical-to-writing-good-code-7dca7eb489e7

his理解：

1在函数/方法里边this代表调用该函数/方法的当前对象

2 在事件中, 代表元素节点对象

divnode.onclick = function(){
    alert(this.value);
}

3 代表window

4 可以任意代表其他对象

在call和apply使用的时候, 可以任意设置被执行函数内部this的代表

全局变量是window对象的属性

var a = 100;
var b = 200;
var c = 300;
var d = 400;
alert(window.a)
alert(window.b)
alert(window.c)
alert(window.d)

函数的上下文(context)

所谓的上下文就是指函数里面的this是谁。就说"函数的上下文是什么"

函数中的this是谁, 看这个函数是如何调用的, 而不是看这个函数如何定义的。

规则1：函数直接圆括号调用, IIFE调用, 上下文是window对象; 对象打点调用obj.fn(), 此时this是obj

直接两个字, 表示这个函数代号之前, 没有任何标识符, 没有小圆点, 没有方括号。通常从数组、对象中"提"出函数的操作(把函数赋给变量)：

在obj对象中定义一个函数，叫fun, 这个是obj的属性：

var a = 888;
var obj = {
a : 100,
fun : function(){
alert(this.a);
}
}

如直接对象打点调用函数：此时弹出100, 说明函数上下文是obj对象本身。

obj.fun();

但如果这个函数被一个变量接收(让变量直接指向这个对象的方法)

var fn = obj.fun;
fn(); //这个叫()直接运行

然后调用, 函数的this将是window对象, this.a就是访问全局的a变量是888

注意: 所有IIFE, 都属于直接调用范围, 里面的this都是window。

不管IIFE写的有多深, 不管所在的环境多复杂, 上下文一律是window对象。

比如下面obj对象中的b, 是IIFE：

var a = 888;
var obj = {
a : 100,
b : (function(){
alert(this.a);
})() //IIFE 立即调用 代表this window对象
}
obj.b; //888
var xiaoming = {
name :"小明",
age : 23,
chengwei: (function(){
console.log(this.age); //undefined 代表window对象
return this.age >= 18 ? "先生" : "小朋友"
})() //IIFE 立即调用
}
alert(xiaoming.name + xiaoming.chengwei)

规则2：定时器直接调用函数, 上下文是window对象

var a = 100;
function fn(){
console.log(this.a++);
}
setInterval(fn,1000)

注意临门一脚谁踢的, 是谁最终调用那个函数, 比如：

var a = 100;
var obj = {
a : 200,
fn : function(){
console.log(this.a++); //100 102 103 104
}
}
setInterval(obj.fn, 1000); //obj.fn没有()执行，是定时器调用的, 上下文依然是window对象
var a = 100;
var obj = {
a : 200,
fn : function(){
console.log(this.a++); //200 201 202 203 204
}
}
setInterval(function(){
obj.fn(); //obj.fn()直接调用，上下文的this是obj
}, 1000);

规则3：DOM事件处理函数的this, 指的是触发事件的这个元素

<div id="box"></div>
var box = document.getElementById("box");
box.onclick = function(){
var self = this; //备份this
setTimeout(function(){
//这里this指向window，所以先在外面备份this，再用
self.style.background = 'red';
},1000)
}

规则4：call()和apply()设置函数的上下文

<div id="box"></div>
var oBox = document.getElementById('box');
function fun(){
console.log(this);
this.style.backgroundColor = 'red';
}
//call和apply作用都一样，有两个作用：
//1、执行fun函数
//2、改变fun函数的this指向div
fun.call(oBox)
fun.apply(oBox)

规则5：从对象或数组中枚举的函数, 上下文是这个对象或数组

来看一个最基本的模型, 就是对象中的方法, 方法中出现this。

如果调用是：对象.方法(), 此时函数中this就是指向这个对象。

var obj = {
a : 100,
b : function(){
alert(this.a)
}
}
obj.b(); //100

数组也一样，如果一样函数是从数组中枚举的，加圆括号执行，数组[0](); 此时上下文就是数组

var arr = [
"A",
"B",
function(){
alert(this.length)
}
]
arr[2](); //输出3，这写法是从数组中枚举出来的，所以是数组在调用函数。
var f = arr[2];
f(); //0 全局没有length长度
console.log(arr)

规则6：用new调用函数, new fun(), 此时this是秘密新创建的空白对象

function fun(){
alert("我调用");
}
var obj = new fun();
console.log(obj)

function People(name,age,sex){
//构造函数，可以称为一个“类”，描述的是一个类对象需要拥有的属性
this.name = name; //this执行new实例化新对象
this.age = age;
this.sex = sex;
}
//构造函数的实例，也可以称为“类的实例”，就相当于按照类的要求，实例化了一个个人
var xiaoming = new People("小明",12,"男");
var xiaohong = new People("小红",13,"女");
var xiaogangpao = new People("小钢炮",16,"女");
console.log(xiaoming)
console.log(xiaohong)
console.log(xiaogangpao)

new是一个动词, 表示产生"新"的, 会发现, 的确这个函数产生了新的对象。

结论：当用new调用一个函数时, 会发生4四件事(4步走)

1) 函数内部会创建一个新的空对象"{}"

2) 将构造函数的作用域赋值给新对象(因此this就指向这个新的空对象)

3) 执行构造函数中的代码(为这个新的空对象添加属性)

4) 函数执行完毕后, 将这个对象返回(return)到外面被接收。(函数将把自己的上下文返回给这个对象)

函数的调用方式上下文

fun() window

obj.fun() obj

box.onclick = fun box

setInterval(fun,1000) window

setTimeout(fun,1000) window

array[8]() array

new fun() 秘密创建的新对象

规则1：直接圆括号调用fn(), 此时this是window

规则2：对象打点调用obj.fn()，此时this是obj

规则3：数组中枚举函数调用arr[3](), 此时this是arr

规则4：定时器调用函数setInterval(fn , 10), 此时this是window

规则5：按钮的事件监听oBtn.onclick = fn, 此时this是oBtn

规则6：call和allpay可以指定，fn.call(obj), 此时this是obj

规则7：用new调用函数，new fn(), 此时this是秘密新创建的空白对象。

实例1:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var arr=[1,2,3,4];
arr.a=12;
arr.show=function ()
{
alert(this.a); //12, this指的是arr数组
};
/* 类似于以下用法
var oDiv = document.getElementById("op");
oDiv.onclick=function ()
{
alert(this);
};
*/
arr.show();
</script>
</head>
<body>
<div id="op">层内容</div>
</body>
</html>

实例2：

实际上自定义的函数是属于window对象下的成员方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.show=function ()
{
alert(this);
};
show();
</script>
</head>
<body>
</body>
</html>

注意:不能在系统对象中随意附加方法、属性，否则会覆盖已有方法、属性

实例3：

下来，笔者将按照以下目录对this进行阐述：

this是什么？
this指向this在全局范围内this在对象的构造函数内this在对象的方法内this在简单函数内this在箭头函数内this在一个事件侦听器内
this绑定规则默认绑定隐式绑定显示绑定（this修改）优先级
箭头函数

1. this是什么？

this是JavaScript的一个关键字，但它时常蒙着面纱让人无法捉摸，许多对this不明就里的同学，常常会有这样的错误认知：

this在函数内指向函数自身 function foo(num){ console.log("foo: " + num); //记录foo被调用次数 this.count++; } foo.count = 0; for(let i=0; i<10; i++){ if(i > 5){ foo(i); } } console.log(foo.count); // 0， this并没有指向foo函数，foo.count没有进行任何操作
this在函数内指向函数的作用域 function foo(){ var a = 2; this.bar(); } function bar(){ console.log(this.a); } foo();// undefined, window对象没有bar这一属性

2. this指向

this的指向取决于他所处的环境. 大致上，可以分为下面的6种情况:

this在全局范围内
this在对象的构造函数内
this在对象的方法内
this在一个简单的函数内
this在箭头函数内
this在一个事件侦听器内

2.1 this在全局范围内

this在全局范围内绑定什么呢？这个相信只要学过JS，应该都知道答案。如果不知道，同学真的应该反思自己的学习态度和方法是否存在问题了。话不多说，直接上代码，一探究竟，揭开this在全局范围下的真面目：

console.log(this); // Window

不出意外，this在全局范围内指向window对象（）。通常, 在全局环境中, 我们很少使用this关键字, 因此对它也没那么在意. 让我们继续看下一个环境.

2.2 this在对象的构造函数内

当我们使用new创建构造函数的实例时会发生什么呢？以这种方式调用构造函数会经历以下四个步骤：

创建一个空对象；
将构造函数的作用域赋给新对象（this指向了这个新对象），继承函数的原型；
执行构造函数中的代码；
返回新对象。

看完上面的内容，大家想必也知道this在对象的构造函数内的指向了吧！当你使用new关键字创建一个对象的新的实例时, this关键字指向这个实例 .

举个栗子：

function Human (age) {
    this.age = age;
}
let greg = new Human(22);
let thomas = new Human(24);

console.log(greg); // this.age = 22
console.log(thomas); // this.age = 24

// answer
Person { age:22}
Person { age:24}

2.3 this在对象方法内

方法是与对象关联的函数的通俗叫法, 如下所示:

let o = {
    sayThis(){
        console.log(this);
    }
}

如上所示，在对象的任何方法内的this都是指向对象本身 .

好了，继续下一个环境！

2.4 this在简单函数内

可能看到这里，许多同学心里会有疑问，什么是简单函数？

其实简单函数大家都很熟悉，就像下面一样，以相同形式编写的匿名函数也被认为是简单函数（非箭头函数）。

function hello(){
    console.log("hello"+this);
}

这里需要注意，在浏览器中，不管函数声明在哪里，匿名或者不匿名，只要不是直接作为对象的方法，this指向始终是window对象（除非使用call,apply,bind修改this指向）。

举个栗子说明一下：

// 显示函数，直接定义在sayThis方法内，this指向依旧不变
function simpleFunction() {
    console.log(this);
}

var o = {
    sayThis() {
        simpleFunction();
    }
}

simpleFunction(); // Window
o.sayThis(); // Window


// 匿名函数
var o = {
    sayThis(){
        (function(){consoloe.log(this);})();
    }
} 
o.sayThis();// Window

对于初学者来说，this在简单函数内的表现时常让他们懵逼不已，难道this不应该指向对象本身？这个问题曾经也出现在我的脑海里过，没错，在写代码时我也踩过这个坑。

通常的，当我们要在对象方法内调用函数，而这个函数需要用到this时，我们都会创建一个变量来保存对象中的this的引用. 通常, 这个变量名称叫做self或者that。具体说下所示：

const o = {
    doSomethingLater() {
        const self = this;
        setTimeout(function() {
            self.speakLeet();
        }, 1000);
    },
    speakLeet() {
        console.log(`1337 15 4W350M3`);
    }
}

o.doSomethingLater(); // `1337 15 4W350M3`

心细的同学可能已经发现，这里的简单函数没有将箭头函数包括在内，那么下一个环境是什么想必也能猜到啦，那么现在进入下一个环境，看看this指向什么。

2.5 this在箭头函数内

和简单函数表现不太一样，this在箭头函数中总是跟它在箭头函数所在作用域的this一样(在它直接作用域). 所以, 如果你在对象中使用箭头函数, 箭头函数中的this总是指向这个对象本身, 而不是指向Window.

下面我们使用箭头函数，重写一下上面的案例：

const o = {
    doSomethingLater() {
        setTimeout(() => this.speakLeet(), 1000);
    },
    speakLeet() {
        console.log(`1337 15 4W350M3`);
    }
}
o.doSomethingLater(); // `1337 15 4W350M3`

最后，让我们来看看最后一种环境 - 事件侦听器.

2.6 this在事件侦听器内

在事件侦听器内, this被绑定的是触发这个事件的元素:

let button = document.querySelector('button');

button.addEventListener('click', function() {
    console.log(this); // button
});

3. this绑定规则

事实上，只要记住上面this在不同环境的绑定值，足以应付大部分工作。然而，好学的同学总是会忍不住想说，为什么呢？对，为什么this在这些情况下绑定这些值呢？学习，我们不能只知其然，而不知所以然。所以，现在就让我们来探寻，this值获取的真相吧。

现在，让我们回忆一下，在讲什么是this的时候，我们说到“this的绑定取决于他所处的环境”。这句话其实不是十分准确，准确的说，this不是编写时绑定，而是运行时绑定。它依赖于函数调用的上下文条件。this绑定和函数声明的位置无关，反而和函数被调用的方式有关。

当一个函数被调用时，会建立一个活动记录，也称为执行环境。这个记录包含函数是从何处（call-stack）被调用的，函数是如何被调用的，被传递了什么参数等信息。这个记录的属性之一，就是在函数执行期间将被使用的this引用。this实际上是在函数被调用时建立的一个绑定，它指向什么是完全由函数被调用的调用点来决定的。

仅仅是规则

现在我们将注意力转移到调用点如何决定在函数执行期间this指向哪里。

你必须考察call-site并判定4种规则中的哪一个适用。我们将首先独立的解释一下这4种规则中的每一种，之后我们来展示一下如果有多种规则可以适用调用点时，它们的优先级。

3.1 默认绑定规则

第一种规则来源于函数调用的最常见的情况：独立函数调用。可以认为这种this规则是在没有其他规则适用时的默认规则。我们给它一个称呼“默认绑定”.

现在来看这段代码：

function foo(){
    console.log(this); 
}
var a = 2;
demo(); // 2

当foo()被调用时，this.a解析为我们的全局变量a。为什么？因为在这种情况下，对此方法调用的this实施了默认绑定，所以使this指向了全局对象。

在我们的代码段中，foo()是被一个直白的，毫无修饰的函数引用调用的。没有其他的我们将要展示的规则适用于这里，所以默认绑定在这里适用。

如果strict mode在这里生效，那么对于默认绑定来说全局对象是不合法的，所以this将被设置为undefined。

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

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

微妙的是，即便所有的this绑定规则都是完全基于调用点，如果foo()的内容没有在strint mode下执行，对于默认绑定来说全局对象是唯一合法的；foo()的call-site的strict mode状态与此无关。

function foo(){
    console.log(this.a); 
}
var a = 1;
(function(){
	'use strict';
	foo(); // 1
})();

注意：在代码中故意混用strict mode和非strict mode通常是让人皱眉头的。你的程序整体可能应当不是 Strict 就是非Strict。然而，有时你可能会引用与你的 Strict 模式不同的第三方包，所以对这些微妙的兼容性细节要多加小心。

3.2 隐式绑定

另一种要考虑的规则是：调用点是否有一个环境对象（context object），也称为拥有者（owning）或容器（containing）对象。

让我们来看这段代码：

function foo() {
    console.log(this.a);
}
let o = {
    a: 2,
    foo,
}
o.foo(); // 2

这里，我们注意到foo函数被声明然后作为对象o的方法，无论foo()是否一开始就在obj上被声明，还是后来作为引用添加（如上面代码所示），都是这个函数被obj所“拥有”或“包含”。这里，调用点使用obj环境来引用函数，所以可以说 obj对象在函数被调用的时间点上“拥有”或“包含”这个函数引用。

当一个方法引用存在一个环境对象时，隐式绑定规则会说：是这个对象应当被用于这个函数调用的this绑定。

只有对象属性引用链的最后一层是影响调用点的。比如：

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

var obj1 = {
    a:2,
    obj2:obj2
};
var obj2 = {
    a:42,
    foo:foo
};
obj1.obj2.foo(); // 42

隐式绑定的隐患

当一个隐含绑定丢失了它的绑定，这通常意味着它会退回到默认绑定，根据strict mode的状态，结果不是全局对象就是undefined。

下面来看这段代码：

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

var obj = {
    a:2,
    foo
};
var bar = obj.foo;
var a = "Global variable";
bar(); // "Global variable"

尽管bar似乎是obj.foo的引用，但实际上它只是另一个foo自己的引用而已。另外，起作用的调用点是bar()，一个直白，毫无修饰的调用，因此默认绑定适用于这里。

这种情况发生的更加微妙，更常见，更意外的方式，是当我们考虑传递一个回调函数时：

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

function doFoo(fn){
	fn();
}

var obj = {
    a:2,
    foo,
};
var a = "Global variable";
dooFoo(obj.foo); // "Global variable"

参数传递仅仅是一种隐含的赋值，而且因为我们在传递一个函数，它是一个隐含的引用赋值，所以最终结果和我们前一个代码段一样。同样的，语言内建，如setTimeout也一样，如下所示

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

var obj = {
    a:2,
    foo,
};
var a = "Global variable";
setTimeout(obj.foo, 100); // "Global variable"

把这个粗糙的setTimeout()假想实现当做JavaScript环境内建的实现的话：

function setTimeout(fn, delay){
    // 等待delay毫秒
    fn();
}

正如我们看到的，隐含绑定丢失了它的绑定是十分常见的，不管哪一种意外改变this的方式，你都不能真正地控制你的回调函数引用将如何被执行，所以你（还）没有办法控制调用点给你一个故意的绑定。但是我们可以使用显示绑定强行固定this。

3.3 显示绑定

我们看到隐含绑定，需要我们不得不改变目标对象使它自身包含一个对函数的引用，而后使用这个函数引用属性来间接地（隐含地）将this绑定到这个对象上。

但是，如果你想强制一个函数调用使用某个特定对象作为this绑定，而不在这个对象上放置一个函数引用属性呢？

js有提供call()、apply()方法，ES5中也提供了内置的方法 Function.prototype.bind,可以引用一个对象时进行强制绑定调用。

考虑这段代码：

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

通过foo.call(..)使用明确绑定来调用foo，允许我们强制函数的this指向obj。

如果你传递一个简单原始类型值（string，boolean，或 number类型）作为this绑定，那么这个原始类型值会被包装在它的对象类型中（分别是new String(..)，new Boolean(..)，或new Number(..)）。这通常称为“boxing（封箱）”。

注意：就this绑定的角度讲，call(..)和apply(..)是完全一样的。它们确实在处理其他参数上的方式不同，但那不是我们当前关心的。

单独依靠call和apply，仍然可能出现函数“丢失”自己原本的this绑定，或者被第三方覆盖等问题。

但有一个技巧可以避免出现这些问题

考虑这段代码：

function foo(){
    console.log(this.a);
}
var obj = {
	a:2
};
var bar = function(){
	foo.call(obj);
}
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); // 2

我们创建了一个函数bar()，在它的内部手动调用foo.call(obj)，由此强制this绑定到obj并调用foo。无论你过后怎样调用函数bar，它总是手动使用obj调用foo。这种绑定即明确又坚定，该方法被开发者称为 硬绑定(显示绑定的变种)（hard binding）

用硬绑定将一个函数包装起来的最典型的方法，是为所有传入的参数和传出的返回值创建一个通道：

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}
var obj = {
    a:2
};
var bar = function() {
    return foo.apply(obj, arguments);
}
var b = bar(3);
console.log(b); //  5

另一种表达这种模式的方法是创建一个可复用的帮助函数:

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}

function bind(fn, obj){
    return function(){
        return fn.apply(obj, arguments);
    };
}

var obj = { a:2};
var bar = bind(foo, obj);
var b = bar(3);
console.log(b); // 5

由于硬绑定是一个如此常用的模式，它已作为ES5的内建工具提供，即前文提到的Function.prototype.bind：

function foo(something){
    console.log(this.a, something);
    return this.a + something;
}
var obj = { a:2};
var bar = foo.bind(obj);
var b = bar();
cobsole.log(b); // 5

bind(..)返回一个硬编码的新函数，它使用你指定的this环境来调用原本的函数。

注意：在ES6中，bind(..)生成的硬绑定函数有一个名为.name的属性，它源自于原始的目标函数（target function）。举例来说：bar = foo.bind(..)应该会有一个bar.name属性，它的值为"bound foo"，这个值应当会显示在调用栈轨迹的函数调用名称中。

3.4new 绑定

第四种也是最后一种this绑定规则

当在函数前面被加入new调用时，也就是构造器调用时，下面这些事情会自动完成：

一个全新的对象会凭空创建（就是被构建）
这个新构建的对象会被接入原形链（[[Prototype]]-linked）
这个新构建的对象被设置为函数调用的this绑定
除非函数返回一个它自己的其他对象，这个被new调用的函数将自动返回这个新构建的对象。

考虑这段代码：

function foo(a){
    console.log(this.a);
}
var bar = new foo(2);
console.log(bar.a); // 2

通过在前面使用new来调用foo(..)，我们构建了一个新的对象并这个新对象作为foo(..)调用的this。 new是函数调用可以绑定this的最后一种方式，我们称之为 new绑定（new binding）。

3.5 优先级

new绑定
显示绑定
隐式绑定
默认绑定(严格模式下会绑定到undefined)

4. 箭头函数

箭头函数并非使用function关键字进行定义，而是通过所谓的“大箭头”操作符：=>，所以不会使用上面所讲解的this四种标准规范，箭头函数从封闭它的（function或global）作用域采用this绑定，即箭头函数会继承自外层函数调用的this绑定。

执行 fruit.call(apple)时，箭头函数this已被绑定，无法再次被修改。

function fruit(){
    return () => {
        console.log(this.name);
    }
}
var apple = {
    name: '苹果'
}
var banana = {
    name: '香蕉'
}
var fruitCall = fruit.call(apple);
fruitCall.call(banana); // 苹果

5. 小结

this是JavaScript的一个关键字，this不是编写时绑定，而是运行时绑定。它依赖于函数调用的上下文条件。this绑定和函数声明的位置无关，反而和函数被调用的方式有关。为执行中的函数判定this绑定需要找到这个函数的直接调用点。找到之后，4种规则将会以这个优先顺序施用于调用点：

被new调用？使用新构建的对象。
被call或apply（或 bind）调用？使用指定的对象。
被持有调用的环境对象调用？使用那个环境对象。
默认：strict mode下是undefined，否则就是全局对

与这4种绑定规则不同，ES6的箭头方法使用词法作用域来决定this绑定，这意味着它们采用封闭他们的函数调用作为this绑定（无论它是什么）。它们实质上是ES6之前的self = this代码的语法替代品。

在线咨询

上一篇：开发者尝鲜阿里小程序云平台，实操讲解如何打造智能小车！
下一篇：3种Javascript图片预加载的方法详解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

深度解析JavaScript的this关键字

你的 this

函数式编程与面向对象编程

函数式方法

面向对象方法

这与 this 有什么关系？

那么，this 是什么

显式绑定 this

箭头函数

1. this是什么？

2. this指向

2.1 this在全局范围内

2.2 this在对象的构造函数内

2.3 this在对象方法内

2.4 this在简单函数内

2.5 this在箭头函数内

2.6 this在事件侦听器内

3. this绑定规则

仅仅是规则

3.1 默认绑定规则

3.2 隐式绑定

3.3 显示绑定

3.4new 绑定

3.5 优先级

4. 箭头函数

5. 小结

您的项目需求