首頁 > web前端 > js教程 > 主體

javascript改變函數體內部指向的apply與call用法實例詳解

伊谢尔伦
發布: 2017-07-20 14:20:54
原創
1429 人瀏覽過

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 5strict模式下,這種情況下的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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!