JS连载第二期：深入剖析this、call、apply

2024-02-02 22:41:12

前言

欢迎来到JS连载的第二期！在本期中，我们将深入探讨JavaScript中一个关键的概念——this，以及call()和apply()等函数调用的方法。

this的本质和用法

在JavaScript中，this代表当前函数执行时的上下文对象。这个上下文对象可以是全局对象（在严格模式下），也可以是调用函数的对象（在非严格模式下）。

this的用法举例

// 全局上下文
console.log(this); // Window {window: Window, self: Window, document: HTMLDocument, name: "", location: Location, …}

// 对象方法上下文
const person = {
  name: "John Doe",
  greet: function () {
    console.log(this.name); // John Doe
  }
};

person.greet(); // John Doe

call()和apply()方法

call()和apply()方法允许我们显式地指定函数的执行上下文，从而改变this指向的对象。

call()方法

call()方法接受两个参数：第一个参数是this指向的对象，第二个参数及以后的参数是传递给函数的参数。

apply()方法

apply()方法也接受两个参数：第一个参数是this指向的对象，第二个参数是一个数组，其中包含传递给函数的参数。

call()和apply()的用法举例

// 使用call()方法
const person = {
  name: "John Doe"
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

greet.call(person, "Hello"); // Hello, John Doe!

// 使用apply()方法
greet.apply(person, ["Hello"]); // Hello, John Doe!