首頁 > web前端 > js教程 > Javascript中function函數apply方法實例用法詳解

Javascript中function函數apply方法實例用法詳解

伊谢尔伦
發布: 2017-07-20 14:10:09
原創
2338 人瀏覽過

Function.prototype.apply()

apply方法的作用與call方法類似,也是改變this指向(函數執行時所在的作用域),然後在指定的作用域中,呼叫函數。同時也會立即執行該函數。唯一的區別就是,它接收一個數組作為函數執行時的參數。

apply方法的第一個參數也是this所要指向的那個對象,如果設為null或undefined或this,則等同於指定全域物件。第二個參數則是數組,數組的所有成員依序作為參數,在呼叫時傳入原函數。原函數的參數,在call方法中必須一個個添加,但是在apply方法中,必須以數組形式添加。

看一下call,apply的細微差別。


function keith(a, b) {
 console.log(a + b);
 }
 keith.call(null, 2, 3); //5
 keith.apply(null, [2, 3]); //5
登入後複製

上面程式碼中,第一個參數為null,指向全域作用域;第二個參數傳入的形式稍稍不同。

apply方法有以下應用。

3.1:找出陣列中的最大數


#
var a = [2, 4, 5, 7, 8, 10];
console.log(Math.max.apply(null, a)); //10
console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10 
登入後複製

Javascript中是沒有提供找出陣列中最大值的方法的,結合使用繼承自Function.prototype的apply和Math.max方法,就可以傳回陣列的最大值。

3.2:將陣列的空元素變成undefined

透過apply方法,利用Array建構子將陣列的空元素變成undefined。

console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

空元素與undefined的差異在於,陣列的forEach方法會跳過空元素,但是不會跳過undefined和null。因此,遍歷內部元素的時候,會得到不同的結果。


var a = [1, , 3];
 a.forEach(function(index) {
 console.log(index); //1,3 ,跳过了空元素。
 })
 Array.apply(null,a).forEach(function(index){
 console.log(index); ////1,undefined,3 ,将空元素设置为undefined
 })
登入後複製

3.3:轉換類似陣列的物件

另外,利用陣列物件的slice方法,可以將一個類似陣列的物件(例如arguments物件)轉為真正的陣列。當然,slice方法的一個重要應用,就是將類似陣列的物件轉為真正的陣列。 call和apply都可以實現該應用程式。


console.log(Array.prototype.slice.apply({0:1,length:1})); //[1]
console.log(Array.prototype.slice.call({0:1,length:1})); //[1]
console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined]
console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined]
function keith(a,b,c){
 return arguments;
 }
console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]
登入後複製

上面程式碼的call,apply方法的參數都是對象,但是返回結果都是數組,這就起到了將對象轉成數組的目的。從上面程式碼可以看到,這個方法運作的前提是,被處理的物件必須有length屬性,以及相對應的數字鍵。

以上是Javascript中function函數apply方法實例用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板