函数中的 apply,call 入门
牵扯到 apply,call 就要先说一下它们和函数的渊源
Javascript 函数既是也是对象
它和其它的 javascript 对象没有什么区别。并且每个函数都包含两个非继承而来的方法 apply() 和 call(), 这两个方法都可以间接的调用函数
例如:
function f() {
console.log(1);
}
f.call(); //1
f.apply(); //1
并且这两个方法都允许显示的指定函数调用后的 this 值。关于 this 值, 由于 this 值的是在进入执行上下文阶段被确认的，所以 this 的值让人琢磨不透。但是我们可以通过 apply() 和 call() 在函数调用时显示指定所需的 this 值。
那么 apply 和 call 方法到底是用来做什么的呢?
任何函数在调用时都可以被指定 this 值，作为 this 指向的对象的方法来调用。
那就意味这任何函数可以被任何对象调用, 这才是 apply 和 call 的方法的最终目的。
让我们来一个使用例子来理解
function Animal() {};
Animal.prototype = {
constructor: Animal,
other: function() {
console.log(‘ 这是一只 ’ + this.name);
}
}
var animal = new Animal();
// 定义一个对象
var dog = {
name: ‘ 狗 ’
};
// 我的 dog 对象想使用 Animal 函数的 other 方法怎么办，使用 call 或 apply
animal.other.call(dog);
animal.other.apply(dog);
在上面, 我们将 animal.other(思考一下它是什么, 是的，它本质上也是一个函数) 作为 dog 对象的方法调用。接下来, 我们运用的实际一些.
// 设置一个类数组对象
var arrLike = {
0: ‘ 我是 apply’,
1: ‘ 我是 call’,
length: 2
}
// 将 Arrar 的 slice 函数的 this 显式指向 arrLike, 并将 0 作为参数传入 slice 函数
var newArr = Array.prototype.slice.call(arrLike, 0);
// 等价于
arrLike.slice(0);
console.log(newArr);
对于 apply() 和 cal() 所有传入它们的第一个实参都会变为 this 的值，哪怕传入的实参是原始值，null,undefined。而如果传入的第一个实参是 undefined 和 null 在 ES3 和非严格模式下会被全局对象替换掉, 而其它的原始值则会被相应的包装对象所替代。
用通俗一点的话来说，Js 根本不在乎 apply/call 的第一个参数是什么, 函数仍然会被调用，只不过调用会不会报错是另一码事.
var str = ‘ 我是一个函数 ’;
// 将字符串传入, 但是 String 对象无法调用 slice 属性 报错
Array.prototype.pop.call(str);
为了能对这两个方法记忆深刻以及何时用这两个方法，列出一些常用的用法
首先, 就现在来说, 这两种方法的性能差异几乎忽略不记，所以他们之间如何使用呢?
apply() 方法适用于传入第二个参数是有序且参数不定的就使用 apply 方法，比如函数的 arguments 这个类数组对象就很适合作为参数传递。
function A(a, b, c) {
console.log(a, b, c);
}
var fn = (function(func, b, c) {
var args = arguments;
return () => {
func.apply(null, args);
}
}(A, 66, 99));
fn();
再比如说给数组追加元素
var arr1 = [1, 2, 3];
var arr2 = [66, 99, 131];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
同样将 arr2 数组作为参数传递。
而对于无序, 相互之间没有什么关联的参数, 就使用 call()
获取数组的最大值和最小值
var arr = [0, 1, 2, 3, 4];
// 获取最大数
var max1 = Math.max.apply(Math, arr),
max2 = Math.max.call(Math, 0, 1, 2, 3, 4),
// 获取最小数
min1 = Math.min.apply(Math, arr),
min2 = Math.min.call(Math, 0, 1, 2, 3, 4);
console.log(max1, max2, min1, min2);
arr 本身是没有 Math 方法的, 但是我们可以用 call 或者 apply 使用其方法
判断对象的具体类型
// 验证对象的具体类型
var arr = [];
var type = Object.prototype.toString.call(arr);
console.log(type);// [object Array]
在使用 typeof 时得到的结果都是 Object，无法判断具体是哪一种类型。于是可以用 Object.prototype.toString.call() 来获得具体类型。当然，前提是 toSting() 方法没有被重写过
将类数组对象转为真正的数组，通常我们使用 Array.prototype.slice.call() 来转换
var arrLike = {
length: 3,
0: ‘ 值 1 ’,
1: ‘ 值 2 ’,
2: ‘ 值 3 ’
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[‘ 值 1 ’, ‘ 值 2 ’, ‘ 值 3 ’] ‘[object Array]’
当然，splice,concat 也可以将类数组对象转数组.
这里普及一下类数组对象。通过索引访问元素, 并且拥有 length 属性也就是说, 需要满足两个条件,1. 使用序号定义属性，2. 拥有 length 属性，属性值为元素个数在使用序号定义属性时, 建议从 0 开始按顺序定义属性。否则会出现数组元素为 empty 的情况
var arrLike = {
length: 3,
0: ‘ 值 1 ’,
1: ‘ 值 2 ’,
3: ‘ 值 3 ’
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[‘ 值 1 ’, ‘ 值 2 ’, empty] [object Array]