这篇文章主要介绍了JavaScript this使用方法图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
本文我们介绍下js中this的用法。
由上图可得，默认this指向window，而在node.js中this默认指向global。
由上图可得：
1.原型链为o->MyClass.prototype。
2.函数如果没有明确返回值默认返回this。
由上图可得：call和apply功能相同，不同之处为apply传调用参数时应为数组。
由上图可得：bind传的对象即作为this。
在JavaScript中，`this`关键字是一个非常重要的概念，它用于引用当前执行上下文中的对象。理解`this`的使用方法是深入学习JavaScript的关键。本文将详细介绍`this`的几种常见用法，帮助开发者更好地掌握这一核心特性。
1. **默认绑定**：
- 在全局作用域或函数外部，`this`通常指向全局对象。在浏览器环境中，这个全局对象是`window`；而在Node.js中，全局对象是`global`。
- 示例代码：
```javascript
function foo() {
console.log(this);
}
foo(); // 浏览器环境下输出：Window { ... }
```
2. **隐式绑定**：
- 当函数被某个对象的方法调用时，`this`会指向那个对象。
- 示例代码：
```javascript
var obj = {
method: function() {
console.log(this);
}
};
obj.method(); // 输出：{ method: [Function: method] }
```
3. **显式绑定**：
- 使用`call()`、`apply()`或`bind()`方法可以显式地改变`this`的指向。
- `call()`和`apply()`都允许你立即调用函数，并设置`this`的值。`apply`接收一个数组或类数组对象作为参数，而`call`则允许你逐个传递参数。
- 示例代码：
```javascript
function foo(a, b) {
console.log(this, a, b);
}
var obj = {};
foo.call(obj, 1, 2); // 输出：{ } 1 2
foo.apply(obj, [1, 2]); // 输出：{ } 1 2
```
- `bind()`则创建了一个新函数，新函数的`this`始终绑定到传入的值，即使在之后的调用中。
```javascript
var boundFoo = foo.bind(obj);
boundFoo(3, 4); // 输出：{ } 3 4
```
4. **构造函数绑定**：
- 当使用`new`关键字创建一个新的对象实例时，`this`将指向新创建的对象。
- 示例代码：
```javascript
function MyClass() {
console.log(this);
}
new MyClass(); // 输出：MyClass { }
```
5. **箭头函数绑定**：
- 箭头函数没有自己的`this`，它会捕获其所在（即定义时）的作用域的`this`值。
- 示例代码：
```javascript
var obj = {
name: "Alice",
sayName: function() {
setTimeout(() => {
console.log(this.name);
}, 100);
}
};
obj.sayName(); // 输出："Alice"，因为箭头函数捕获了obj的作用域
```
6. **事件处理程序中的`this`**：
- 当在DOM事件处理程序中使用`this`时，它通常指向触发该事件的元素。
- 示例代码：
```javascript
var button = document.querySelector("button");
button.addEventListener("click", function() {
console.log(this === button); // 输出：true
});
```
理解和熟练使用这些`this`的用法，能够帮助开发者编写更加灵活和健壮的JavaScript代码。在实际编程中，`this`的指向可能会因不同的调用方式和上下文环境而变化，因此需要特别注意其动态性。在遇到复杂情况时，可以借助这些规则来分析和确定`this`的准确指向。
