JavaScript函数传递的秘密武器：apply、call和bind的完全指南

秘密武器：apply、call和bind的完全指南"/>

JavaScript函数传递的秘密武器：apply、call和bind的完全指南

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript小贴士
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

这是有关call和apply和bind三个函数方法的使用 ,还有它们与this的显示绑定有着深度的联系，如果有小伙伴对于this指向的概念不是很清楚的话，可以查看我的另外一篇博客，学习JavaScript的this的使用和原理,希望可以帮助到大家，欢迎大家的补充和纠正

文章目录

• • call()和apply(),bind()方法
  • • 1 Function.prototype.call()方法
    • 2 Function.prototype.apply()方法
    • 3 Function.prototype.bind()方法
    • 4 这三种方法的区别：

call()和apply(),bind()方法

1 Function.prototype.call()方法

定义:

call() 是函数对象的一个方法，它用于调用函数并指定函数内部的 this 值，并且可以传递一个或多个参数给函数

语法：

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

参数：

• function 是要调用的函数。
• thisArg 是要将作为 this 值传递给函数的对象。
• arg1, arg2, … 是要传递给函数的参数（可选）

实例：

var person = {firstName: "John",lastName: "Doe",fullName: function() {return this.firstName + " " + this.lastName;}
};var anotherPerson = {firstName: "Jane",lastName: "Smith"
};var fullName = person.fullName.call(anotherPerson);
console.log(fullName); // 输出 "Jane Smith"

call() 方法允许我们在 anotherPerson 对象上调用 person 对象的 fullName 方法，将 this 设置为 anotherPerson，以便正确访问 firstName 和 lastName 属性。

function fun(a,b){console.log('a ='+a);console.log('b ='+b);console.log('fun ='+this);this.syaName();
}var obj={name:"obj",syaName:function(){console.log(this.name)}
};// fun(2,3)console.log("===============")fun.call(obj,2,3);

注意：默认fun()函数调用，this指向的是window对象，你可以使用call()调用函数，在调用的时候传入一个对象，这个对象就是this所指向的对象，也就是说，可以自己指定this的指向，然后从第二个参数开始，实参将会依次传递

2 Function.prototype.apply()方法

定义：

apply() 方法与 call() 方法类似，也用于调用函数并指定函数内部的 this 值，但不同之处在于它接受参数的方式。而 call() 方法将参数作为一个一个的参数传递，apply() 方法接受参数作为一个数组

语法：

function.apply(thisArg, [argsArray])

参数：

• function 是要调用的函数。
• thisArg 是要将作为 this 值传递给函数的对象。
• argsArray 是一个包含要传递给函数的参数的数组。

实例：

function fun(a,b){console.log('a ='+a);console.log('b ='+b);console.log('fun ='+this);
}var obj={name:"obj",syaName:function(){console.log(this.name)}
};fun(2,3)console.log("===============")fun.call(obj,[2,3]);

注意：默认fun()函数调用，this指向的是window对象，你可以使用apply()调用函数，在调用的时候传入一个对象，这个对象就是this所指向的对象，也就是说，可以自己指定this的指向，然后从第二个参数开始，需要制定一个实参数组进行参数传递

3 Function.prototype.bind()方法

定义：

bind() 方法也用于改变函数的执行上下文（this 值），但与 call() 和 apply() 不同，bind() 不会立即调用函数，而是返回一个新的函数，该新函数绑定了指定的上下文，可以稍后调用

语法：

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

参数：

• function 是要绑定上下文的函数。
• thisArg 是要将作为 this 值传递给函数的对象。
• arg1, arg2, … 是要传递给函数的参数（可选）。

实例：

var greet = function(greeting) {console.log(greeting + ", " + this.name);
};var person = {name: "John"
};var greetJohn = greet.bind(person, "Hello");
greetJohn(); // 输出 "Hello, John"

在上面的示例中，bind() 方法创建了一个新的函数 greetJohn，它在调用时将 this 设置为 person 对象，并在调用时传递 “Hello” 作为参数。不像 call() 和 apply()，bind() 并没有立即执行函数，而是返回了一个函数，可以稍后调用

4 这三种方法的区别：

• 参数区别： call() 和 apply() 接受参数列表或数组作为参数，而 bind() 接受参数列表作为逗号分隔的参数。
• 在this的绑定的时候，call()和apply()方法实现的显示绑定是可能会丢失this的绑定，而bind()实现的是硬绑定，bind(…) 会返回一个硬编码的新函数，它会把参数设置为 this 的上下文并调用原始函数
  更加详情的this绑定知识请移步到 学习JavaScript的this的使用和原理的长篇博客