关于js里的this关键字的理解

关于JS中的this关键字

在JavaScript中，this关键字是一个非常重要的概念，有着不同的用法和含义。在不同的情况下它所代表的对象也不同，因此理解this的含义和使用场景显得非常重要。

this的指向

在JavaScript中，this表示当前函数的执行上下文。根据函数的调用方式不同，this指向的对象也不同。

通常来说，this的指向可以分为以下几种情况：

1. 全局上下文中的this

当在全局上下文中使用this时，this会指向全局对象（浏览器中的window对象）。

示例代码：

console.log(this === window); // 输出 true

1. 对象方法中的this

当在对象方法中使用this时，this会指向该对象。

示例代码：

const obj = {
  name: "小明",
  sayHi() {
    console.log(`你好，我是${this.name}！`);
  }
};
obj.sayHi(); // 输出 "你好，我是小明！"

在上述示例中，sayHi中的this指向的是obj对象，即小明。

1. 构造函数中的this

当使用构造函数来创建实例时，this会指向新创建的对象。

示例代码：

function Person(name) {
  this.name = name;
}
const p = new Person("小明");
console.log(p.name); // 输出 "小明"

在上述示例中，构造函数Person中的this指向新创建的对象p。

1. apply和call方法中的this

当使用apply和call方法来调用函数时，this会被指定为传递给方法的第一个参数。

示例代码：

function sayHi() {
  console.log(`你好，我是${this.name}！`);
}
const obj = {
  name: "小明"
};
sayHi.call(obj); // 输出 "你好，我是小明！"

在上述示例中，sayHi.call(obj)中的this指向的是obj对象，即小明。

this的坑

在使用this时，还需要注意一些容易被忽略的坑。下面列举一些常见的问题和解决方法。

1. 构造函数中的this指向问题

当构造函数的返回值不是对象时，this会被自动忽略，或者被替换成新创建的对象。

示例代码：

function Person(name) {
  this.name = name;
  return 1;
}
const p = new Person("小明");
console.log(p.name); // 输出 undefined

在上述示例中，当构造函数返回值不是对象时，this会被替换成新创建的对象。而在该示例代码中，构造函数返回的是数值，并不是对象，因此this被替换成了新创建的对象，而不是被赋值。

2. 箭头函数中的this指向问题

在箭头函数中，this的指向是固定的，取决于函数定义所在的作用域。

示例代码：

const obj = {
  name: "小明",
  sayHi: () => {
    console.log(`你好，我是${this.name}！`);
  }
};
obj.sayHi(); // 输出 "你好，我是undefined！"

在上述示例中，箭头函数sayHi中的this指向的是函数定义所在的作用域，即全局对象。因此this.name会输出undefined。

总结

• this表示当前函数的执行上下文。
• 根据函数的调用方式不同，this指向的对象也不同。
• 在使用this时，需要注意一些常见的问题和坑。例如，构造函数中的返回值问题和箭头函数中的this指向问题。

参考文献：

• MDN - this
• 阮一峰 - JavaScript中的this关键字