call 和apply 都是為了改變某個函數執行時間的context 即上下文而存在的,換句話說,就是為了改變函數體內部this 的指向。
call 和 apply二者的作用完全一樣,只是接受參數的方式不太一樣。
方法定義
apply
Function.apply(obj,args)方法能接收兩個參數:
obj:這個物件將取代Function類別裡this物件
#args:這個是數組或類別數組,apply方法把這個集合中的元素作為參數傳遞給被呼叫的函數。
call
call方法與apply方法的第一個參數是一樣的,只不過第二個參數是一個參數列表
在非嚴格模式下當我們第一個參數傳遞為null或undefined時,函數體內的this會指向預設的宿主對象,在瀏覽器中則是window
var test = function(){ console.log(this===window); } test.apply(null);//true test.call(undefined);//true
用法
"劫持"別人的方法
此時foo中的logName方法將被bar引用,this指向了bar
var foo = { name:"mingming", logName:function(){ console.log(this.name); } } var bar={ name:"xiaowang" }; foo.logName.call(bar);//xiaowang
實作繼承
function Animal(name){ this.name = name; this.showName = function(){ console.log(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName(); //Black Cat
在實際開發中,常常會遇到this指向被不經意改變的場景。
有一個局部的fun方法,fun被呼叫為普通函數時,fun內部的this#指向了window,但我們往往是想讓它指向該#test節點,請參見如下程式碼:
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun();//window }
使用call ,apply我們就可以輕鬆的解決這種問題了
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun.call(this);//test }
當然你也可以這樣做,不過在ECMAScript 5的strict模式下,這種情況下的this已經被規定為不會指向全域對象,而是undefined:
window.id="window"; document.querySelector('#test').onclick = function(){ var that = this; console.log(this.id);//test var fun = function(){ console.log(that.id); } fun();//test }
function func(){ "use strict" alert ( this ); // 输出:undefined } func();
以上是javascript改變函數體內部指向的apply與call用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!