JavaScript中的this关键字使用方法总结

当我们编写 JavaScript 代码时，经常需要访问当前函数上下文中的数据。为了做到这一点，JavaScript 提供了一个关键字 this。this 关键字表示当前函数所在的对象，它包含了当前函数执行时所依存的上下文信息。在 JavaScript 中，this 关键字的使用非常重要，学会正确地使用 this 关键字对于编写高质量的代码非常重要。

下面是 "JavaScript中的this关键字使用方法总结 "的完整攻略：

1. this 是什么

this 关键字代表当前函数执行时所依存的“上下文对象”。它指向与函数相关的对象，在本质上就是一个变量（一个专有的关键字）。在不同的情况下，this 关键字会有不同的值。在 JavaScript 中，this 关键字在声明时并不赋值，而是在函数被调用时根据执行环境确定的。

2. this 的指向

this 的指向主要取决于函数的执行方式和函数的定义位置。通常情况下，它有四种指向方式，分别是：

• 全局对象（指 window 或者 global）
• 普通函数调用中 this 指向全局对象
• 对象的方法调用中 this 指向其对象
• 构造函数调用中，this 指向新创建的对象，即 new 关键字

下面分别进行例子演示。

例1

当函数独立调用的时候，this 关键字指向全局对象（在浏览器中就是 window 对象）。

// global scope
console.log(this === window); // true

// function scope
function myFunction() {
  console.log(this === window); // true
}

myFunction();

例2

当函数作为对象的方法调用时，this 关键字指向这个对象。

const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function () {
    console.log(this.firstName + " " + this.lastName);
    // this here points to the person object
    console.log(this === person);
  },
};

person.fullName(); // John Doe true

3. 如何显式地传递 this

对于需要访问和修改某个特定对象的函数来说，属性访问器中的 this 上下文可能是有用的。通过使用 call(), apply() 和 bind() 方法，我们可以手动地设置 this 的值，以获得更好的控制和更大的灵活性。

例3

使用 call() 方法来设置 this :

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person2 = {
  firstName:"John",
  lastName: "Doe",
};

// call the fullName method in the person1 object, but with person2 as the 'this'
console.log(person1.fullName.call(person2)); // John Doe

例4

使用 bind() 方法来设置 this :

const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person2 = {
  firstName:"John",
  lastName: "Doe",
};

const person2FullName = person1.fullName.bind(person2);
console.log(person2FullName()); // John Doe

4. 总结

this 是 JavaScript 中非常重要的一个关键字，它在函数调用时可以指向不同的对象，掌握 this 并且使用它可以让你编写高质量的 JavaScript 代码。注意函数的调用方式和定义位置非常重要，以及通过 call(), apply() 和 bind() 这三种方法可以手动设置 this 的值。