JavaScript 中 this 关键字的作用及改变其上下文的方法

在 JavaScript 中，this 关键字代表函数被调用时所在的对象。由于调用上下文的不同，this 的指向也会随之变化。开发者可以使用 call、apply 和 bind 方法来手动指定或改变 this 的上下文环境。

一、this 关键字的作用

JavaScript 中的 this 关键字用于引用函数执行时所在的对象。根据具体的调用环境，this 的指向会有所不同。

当处于全局执行上下文时，this 指向全局对象。具体而言，在浏览器环境中它指向 window 对象，而在 Node.js 环境中则指向 global 对象。

在普通函数内部，this 指向调用该函数的对象。若函数是作为对象的方法被调用，this 将指向该对象；若函数是直接通过函数调用方式执行，this 则指向全局对象。

对于箭头函数，this 的值继承自外层作用域中的 this，它不会创建自己的 this 绑定。

在类的构造函数中，当使用 new 关键字实例化类时，this 指向新创建的对象实例。

例如：

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = new MyClass();
console.log(obj.value); // 42

类的实例方法中，this 默认指向实例本身；而类的静态方法中，this 默认指向类本身。

例如：

class MyClass {
  value = 42;
  printValue() {
    console.log(this.value);
  }
  static printValue() {
    console.log(this.value);
  }
}

let obj = new MyClass();
obj.printValue(); // 42
MyClass.printValue(); // undefined

利用 Object.create 方法可以创建对象

使用 Object.create 方法是一种特殊的对象创建方式。在此情况下，如果在对象的原型链上调用函数，this 将指向该对象。

例如：

let baseObject = { value: 42 };
let obj = Object.create(baseObject);

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42

此时，obj 的原型链上存在 value 属性，因此调用 printValue() 方法时，this 指向 obj 对象。

在类中使用箭头函数

在类中使用箭头函数定义的方法，其 this 指向是固定的，它指向类的实例，而非类本身。

例如：

class MyClass {
  value = 42;
  printValue = () => {
    console.log(this.value);
  }
}
let obj = new MyClass();
obj.printValue(); // 42

箭头函数的 this 是在定义时确定的 this，而非调用时的 this。因此，在类中使用箭头函数可以避免在方法中额外使用 bind 来绑定 this。

在调用构造函数时，未使用 new 关键字

这种情况下，this 指向全局对象。此时不会创建新的对象，而是修改了全局对象的状态。

例如：

class MyClass {
  constructor() {
    this.value = 42;
  }
}

let obj = MyClass(); // without new keyword
console.log(obj); // undefined
console.log(value); // 42

因此，在使用构造函数创建对象时，务必确保使用 new 关键字来调用构造函数，否则可能导致意外结果。

在使用构造函数时特别需要注意使用 new 关键字来调用。

在对象的方法中使用箭头函数会导致 this 指向问题

例如：

let obj = {
  value: 42,
  printValue: () => {
    console.log(this.value);
  }
};
obj.printValue(); // undefined

在这种情况下，obj 对象的 printValue 方法中使用了箭头函数。由于箭头函数的 this 指向定义时的上下文而非调用时，this.value 指向的是 undefined，而非 obj 对象中的 value。

解决这种问题可以使用箭头函数的父级作用域中的 this，或者使用普通函数来解决。

例如：

let obj = {
  value: 42,
  printValue: function(){
    console.log(this.value);
  }
};
obj.printValue(); // 42

或者

let obj = {
  value: 42,
  printValue: () => {
    console.log(obj.value);
  }
};
obj.printValue(); // 42

在对象的方法中使用箭头函数会导致 this 指向问题，需要特别注意。可以使用箭头函数的父级作用域中的 this 或者普通函数来解决。

总之，JavaScript 中的 this 关键字指向的上下文取决于函数的调用方式，需要根据不同的场景来选择合适的方式来改变 this 的指向。

二、如何改变 this 上下文

可以通过 call, apply, bind 方法来改变 this 的上下文。

call 和 apply 方法允许您将函数的 this 指向指定的对象，并立即执行该函数。

call 方法的语法格式如下：

functionName.call(thisArg, arg1, arg2, ...);

apply 方法的语法格式如下：

functionName.apply(thisArg, [arg1, arg2, ...]);

bind 方法允许您将函数的 this 指向指定的对象，但不立即执行函数，而是返回一个新函数，可以在将来执行。

let newFunc = functionName.bind(thisArg, arg1, arg2, ...);

例如:

let obj = {value: 42};

function printValue() {
  console.log(this.value);
}

printValue.call(obj); // 42
printValue.apply(obj); // 42
let boundFunc = printValue.bind(obj);
boundFunc(); // 42

总之，通过使用 call, apply, bind 方法，可以改变函数中的 this 指向，从而在不同的上下文中使用同一个函数。

到此这篇关于JavaScript 中 this 关键字的作用和如何改变其上下文的文章就介绍到这了,更多相关js this关键字作用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！