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

2023年6月10日下午3:57 • JavaScript

关于JS中的this关键字

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

this的指向

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

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

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

示例代码：

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

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

示例代码：

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

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

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

示例代码：

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

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

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

示例代码：

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

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

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

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

示例代码：

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

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

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

示例代码：

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

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

参考文献：

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于js里的this关键字的理解 - Python技术站