如何在ES5中使用apply、call和bind改变函数的this指向？

翻滚的胖子
2023-08-31 09:58:02
前端技术
JavaScript

在JavaScript中，函数是一等公民，它可以作为参数传递，也可以作为返回值。函数内部的this指向调用函数的对象，但有时我们需要手动改变函数内部this的指向。

一、apply方法

apply方法可以改变函数的this指向，并且可以传入一个数组或类数组对象作为参数。

 var obj1 = {name: 'Alice', age: 20};
 var obj2 = {name: 'Bob', age: 25};

 function sayHello() {
     console.log('Hello, ' + this.name + '!');
 }

 sayHello.apply(obj1); // 输出：Hello, Alice!
 sayHello.apply(obj2); // 输出：Hello, Bob!

二、call方法

call方法和apply方法类似，也可以改变函数的this指向，但它的参数需要逐个传入，而不是作为数组。

 var obj1 = {name: 'Alice', age: 20};
 var obj2 = {name: 'Bob', age: 25};

 function sayHello() {
     console.log('Hello, ' + this.name + '!');
 }

 sayHello.call(obj1); // 输出：Hello, Alice!
 sayHello.call(obj2); // 输出：Hello, Bob!

三、bind方法

bind方法会创建一个新函数，新函数的this指向被绑定的对象，不会立即执行。

 var obj1 = {name: 'Alice', age: 20};
 var obj2 = {name: 'Bob', age: 25};

 function sayHello() {
     console.log('Hello, ' + this.name + '!');
 }

 var sayHelloToAlice = sayHello.bind(obj1);
 var sayHelloToBob = sayHello.bind(obj2);

 sayHelloToAlice(); // 输出：Hello, Alice!
 sayHelloToBob(); // 输出：Hello, Bob!

通过使用apply、call和bind方法，我们可以灵活地改变函数的this指向，使代码更具可读性和可维护性。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com