你知道但是可能不太理解的JavaScript -this

你知道但是可能不太理解的JavaScript -this

---

---

前言

在JavaScript中，this关键字是一个非常重要且容易引起混淆的概念。本文将详细讲解this的工作原理，以及在不同上下文中如何使用它。

---

1.什么是this？

this是JavaScript中的一个特殊关键字，它在函数执行时自动绑定到一个对象。换句话说，this指的是当前执行上下文中的对象。在不同的执行上下文中，this的值可能会有所不同。

2.this的绑定规则

默认绑定

在全局作用域中，this指向全局对象。在浏览器环境中，全局对象是window；而在Node.js环境中，全局对象是global。例如：

	console.log(this); // 在浏览器中输出 window，在Node.js中输出 global
隐式绑定

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

	const obj = {
	  value: "hello",
	  getValue: function () {
	    console.log(this.value);
	  },
	};
	
	obj.getValue(); // 输出 "hello"

在这个例子中，this指向obj对象。

显示绑定

使用函数的call、apply、bind方法可以显式地指定this的值。这些方法用于改变函数执行时this的绑定对象。
call: 可以传入一个对象作为this绑定，以及一个参数列表。
apply: 可以传入一个对象作为this绑定，以及一个参数数组。
bind: 返回一个新函数，其this值被绑定到传入的对象。
例如下面代码：

	function showValue() {
	  console.log(this.value);
	}
	
	const obj1 = {
	  value: "hello",
	};
	
	const obj2 = {
	  value: "world",
	};
	
	showValue.call(obj1); // 输出 "hello"
	showValue.apply(obj2); // 输出 "world"
	
	const boundShowValue = showValue.bind(obj1);
	boundShowValue(); // 输出 "hello"

构造函数绑定

当使用new关键字调用一个函数时，该函数作为构造函数。在构造函数中，this指向新创建的对象实例。例如：

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

在这个例子中，this指向新创建的person对象。

箭头函数中的this

箭头函数没有自己的this值。在箭头函数中，this值继承自包含它的函数的执行上下文。例如：

	javascript
	const obj = {
	  value: "hello",
	  getValue: function () {
	    const innerFunc = () => {
	      console.log(this.value);
	    };
	    innerFunc();
	  },
	};
	
	obj.getValue(); // 输出 "hello"

在这个例子中，innerFunc箭头函数中的this值继承自getValue函数的执行上下文，即obj对象。

总结

理解和掌握this关键字是学习和使用JavaScript的重要部分。本文详细介绍了this在不同情况下的绑定规则，帮助你更好地掌握这一概念。