一篇文章带你了解JavaScript this关键字

与其他语言相比，this关键字在JavaScript中的行为略有不同。JavaScript中，this关键字引用其所属的对象。根据使用位置，它具有不同的值。

一、前言

方法中，this关键字引用其所属的对象。

this指的是全局对象在函数中。
this引用全局对象在函数中。
在严格模式下，this是未定义的在事件中。
this指的是接收事件的元素像call()和apply()这样的方法，可以将其引用到任何对象。

二、方法上下文

在对象方法中，this指代方法的user。

当调用user.getName()时，函数内部将this绑定到user对象：

例：

1
2<!DOCTYPE html>
3<html>
4<title>项目</title>
5
6<body style="background-color: aqua;">
7
8<p>在此示例中，<b> user </b>对象是<b> getName </b>方法的所有者：</p>
9
10<script>
11// 创建一个对象
12var user = {
13firstName: "基础教程",
14lastName: "baidu.com",
15age: 5,
16getName: function() {
17return this.firstName + " " + this.lastName;
18}
19};
20
21document.write(user.getName());
22</script>
23
24</body>
25</html>

这里user对象是所有者getName的方法。

1. 全局上下文

在全局执行上下文中（在任何函数之外），this无论是否处于严格模式下，都引用全局对象。

示例

1<!DOCTYPE html>
2<html>
3<title>项目</title>
4
5<body style="background-color: aqua;"> 
6
7<p>在全局执行上下文中(在任何函数之外)，这指的是全局对象:</p>
8
9<p>访问调试在您的浏览器按F12，并选择"控制台"在调试器菜单:</p>
10
11<script>
12//在Web浏览器中，窗口对象也是全局对象：
13console.log(this === window); // true
14
15a = 50;
16console.log(window.a); // 50
17
18this.b = "baidu.com";
19console.log(window.b) // "nhooo.com"
20console.log(b) // "nhooo.com"
21</script>
22
23</body>
24</html>

在浏览器窗口中，全局对象是[object Window]。

2. 函数上下文

在函数内部，this值取决于函数的调用方式。由于以下代码不在严格模式下，this因此默认为全局对象，即浏览器中的[object Window]。

1
2function myFunc() {
3return this;
4}

在严格模式，然而this的值是undefined。

1
2function myFunc() {
3"use strict";
4return this;
5}

因此，在严格模式下，如果执行上下文未定义它，则它将保持未定义状态。

三、this在DOM事件处理程序中

当一个函数用作事件处理程序时，this将被设置为触发事件的元素：

示例

1let btn = document.querySelector("button");
2
3btn.onclick = function() {
4this.style.display = "none";
5};

从内联事件处理程序调用代码时，会将this设置为放置监听器的元素：

<button onclick="this.style.display='none'">点击删除我</button>

四、显式函数绑定

call()和apply()方法是预定义的JavaScript方法。

它们都可以用于调用以另一个对象作为参数的对象方法。

1<script>
2function add(c, d) {
3return this.a + this.b + c + d;
4}
5
6var obj = {
7a: 5,
8b: 10
9};
10
11//第一个参数是用作
12//'this'，后续参数作为
13//函数调用中的参数
14document.writeln(add.call(obj, 5, 7)); // 27
15
16//第一个参数是要使用的对象
17// 'this'，第二个是一个数组
18//成员用作函数调用中的参数
19document.writeln(add.apply(obj, [10, 20])); // 45
20</script>

箭头函数（=>）

在箭头函数（=>）中，this始终指向它被创建时所处的词法作用域中的this。全局代码中，它将被设置为全局对象：

1
2<script>
3var globalObj = this;
4var myFunc = (() => this);
5
6document.write(myFunc() === globalObj);// true
7</script>

五、总结

本文基于JavaScript 基础，介绍了this 关键字，与其他语言相比，this关键字在JavaScript中的行为略有不同，对this ，包括（全局，函数，函数绑定）常见的用法进行了详细的讲解。希望能够通过文章的学习，让读者更好的认识，学习JavaScript。

-------------------********************************** End **********-------------**-----********-**********************************

往期精彩文章推荐：

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】：https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。