###函數中的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]
復制代碼