js中call()、apply()、bind()函数之间的区别

call()函数

call() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。

通过 call(),我们能够使用属于另一个对象的方法。

call()函数语法

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

• thisArg:在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
• arg1, arg2, ...指定的参数列表。

call()函数的应用

var person = {
    firstName:"Li",
    lastName: "Si",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
person.fullName();		
// 将返回 "Li Si"

fullName 属性是一个方法。person 对象是该方法的拥有者。
fullName 属性属于 person 对象的方法。

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Li",
    lastName: "Si",
}
var person2 = {
    firstName:"Wang",
    lastName: "Wu",
}
person.fullName.call(person1);  
// 将返回 "Li Si"

person.fullName.call(person2);  
// 将返回 "Wang Wu"

本例调用 person 的 fullName 方法，分别用于 person1 person2返回的结果

带参数的 call() 方法

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Li",
  lastName: "Si"
}
person.fullName.call(person1, "BeiJing", "China");
//返回 Li Si,Beijing,China

apply()函数

apply() 方法与 call() 方法非常相似

apply()函数语法

fun.apply(thisArg, [argsArray])

• thisArg： 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this值，如果这个函数处于非严格模式下，则指定为 null 或 undefined时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
• argsArray: 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

apply()函数的应用

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Li",
    lastName: "Si",
}
var person2 = {
    firstName:"Wang",
    lastName: "Wu",
}
person.fullName.apply(person1);  
// 将返回 "Li Si"

person.fullName.apply(person2);  
// 将返回 "Wang Wu"

带参数的 apply() 方法

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"Li",
  lastName: "Si"
}
person.fullName.apply(person1, ["BeiJing", "China"]);
//返回 Li Si,Beijing,China

bind()函数

bind()方法，用来创建一个函数的实例----(新函数)，其新函数的this值会被绑定到给定bind()的第一个参数。

bind()函数语法

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

• thisArg :当绑定函数被调用时，该参数会作为原函数运行时的this指向。当使用new 操作符调用绑定函数时，该参数无效。
• arg1, arg2, ...: 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

bind()函数的应用

var obj = {color: 'blue'}; 
function sayColor() {alert(this.color)}; 
//此时this指向window
var objColor = sayColor.bind(obj); 
objColor(); 
// blue 

带参数的 bind() 方法

var m = {    
  "x" : 1 
}; 
function foo(y) { 
  console.log(this.x + y); 
} 
foo.apply(m, [5]); 
//6
foo.call(m, 5); 
//6
var foo1 = foo.bind(m, 5); 
foo1();
//6

call()、apply()、bind()函数之间的区别

相同点：

• 三者都是用于改变函数体内this的指向
• 如果第一个参数没有传入，在全局环境下，那么默认this指向 window（浏览器） / global（node）(非严格模式)

区别：

• 使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，需要全部列举出来。apply和call的调用返回函数执行结果
• bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。

用原生JS实现call() apply() bind()