通俗理解this指向问题以及实现call、apply、bind

乐闻

2022年06月18日 12:24· 阅读 1266

前言

电话面试的时候，面试官让我口述对this的理解，以及如何修改this的指向。本来是很常见也相对比较简单的问题，但是在口述如何手写call方法的时候，却回答的磕巴，感觉还是没有真正的理解本质，借这篇文章好好理一下思路

在 JavaScript 中，this 是一个特殊的关键字，用于指代当前执行上下文中的对象。它的指向问题是前端开发中经常遇到的一个难点。同时，JavaScript 中提供了 call、apply 和 bind 这三个方法来改变函数中 this 的指向。下面就来详细介绍一下这些概念。

this 指向问题

this 指向是 JavaScript 开发中十分重要且容易出错的一个问题。在不同的执行上下文中，this 的指向可能会有所不同。如果没有理解清楚 this 的指向，就可能会导致代码出现不可预料的错误。

在 JavaScript 中，this 的指向主要有以下几种情况：

全局作用域中的 this 指向全局对象 window。
函数中的 this 指向调用该函数的对象。
构造函数中的 this 指向构造函数创建的对象。
使用 call、apply 或 bind 方法指定的 this 指向指定的对象。

call、apply 和 bind 方法

为了解决 this 指向问题，JavaScript 中提供了三个方法来改变函数中 this 的指向：call、apply 和 bind。

call 方法

call 方法可以改变函数中 this 的指向，并立即执行该函数。call 方法的语法如下：

javascript
function.call(thisArg, arg1, arg2, ...)

其中，thisArg 参数是指定函数中 this 的指向的对象，arg1、arg2、... 是传递给函数的参数。

举个例子，假设有一个对象 person，它有一个 sayHello 方法：

javascript
let person = {
  name: 'Tom',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

如果我们想在全局作用域中执行 sayHello 方法，可以使用 call 方法：

javascript
let name = 'Alice';
person.sayHello.call(this);
// 输出：Hello, my name is Alice.

apply 方法

apply 方法与 call 方法类似，也可以改变函数中 this 的指向。apply 方法的语法如下：

javascript
function.apply(thisArg, [argsArray])

其中，thisArg 参数是指定函数中 this 的指向的对象，argsArray 是传递给函数的参数数组。

举个例子，如果我们想在全局作用域中执行 sayHello 方法并传递参数，可以使用 apply 方法：

javascript
let name = 'Alice';
let args = ['a', 'b', 'c'];
person.sayHello.apply(this, args);
// 输出：Hello, my name is Alice.

bind 方法

bind 方法可以创建一个新函数，该函数的 this 指向指定的对象，并且调用时使用传入的参数。bind 方法的语法如下：

javascript
function.bind(thisArg[, arg1[, arg2[, ...]]])

其中，thisArg 参数是指定新函数中 this 的指向的对象，arg1、arg2、... 是传递给新函数的参数。

举个例子，如果我们想创建一个新的函数，该函数中 this 的指向是全局作用域中的 window，可以使用 bind 方法：

javascript
let name = 'Alice';
let sayHello = person.sayHello.bind(window);
sayHello();
// 输出：Hello, my name is Alice.

总结

this 指向问题是前端开发中经常遇到的一个难点，它的指向可能会随着执行上下文的变化而变化。为了解决这个问题，JavaScript 中提供了 call、apply 和 bind 方法来改变函数中 this 的指向。掌握这些方法可以帮助开发人员更好地优化代码，并避免因为 this 指向问题而导致的错误。

标签：

JavaScript ES6