JavaScript中如何传递参数？对象绑定与函数参数传递问题

嘿，我来帮你搞定这个绑定上下文和传参的问题～

首先先回顾你的原始代码：

var Person = { 
  name: "jana", 
  getName: function(callBack) { 
    callBack(); 
    console.log("** "+this.name); 
  } 
} 
var anotherPerson = { name: "prabu"}

你的需求很清晰：要把anotherPerson作为getName方法的this上下文，同时给这个方法传递一个回调函数参数。咱们先看看你尝试的两种写法哪里出问题了：

• 第一种写法Person.getName.apply(anotherPerson, function(){})：apply方法的第二个参数必须是一个数组，你直接传了单个函数，不符合语法要求，所以会触发错误。
• 第二种写法Person.getName.apply(anotherPerson)(function(){})：apply调用后会直接执行getName方法，但getName本身没有返回任何函数，所以你后面的(function(){})相当于对undefined执行函数调用，自然会报错。

正确的写法有这几种： #

1. 使用apply（适合参数数量不确定的场景）

把回调函数放在数组里作为apply的第二个参数：

Person.getName.apply(anotherPerson, [function(){
  console.log("我是传入的回调函数");
}]);

执行后会输出：

我是传入的回调函数
** prabu

2. 使用call（参数数量固定时更直观）

call和apply的区别就是参数传递方式：call直接把参数依次列在上下文后面：

Person.getName.call(anotherPerson, function(){
  console.log("我是传入的回调函数");
});

执行结果和上面完全一致。

3. 使用bind（适合需要重复调用绑定后的方法）

bind不会立即执行函数，而是返回一个已经绑定好上下文的新函数，之后你可以随时调用它并传入参数：

// 先绑定上下文
var boundGetName = Person.getName.bind(anotherPerson);
// 之后调用时传回调参数
boundGetName(function(){
  console.log("我是传入的回调函数");
});

简单总结下这三个方法的区别： #

• call：立即执行函数，第一个参数是上下文，后续是逐个传入的参数
• apply：立即执行函数，第一个参数是上下文，第二个参数是包含所有参数的数组
• bind：返回绑定好上下文的新函数，不会立即执行，后续调用时再传参数

内容的提问来源于stack exchange，提问作者jana91