揭开`this`的神秘面纱：探索 JavaScript 中的上下文密钥(上)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍this关键字在 JavaScript 中的重要性。

this 关键字在 JavaScript 中具有非常重要的作用，它用于表示当前执行上下文对象，即当前函数所在的对象。

this 关键字可以用来访问对象的属性和方法，以及调用对象的方法和访问对象的属性。

this 关键字在 JavaScript 中具有以下重要性：

1. 确定当前对象的属性：在 JavaScript 中，可以使用 this 关键字来访问对象的属性。例如，this.name 可以用来访问对象的 name 属性。

2. 调用对象的方法：在 JavaScript 中，可以使用 this 关键字来调用对象的的方法。例如，this.sayHello() 可以用来调用对象的 sayHello 方法。

3. 访问原型链上的属性和方法：JavaScript 中每个对象都有一个原型链，可以通过 this 关键字访问原型链上的属性和方法。例如，this.prototype.age 可以用来访问原型链上的 age 属性。

4. 避免全局变量和全局函数：使用 this 关键字可以避免全局变量和全局函数的命名冲突和代码污染。例如，可以使用 var 或 let 关键字定义全局变量，但是不能直接使用全局变量，而是需要使用 this 关键字访问。

5. 访问闭包中的变量和方法：在 JavaScript 中，闭包中的变量和方法是私有的，不能直接访问。但是，可以使用 this 关键字访问闭包中的变量和方法。例如，this.counter 可以用来访问闭包中的 counter 变量。

6. 避免函数嵌套：在 JavaScript 中，函数嵌套会导致函数内部的变量被覆盖，从而无法访问。但是，使用 this 关键字可以避免函数嵌套的问题。例如，var counter = 0; 和 var counter = 0; 定义了两个变量，但是使用 this 关键字可以避免变量被覆盖的问题。

综上所述，this 关键字在 JavaScript 中具有非常重要的作用，它可以帮助我们访问对象的属性和方法，调用对象的方法和访问对象的属性，访问原型链上的属性和方法，避免全局变量和全局函数的命名冲突和代码污染，访问闭包中的变量和方法，以及避免函数嵌套的问题。因此，在 JavaScript 中，我们需要熟练掌握 this 关键字的重要性，并正确地使用它来处理对象和函数之间的关系。

二、this的基本概念

解释this的定义和作用。

this 是一个 JavaScript 关键字，它用于表示当前执行上下文对象。
在函数中，this 的值取决于函数是否被作为构造函数调用，或者是否被作为普通函数调用。

1. 当函数作为构造函数被调用时：

如果函数被作为构造函数调用，那么 this 的值会自动绑定到新创建的对象上。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person = new Person("张三", 25);
console.log(person.name); // 输出 "张三"

在这个例子中，Person 函数作为构造函数被调用，创建了一个新的 Person 对象。由于 this 的值自动绑定到新创建的对象上，因此 this.name 和 this.age 分别被绑定到对象的 name 和 age 属性上。

2. 当函数作为普通函数被调用时：

如果函数被作为普通函数调用，那么 this 的值会指向全局对象（通常是 window 对象）。例如：

function sayHello() {
  console.log("Hello, world!");
}

sayHello(); // 输出 "Hello, world!"

在这个例子中，sayHello 函数作为普通函数被调用，由于 this 的值指向全局对象，因此 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

3. 当函数作为参数传递给另一个函数时：

如果函数作为参数传递给另一个函数，那么 this 的值会指向接收函数的 this 值。例如：

function logMessage(message) {
  console.log(message);
}

var logMessage = logMessage;
logMessage("Hello, world!"); // 输出 "Hello, world!"

在这个例子中，logMessage 函数被作为参数传递给另一个函数 logMessage，由于接收函数的 this 值指向全局对象 window，因此 logMessage 中的 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

综上所述，this 是一个非常重要的关键字，它可以帮助我们访问对象的属性和方法，调用对象的方法和访问对象的属性，以及确定函数的执行上下文。因此，在 JavaScript 中，我们需要熟练掌握 this 的定义和作用，并正确地使用它来处理对象和函数之间的关系。

三、不同的绑定方式

介绍this的四种绑定方式：默认绑定、隐式绑定、显式绑定和 new 绑定。

在 JavaScript 中，this 有四种绑定方式，分别是默认绑定、隐式绑定、显式绑定和 new 绑定。这四种绑定方式分别适用于不同的场景，下面我们来详细介绍这四种绑定方式。

1. 默认绑定（Function 函数默认绑定）

当函数作为普通函数调用时，this 的默认绑定方式是全局对象（通常是 window 对象）。例如：

function sayHello() {
 console.log("Hello, world!");
}

sayHello(); // 输出 "Hello, world!"

在这个例子中，sayHello 函数作为普通函数被调用，由于 this 的默认绑定方式是全局对象，因此 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。

2. 隐式绑定（函数内变量默认绑定）

在函数内部，如果变量没有被赋值，它会自动绑定到 this。例如：

function sayHello() {
 console.log(this);
}

sayHello(); // 输出 window

在这个例子中，sayHello 函数内部的 this 指向全局对象 window，因此 console.log 中的输出结果是 window。

3. 显式绑定（使用 call 方法或 apply 方法显式绑定）

我们可以使用 call 方法或 apply 方法来显式地绑定 this。例如：

function sayHello() {
 console.log(this);
}

sayHello.call(null); // 输出 undefined
sayHello.call(window); // 输出 window

在这个例子中，我们使用 call 方法将 this 显式地绑定到全局对象 window 上，因此 console.log 中的输出结果是 window。

function sayHello() {
 console.log(this);
}

sayHello.apply(null); // 输出 undefined
sayHello.apply(window); // 输出 window

4. new 绑定（使用 new 关键字创建对象时绑定）

当我们使用 new 关键字创建对象时，this 会自动绑定到新创建的对象上。例如：

function Person(name, age) {
 this.name = name;
 this.age = age;
}

var person = new Person("张三", 25);
console.log(person.name); // 输出 "张三"

在这个例子中，我们使用 new 关键字创建了一个 Person 对象，因此 this 的绑定方式是该对象本身。因此，我们在函数内部使用 this.name 可以正确地访问对象的属性。

总结一下，四种绑定方式分别是：

1. 默认绑定（Function 函数默认绑定）：当函数作为普通函数调用时，this 的默认绑定方式是全局对象（通常是 window 对象）。
2. 隐式绑定（函数内变量默认绑定）：在函数内部，如果变量没有被赋值，它会自动绑定到 this。
3. 显式绑定（使用 call 方法或 apply 方法显式绑定）：我们可以使用 call 方法或 apply 方法来显式地绑定 this。
4. new 绑定（使用 new 关键字创建对象时绑定）：当我们使用 new 关键字创建对象时，this 会自动绑定到新创建的对象上。