JS中的this关键字详解

什么是this

在Javascript中，this是一个关键字，指当前函数的运行环境，在不同的情况下代表的含义也有所不同。它的值在运行时被自动绑定，通常用于对象方法中。

this的指向

下面是this的常见指向：

全局作用域下的this

当在全局作用域下使用this时，它会指向window对象。

console.log(this); // Window

函数中的this

如果在函数内部使用this，它的值取决于该函数的调用方式。

作为独立函数调用时

当函数作为独立函数调用时，指向全局对象。

function example() {
  console.log(this);
}

example(); // Window

作为对象的方法调用时

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

const obj = {
  example() {
    console.log(this);
  }
}

obj.example(); // obj

构造函数中的this

在构造函数中，this指向生成的实例对象。

function Example() {
  this.name = 'example';
}

const example = new Example();
console.log(example.name); // example

call和apply方法中的this

call和apply方法可以改变函数运行时的this指向。

const obj1 = {
  name: 'obj1',
}

const obj2 = {
  name: 'obj2',
}

function example() {
  console.log(this.name);
}

example.call(obj1); // obj1
example.apply(obj2); // obj2

总结

this是Javascript中重要的一个关键字，它的指向取决于其调用方式和运行环境。理解this的指向对于编写高质量的Javascript代码非常重要。

示例说明

示例一：this在对象方法中的应用

const calculator = {
  num1: 0,
  num2: 0,

  sum() {
    const result = this.num1 + this.num2;
    console.log(result);
  }
};

calculator.num1 = 1;
calculator.num2 = 2;
calculator.sum(); // 3

在对象方法sum中，使用了this关键字来获取对象的属性值。这个例子展示了如何在对象方法中利用this来获取该对象的属性值，从而实现对对象的操作。

示例二：call和apply方法中的this

function sum(a, b) {
  console.log(a + b);
}

sum.call(null, 1, 2); // 3
sum.apply(null, [1, 2]); // 3

在这个例子中，我们使用call和apply方法来调用函数sum。call和apply方法的第一个参数是要绑定this的对象，我们传入了null。在这个例子中，由于函数sum中用到了this关键字，如果我们不使用call或apply方法来指定this，它将默认指向全局对象window，这是不安全的。