🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
文章目录
- 一、引言
- 介绍`this`关键字在 JavaScript 中的重要性。
- 二、`this`的基本概念
- 解释`this`的定义和作用。
- 三、不同的绑定方式
- 介绍`this`的四种绑定方式：默认绑定、隐式绑定、显式绑定和 new 绑定。
一、引言
介绍this关键字在 JavaScript 中的重要性。
this 关键字在 JavaScript 中具有非常重要的作用，它用于表示当前执行上下文对象，即当前函数所在的对象。
this 关键字可以用来访问对象的属性和方法，以及调用对象的方法和访问对象的属性。
this关键字在 JavaScript 中具有以下重要性：
-
确定当前对象的属性：在 JavaScript 中，可以使用
this关键字来访问对象的属性。例如，this.name可以用来访问对象的name属性。 -
调用对象的方法：在 JavaScript 中，可以使用
this关键字来调用对象的的方法。例如，this.sayHello()可以用来调用对象的sayHello方法。 -
访问原型链上的属性和方法：JavaScript 中每个对象都有一个原型链，可以通过
this关键字访问原型链上的属性和方法。例如，this.prototype.age可以用来访问原型链上的age属性。 -
避免全局变量和全局函数：使用
this关键字可以避免全局变量和全局函数的命名冲突和代码污染。例如，可以使用var或let关键字定义全局变量，但是不能直接使用全局变量，而是需要使用this关键字访问。 -
访问闭包中的变量和方法：在 JavaScript 中，闭包中的变量和方法是私有的，不能直接访问。但是，可以使用
this关键字访问闭包中的变量和方法。例如，this.counter可以用来访问闭包中的counter变量。 -
避免函数嵌套：在 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 绑定。这四种绑定方式分别适用于不同的场景，下面我们来详细介绍这四种绑定方式。
- 默认绑定（Function 函数默认绑定）
当函数作为普通函数调用时，this 的默认绑定方式是全局对象（通常是 window 对象）。例如：
function sayHello() {
console.log("Hello, world!");
}
sayHello(); // 输出 "Hello, world!"
在这个例子中，sayHello 函数作为普通函数被调用，由于 this 的默认绑定方式是全局对象，因此 console.log 中的 "Hello, world!" 被输出到全局对象 window 上。
- 隐式绑定（函数内变量默认绑定）
在函数内部，如果变量没有被赋值，它会自动绑定到 this。例如：
function sayHello() {
console.log(this);
}
sayHello(); // 输出 window
在这个例子中，sayHello 函数内部的 this 指向全局对象 window，因此 console.log 中的输出结果是 window。
- 显式绑定（使用 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
- 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 可以正确地访问对象的属性。
总结一下，四种绑定方式分别是：
- 默认绑定（Function 函数默认绑定）：当函数作为普通函数调用时，
this的默认绑定方式是全局对象（通常是window对象）。 - 隐式绑定（函数内变量默认绑定）：在函数内部，如果变量没有被赋值，它会自动绑定到
this。 - 显式绑定（使用 call 方法或 apply 方法显式绑定）：我们可以使用
call方法或apply方法来显式地绑定this。 - new 绑定（使用 new 关键字创建对象时绑定）：当我们使用
new关键字创建对象时，this会自动绑定到新创建的对象上。
