詳解js中的apply與call的用法

2019-11-20 09:22:45

字體：大中小

供稿：網(wǎng)友

前言

call 和 apply 都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的 context 即上下文而存在的，換句話說(shuō)，就是為了改變函數(shù)體內(nèi)部 this 的指向。
call 和 apply二者的作用完全一樣，只是接受參數(shù)的方式不太一樣。

方法定義
apply
Function.apply(obj,args)方法能接收兩個(gè)參數(shù)：

obj：這個(gè)對(duì)象將代替Function類里this對(duì)象

args：這個(gè)是數(shù)組或類數(shù)組，apply方法把這個(gè)集合中的元素作為參數(shù)傳遞給被調(diào)用的函數(shù)。

call

call方法與apply方法的第一個(gè)參數(shù)是一樣的，只不過(guò)第二個(gè)參數(shù)是一個(gè)參數(shù)列表

在非嚴(yán)格模式下當(dāng)我們第一個(gè)參數(shù)傳遞為null或undefined時(shí)，函數(shù)體內(nèi)的this會(huì)指向默認(rèn)的宿主對(duì)象，在瀏覽器中則是window

var test = function(){  console.log(this===window);}test.apply(null);//truetest.call(undefined);//true

用法

"劫持"別人的方法

此時(shí)foo中的logName方法將被bar引用，this指向了bar

var foo = {  name:"mingming",  logName:function(){    console.log(this.name);  }}var bar={  name:"xiaowang"};foo.logName.call(bar);//xiaowang

實(shí)現(xiàn)繼承

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

在實(shí)際開發(fā)中，經(jīng)常會(huì)遇到this指向被不經(jīng)意改變的場(chǎng)景。
有一個(gè)局部的fun方法，fun被作為普通函數(shù)調(diào)用時(shí)，fun內(nèi)部的this指向了window，但我們往往是想讓它指向該#test節(jié)點(diǎn)，見(jiàn)如下代碼：

window.id="window";document.querySelector('#test').onclick = function(){  console.log(this.id);//test  var fun = function(){    console.log(this.id);  }  fun();//window}

使用call,apply我們就可以輕松的解決這種問(wèn)題了

window.id="window";document.querySelector('#test').onclick = function(){  console.log(this.id);//test  var fun = function(){    console.log(this.id);  }  fun.call(this);//test}

當(dāng)然你也可以這樣做，不過(guò)在ECMAScript 5的strict模式下，這種情況下的this已經(jīng)被規(guī)定為不會(huì)指向全局對(duì)象，而是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();

其他用法

類數(shù)組

這里把符合以下條件的對(duì)象稱為類數(shù)組

1.具有l(wèi)ength屬性

2.按索引方式存儲(chǔ)數(shù)據(jù)

3.不具有數(shù)組的push,pop等方法

常見(jiàn)類數(shù)組有 arguments,NodeList!

(function(){  Array.prototype.push.call(arguments,4);  console.log(arguments);//[1, 2, 3, 4]})(1,2,3)

這樣就往arguments中push一個(gè)4進(jìn)去了

Array.prototype.push 頁(yè)可以實(shí)現(xiàn)兩個(gè)數(shù)組合并

同樣push方法沒(méi)有提供push一個(gè)數(shù)組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過(guò)apply來(lái)裝換一下這個(gè)數(shù)組,即:

var arr1=new Array("1","2","3"); var arr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2); console.log(arr1);//["1", "2", "3", "4", "5", "6"]

也可以這樣理解,arr1調(diào)用了push方法,參數(shù)是通過(guò)apply將數(shù)組裝換為參數(shù)列表的集合.

再比如我想求類數(shù)組中的最大值

(function(){  var maxNum = Math.max.apply(null,arguments);  console.log(maxNum);//56})(34,2,56);

判斷類型

console.log(Object.prototype.toString.call(123)) //[object Number]console.log(Object.prototype.toString.call('123')) //[object String]console.log(Object.prototype.toString.call(undefined)) //[object Undefined]console.log(Object.prototype.toString.call(true)) //[object Boolean]console.log(Object.prototype.toString.call({})) //[object Object]console.log(Object.prototype.toString.call([])) //[object Array]console.log(Object.prototype.toString.call(function(){})) //[object Function]

以上就是apply與call的用法總結(jié)的全部?jī)?nèi)容，歡迎大家積極留言參加討論，也希望本文對(duì)大家學(xué)習(xí)javascript有所幫助。

上一篇：如何檢測(cè)JavaScript的各種類型