你绝对想知道的this

2023-09-25 15:23:02

在Javascript中，"this"是一个非常重要的概念，但也是一个容易引起混淆的概念。它指向的对象取决于函数被调用的位置，而不是函数被声明的位置。为了更好地理解this的绑定过程，我们需要首先了解调用位置。调用位置是指函数在代码中被调用的位置，而不是函数被声明的位置。

1. 全局绑定

当函数被作为全局函数调用时，this指向window对象。window对象是JavaScript中全局作用域的对象，它包含了所有全局变量和函数。例如：

function sayHello() {
  console.log(this); // 输出：window
}

sayHello();

2. 方法绑定

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

const person = {
  name: "John Doe",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`); // 输出：Hello, my name is John Doe.
  }
};

person.greet();

3. 构造函数绑定

当函数作为构造函数被调用时，this指向新创建的对象。例如：

function Person(name) {
  this.name = name;
}

const person1 = new Person("John Doe");
console.log(person1.name); // 输出：John Doe

4. 隐式绑定

当函数被调用时，如果this没有被明确绑定到任何对象，那么this将默认绑定到window对象。例如：

function sayHello() {
  console.log(this); // 输出：window
}

sayHello();

5. 显式绑定

我们可以使用call()、apply()或bind()方法来显式地将this绑定到某个对象。例如：

const person = {
  name: "John Doe",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`); // 输出：Hello, my name is John Doe.
  }
};

const sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`); // 输出：Hello, my name is undefined.
};

sayHello.call(person); // 输出：Hello, my name is John Doe.
sayHello.apply(person); // 输出：Hello, my name is John Doe.
const boundSayHello = sayHello.bind(person);
boundSayHello(); // 输出：Hello, my name is John Doe.