JavaScript_this

1. 基本概念

“this” 是 JavaScript 中一个非常重要且有时容易混淆的关键字。简单来说，this 的值是在函数被调用时决定的，而不是在函数定义时决定的。它取决于函数的调用位置和方式，可以指向不同的对象。

1）在全局作用域中，this 指向全局对象（在浏览器中为 window）。
2）在对象方法中，this 指向调用方法的对象。
3）在构造函数中，this 指向新创建的实例对象。
4）在事件处理函数中，this 指向绑定事件的 DOM 元素。
5）在箭头函数中，this 是词法绑定的，它与包围它的非箭头函数的 this 值相同。

1.1 常见情境

全局作用域：
在非严格模式下，全局范围内的 this 默认指向全局对象 window。
javascript
```
console.log(this === window); // true
```
1
函数调用：
直接调用一个函数（非严格模式），this 指向全局对象 window。
javascript
```
function myFunction() {
  console.log(this); // window
}
myFunction();
```
1
2
3
4

对象方法调用：

当函数作为对象的方法被调用时，this 指向该对象。

javascript

const obj = {
  name: "Alice",
  getName: function() {
    console.log(this.name); // Alice
  }
};
obj.getName();

构造函数调用：

在构造函数中，this 指向新创建的实例对象。

javascript

function Person(name) {
  this.name = name;
}
const person = new Person("Bob");
console.log(person.name); // Bob

事件处理函数：

在事件处理函数中，this 指向绑定事件的 DOM 元素。

javascript

const button = document.createElement('button');
button.addEventListener('click', function() {
  console.log(this); // <button> element
});

箭头函数：

箭头函数不会创建自己的 this，它会捕获其所在上下文的 this 值。

javascript

const obj = {
  name: "Charlie",
  getName: function() {
    const arrowFunc = () => console.log(this.name);
    arrowFunc(); // Charlie
  }
};
obj.getName();

严格模式（"use strict"）：
在严格模式下，顶级上下文中的 this 是 undefined，而不是 window。
javascript
```
"use strict";
function myStrictFunction() {
  console.log(this); // undefined
}
myStrictFunction();
```
1
2
3
4
5

显式绑定：

使用 call、apply、bind 可以显式绑定 this。

javascript

function greet() {
  console.log(this.name);
}
const john = { name: "John" };
greet.call(john);  // John

JavaScript_this ​

1. 基本概念 ​

1.1 常见情境 ​

JavaScript_this

1. 基本概念

1.1 常见情境