探秘 JavaScript 的 this、call 和 apply

2023-10-10 02:14:21

JavaScript 中的执行环境和作用域

理解 JavaScript 中的 this、call 和 apply 离不开对执行环境和作用域的理解。执行环境是 JavaScript 代码运行时所处的环境，而作用域则是代码能够访问的变量和函数的集合。

在 JavaScript 中，函数的执行环境取决于函数的调用方式。当函数作为某个对象的方法被调用时，它的执行环境是该对象，this 就指向这个对象。但是，当函数作为一个普通的函数被调用时，它的执行环境是全局对象（浏览器中是 window 对象），this 就指向全局对象。

作用域决定了函数能够访问哪些变量和函数。在 JavaScript 中，有两种主要的作用域：全局作用域和局部作用域。全局作用域指的是所有代码都能访问的变量和函数，而局部作用域指的是函数内部的变量和函数。

this

this 关键字是一个特殊的变量，它指向当前正在执行的函数所属的对象。this 的值取决于函数的执行环境。当函数作为某个对象的方法被调用时，this 就指向这个对象。但是，当函数作为一个普通的函数被调用时，this 就指向全局对象。

// 定义一个对象
const person = {
  name: 'John',
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

// 将 person.sayHello() 作为普通函数调用
person.sayHello(); // Hello, my name is John.

// 将 person.sayHello() 作为对象方法调用
const hello = person.sayHello;
hello(); // TypeError: Cannot read property 'name' of undefined

在上面的示例中，当我们直接调用 person.sayHello() 时，this 指向 person 对象，因此能够正常访问 person 对象的 name 属性。但是，当我们把 person.sayHello() 赋给一个新的变量 hello 并调用它时，this 就指向全局对象，因此会抛出 TypeError 错误，因为全局对象没有 name 属性。

call 和 apply 方法

call 和 apply 方法允许我们显式地指定函数的执行环境。这两个方法都接受两个参数：第一个参数是函数的执行环境，第二个参数是函数的参数列表。

call 方法的语法如下：

Function.call(thisArg, ...args);

apply 方法的语法如下：

Function.apply(thisArg, [args]);

这两个方法的区别在于第二个参数的传递方式。call 方法将参数作为一个单独的参数列表传递给函数，而 apply 方法将参数作为一个数组传递给函数。

// 定义一个函数
const greet = function(greeting, name) {
  console.log(`${greeting}, ${name}!`);
};

// 使用 call 方法显式指定函数的执行环境和参数
greet.call(null, 'Hello', 'John'); // Hello, John!

// 使用 apply 方法显式指定函数的执行环境和参数
greet.apply(null, ['Hello', 'John']); // Hello, John!