在javaScript中，每个函数实际上都是一个Function对象。call、apply和bind就是Function自带的方法。下面对这三个方法进行讲解。
1. fun.call(thisArg, arg1, arg2, ...)
参数：
thisArg: 在fun函数运行时指定的this值。但是this值不一定是该函数执行时真正的this值，如果处于非严格模式(non-strict mode), 则指定null和undefined的this值会自动指向全局对象(浏览器中是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, .... : 指定的参数列表。
说明：call()允许为不同的对象分配和调用属于一个对象的函数/方法。提供新的this值给当前调用的函数/方法。可以使用call来实现继承。
示例：
使用call方法调用父构造函数：
在子构造函数中，通过调用父构造函数的call方法来实现继承，下例中，Food和Toy构造函数创建的对象都会拥 有在Product构造函数中添加的name属性和price属性，而category属性是在各自的构造函数中定义的。
function Product(name, price){
this.name = name;
this.price = price;
}
function Food(name, price){
Product.call(this, name, price);
this.category = 'food';
}
function Toy(name, price){
Product.call(this, name, price);
this.category = 'toy';
}
var cheese = new Food('feta', 5);
console.log(cheese.name); // 输出：feta
var fun = new Toy('robot', 40);
console.log(fun.name); // 输出：robot
使用call方法调用匿名函数:
在下例的for循环中构造一个匿名函数，通过调用匿名函数的call方法，将每个数字元素作为指定的this值执行了 匿名函数
const animals = [
{ species: 'Lion', name: 'King' },
{ species: 'Whale', name: 'Fail' }
];
for(let i = 0; i < animals.length; i++){
(function(){
this.print = function() {
console.log('#' + i + ' ' + this.species + ': ' + this.name);
}
}).call(animals[i], i);
}
执行上述代码将输出：
#0 Lion: King
#1 Whale: Fail
使用call方法调用函数并确定上下文的this:
下例中调用greet方法时，改方法的this值会绑定到obj对象。
function greet(){
const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
console.log(reply);
}
const obj = {
animal: 'cats', sleepDuration: '12 and 16 hours'
}
greet.call(obj);
输出结果为：cats typically sleep between 12 and 16 hours
call方法调用函数并且没有确定第一个参数：
下例中调用display方法，但是没有传递它的第一个参数。如果没有传递第一个参数，this的值将会被绑定为全局对象
const sData = 'Wisen';
function display(){
console.log('sData value is %s ', this.sData);
}
display.call();
将输出：sData value is Wisen
注意：在严格模式下this的值会是undefined.
2. func.apply(thisArg, [argsArray])
参数：
thisArg: func函数运行时使用的this值，this可能不是改方法看到的实际值，如何处于非严格模式下，则指定为null或undefined时会自动替换为指向全局对象，原始值会被包装。
argsArray: 一个数组或类数组对象，数组元素将作为单独的参数传给func函数。如果该参数值为null或undefined，则表示不需要传入任何参数
说明：
调用一个存在的函数时，为其指定一个this对象。this指向当前对象，也就是正在调用这个函数的对象。使用apply可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写改方法。
示例：
用apply将数组添加到另一个数组中：
const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]
使用apply和内置函数
const numbers = [5, 6, 2, 3, 7];
// 应用(apply) Math.min/Math.max 内置函数完成
const max = Math.max.apply(null, numbers); // 基本等同于Math.max(numbers[0], ...)或Math.max(5,6...)
const min = Math.min.apply(null, numbers);
注意：如果用上面的方式调用apply，会有超出JS引擎的参数长度限制的风险。如果参数数组可能非常大，推荐使用下面这种策略来处理：将参数数组切块后循环传入目标方法：
function minOfArray(arr){
const min = Infinity;
const QUANTUM = 32768;
for(let i = 0, len = arr.length; i < len; i += QUANTUM){
const submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
min = Math.min(submin, min);
}
return min;
}
const min = minOfArray([5,6,2,3,7]);
3. function.bind(thisArg[, arg1[, arg2[,...]]])
参数：
thisArg: 调用绑定函数时作为this参数传递给目标函数的值。如果使用new运算符构造绑定函数，则忽略该值。
arg1,arg2,...: 当目标函数被调用时，预先添加到绑定函数的参数列表中的参数。
说明：
bind()函数会创建一个新的绑定函数，调用绑定函数通常会导致执行包装函数。
示例：
创建绑定函数：
bind()最简单的用法是创建一个函数，不论怎么调用，这个函数都有同样的this值。常见一个错误是将一个方法从对象中拿出来，然后调用，期望方法中的this是原来的对象。如果不做特殊处理，一般会丢失原来的对象。
this.x = 9; // 在浏览器中，this指向全局的"window"对象
const module = {
x: 81,
getX: function(){ return this.x; }
};
module.getX(); // 81
const retrieveX = module.getX;
retrieveX(); // 返回9 因为函数是在全局作用域中调用的
const boundGetX = retrieveX.bind(module); // 创建一个新函数，吧this绑定到module对象
boundGetX(); // 81
偏函数：
bind()的另一个最简单的用法是使用一个函数拥有预设的初始化参数。将这些参数作为bind()的参数写在this后面。当绑定函数被调用时，这些参数会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们后面。
function list(){
return Array.prototype.slice.call(arguments);
}
function addArguments(arg1, arg2){
return arg1 + arg2;
}
const list1 = list(1,2,3); // [1, 2, 3]
const result1 = addArguments(1,2); // 3
const leadingThirtysevenList = list.bind(null, 37); // 创建一个函数，它拥有预设参数列表
const addThirtySeven = addArguments.bind(null, 37); // 创建一个函数，他拥有预设的第一个参数
const list2 = leadingThirtysevenList(); // [37]
const list3 = leadingThirtysevenList(); // [37, 1, 2, 3]
const result2 = addThirtySeven(5); // 37 + 5 = 42
const result3 = addThirtySeven(5, 10); // 37 + 5 = 42，第二个参数被忽略
以上就是这三个方法的讲解，注意的是：call()方法的作用和apply()方法类似，只有一个区别就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。
网友评论