JS中的this指向

2023-10-10 08:28:49

JS中的this指向
在JS中，this指向的是当前正在执行的函数的上下文对象，也就是当前执行代码所在的上下文环境中的对象。这与许多其他语言中的this指向不同，例如Java中的this指向的是当前正在执行的方法的调用者对象，而Python中的this指向的是当前正在执行的类的实例对象。

在JS中，this的指向受以下因素影响：

函数的执行方式
函数的所属对象
函数中是否有显式指定的this值

函数的执行方式

函数的执行方式有两种：普通函数和箭头函数。普通函数在执行时，this指向的是调用它的对象，而箭头函数在执行时，this指向的是它所在的作用域中的this值。

例如：

const obj = {
  name: 'obj',
  sayName() {
    console.log(this.name); // obj
  }
};

obj.sayName(); // obj

const arrowFunction = () => {
  console.log(this.name); // undefined
};

arrowFunction(); // undefined

在上面的例子中，sayName()是一个普通函数，当它被obj调用时，this指向obj，因此console.log(this.name)输出"obj"。而arrowFunction是一个箭头函数，当它被执行时，this指向的是它所在的作用域中的this值，在这个例子中就是undefined，因此console.log(this.name)输出"undefined"。

函数的所属对象

函数的所属对象是指函数被声明时的上下文对象。例如，如果一个函数是在某个对象内部声明的，那么这个函数的所属对象就是这个对象。

例如：

const obj = {
  name: 'obj',
  sayName() {
    console.log(this.name); // obj
  }
};

const func = obj.sayName;
func(); // obj

在上面的例子中，sayName()函数是obj对象的一个方法，因此它的所属对象就是obj。当func()被执行时，this指向obj，因此console.log(this.name)输出"obj"。

函数中是否有显式指定的this值

函数中可以使用this显式指定this的值。例如：

const obj = {
  name: 'obj'
};

function sayName() {
  console.log(this.name); // undefined
}

sayName.call(obj); // obj
sayName.apply(obj); // obj

在上面的例子中，sayName()函数没有显式指定this的值，因此它的this指向的是undefined。但是，我们可以使用call()或apply()方法显式指定this的值。call()方法接受两个参数：第一个参数是要指定this值的对象，第二个参数是函数的参数列表。apply()方法也接受两个参数：第一个参数是要指定this值的对象，第二个参数是一个包含函数参数的数组。

当sayName.call(obj)或sayName.apply(obj)被执行时，this指向obj，因此console.log(this.name)输出"obj"。