你可能不知道的JavaScript之this指向详解

您好！感谢您关注“你可能不知道的JavaScript之this指向详解”这篇文章。下面我将为您介绍该攻略的详细内容：

1. 文章介绍

本文主要介绍 JavaScript 中 this 指向的相关知识，包括 this 的定义、this 的应用场景以及常见使用方法等。帮助读者深入理解 this，避免由于理解不透彻而导致的错误应用。

2. this 的定义

this 指向在 JavaScript 中十分重要，它可以代表当前执行代码的对象或上下文。在函数执行时，this 指的就是该函数所属的对象；而在全局作用域中，this 指向的则是全局对象 window。

3. this 的应用场景

3.1. 对象方法中的 this

在 JavaScript 中，对象和方法是紧密联系在一起的，因此 this 在对象方法中的使用是很常见的。例如：

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

在这个例子中，this.firstName 指的是 person 对象中的 firstName，this.lastName 同理。这里的 this 指的是当前所属的 person 对象。

3.2. 构造函数中的 this

构造函数是一种特殊的函数，它被用来创建新的对象。在构造函数中，this 关键字代表新创建的对象，例如：

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var myCar = new Car("Ford", "Mustang", 1969);

在这个例子中，this 指的是新创建的对象 myCar。

4. this 的常见使用方法

4.1. call() 方法

call() 方法可以调用一个函数，并指定函数中的 this 值。例如：

var person1 = {firstName: "John", lastName: "Doe"};
var person2 = {firstName: "Mary", lastName: "Doe"};
function fullName() {
  return this.firstName + " " + this.lastName;
}
var bindPerson1 = fullName.call(person1);
var bindPerson2 = fullName.call(person2);

在这个例子中，调用 fullName() 函数时，指定了 this 值，使得 bindPerson1 和 bindPerson2 的结果分别为 "John Doe" 和 "Mary Doe"。

4.2. apply() 方法

apply() 方法与 call() 方法类似，也是调用一个函数并指定函数中的 this 值。与 call() 方法不同的是，apply() 方法的第二个参数是一个数组，例如：

var person1 = {firstName: "John", lastName: "Doe"};
var person2 = {firstName: "Mary", lastName: "Doe"};
function fullName() {
  return this.firstName + " " + this.lastName;
}
var bindPerson1 = fullName.apply(person1);
var bindPerson2 = fullName.apply(person2);

在这个例子中，指定了 this 值，使得 bindPerson1 和 bindPerson2 的结果分别为 "John Doe" 和 "Mary Doe"。

5. 示例说明

下面我们来看两个示例来说明 this 指向的详细解释。

5.1. 示例一

var name = "window name";
function Person(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  };
}

var person1 = new Person("person1");
var person2 = new Person("person2");

person1.printName();  // "person1"
person2.printName();  // "person2"

在这个例子中，我们定义了一个全局变量 name 以及一个构造函数 Person。其中构造函数 Person 有一个属性 name 和一个方法 printName()。在实例化构造函数时，通过 this 关键字，分别为 person1 和 person2 对象添加了不同的 name 值。在调用 printName() 方法时，打印出了各自对应的 name 值。

5.2. 示例二

var name = "window name";
var person1 = {
  name: "person1",
  printName: function () {
    console.log(this.name);
  }
};

var person2 = {
  name: "person2",
  printName: function () {
    var print = person1.printName;
    print();
  }
};

person2.printName();  // "window name"

在这个例子中，我们定义了两个对象 person1 和 person2，分别有相同的 printName() 方法，但是他们所对应的 this 指向却是不同的。在 person2 的 printName() 方法中，采用了 print 变量存储 person1.printName()，这样就改变了 printName() 方法中的 this 指向。当调用 person2.printName() 方法时，最终打印出了全局变量 name 的值。

6. 结束语

本文仅是对 this 的基本介绍和应用场景的说明，但这并不是深入了解 this 所需要掌握的全部内容。我希望本文能为读者提供一些基本的指导和帮助，在实际应用时避免由于对 this 理解不透彻而导致的错误应用。