三种this指向的方法：call()、bind()、apply()

2023-10-11 00:55:28

this

在JavaScript中，this关键字指向当前正在执行的代码块中的对象。在不同的情况下，this可能指向不同的对象。

当一个函数作为对象的方法被调用时，this指向该对象。
当一个函数作为函数被调用时，this指向全局对象。
当一个函数作为构造函数被调用时，this指向新创建的对象。

call()方法

call()方法用于调用一个函数，可以指定函数体内this对象的值。这里的this指的是函数执行时所在的上下文对象，也就是函数执行时所处的环境。

语法：

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

其中，

thisArg：要将this指向的对象。
arg1, arg2, ...：要传递给函数的参数。

bind()方法

bind()方法与call()方法类似，用于调用一个函数，可以指定函数体内this对象的值。不同之处在于，bind()方法返回一个新的函数，该函数的this对象被绑定到指定的对象。

语法：

function.bind(thisArg, arg1, arg2, ...)

其中，

thisArg：要将this指向的对象。
arg1, arg2, ...：要传递给函数的参数。

apply()方法

apply()方法与call()方法类似，用于调用一个函数，可以指定函数体内this对象的值。不同之处在于，apply()方法将参数作为数组传递给函数。

语法：

function.apply(thisArg, argsArray)

其中，

thisArg：要将this指向的对象。
argsArray：要传递给函数的参数数组。

使用举例

// 创建一个对象
const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

// 使用call()方法调用greet()函数，并将this指向person对象
person.greet.call(person); // Hello, my name is John Doe.

// 使用bind()方法创建新的greet()函数，并将this绑定到person对象
const boundGreet = person.greet.bind(person);

// 调用boundGreet()函数
boundGreet(); // Hello, my name is John Doe.

// 使用apply()方法调用greet()函数，并将参数作为数组传递
person.greet.apply(person, ['Jane Doe']); // Hello, my name is Jane Doe.