this绑定解析：初学者揭秘JavaScript的基础

2024-02-10 07:35:45

前言：this的基础知识

this是JavaScript中非常重要且常见的一个概念，它在JavaScript中扮演着极为关键的作用。实际上，理解this的行为方式是掌握JavaScript基本知识的必经之路。概括来说，this指向当前函数执行时所属的对象。这种绑定过程可以隐式完成，也可以通过一些方法显示进行绑定。

this的绑定规则

1. 默认绑定

对于一个函数而言，如果它不是一个对象的方法，我们通常称其为全局函数。全局函数的this默认绑定到window对象。

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

2. 隐式绑定

对象方法： 如果一个函数是通过对象调用，那么它的this默认绑定到该对象。

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

构造函数： 构造函数中的this默认绑定到由其创建的新对象。

function Person(name) {
  this.name = name;
}
const person = new Person("John");
console.log(person.name); // John

3. 显示绑定

显示绑定允许我们手动指定this的绑定对象，从而改变默认绑定行为。主要有三种显示绑定方式：call、apply和bind。

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

// call: 显式绑定到person对象
person.greet.call({ name: "Jane" }); // Hello, my name is Jane

// apply: 类似于call，但参数以数组形式传递
person.greet.apply({ name: "Jane" }); // Hello, my name is Jane

// bind: 返回一个新的函数，该函数的this绑定到指定的对象
const boundGreet = person.greet.bind({ name: "Jane" });
boundGreet(); // Hello, my name is Jane

4. new绑定

new绑定与构造函数密切相关。当使用new关键字调用一个函数时，this默认绑定到由该函数创建的新对象。

function Person(name) {
  this.name = name;
}
const person = new Person("John");
console.log(person.name); // John

this绑定优先级

当多个绑定规则同时适用时，this的绑定优先级如下：

显示绑定（call、apply、bind）
new绑定
隐式绑定（对象方法和全局函数）

这意味着，如果一个函数同时具有显示绑定和隐式绑定，那么显示绑定将优先于隐式绑定。

箭头函数的this绑定

箭头函数与其他函数略有不同。箭头函数没有自己的this绑定，它总是继承其所在作用域的this值。因此，箭头函数内的this总是指向其定义时所在的作用域。

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