1. 程式人生 > >快速理解js中的call,apply的作用

快速理解js中的call,apply的作用

今天被人問到js中的call,apply的區別和用途,解釋了一番後,想到之前在逼乎上看到一位小夥伴生動形象的解釋

本身不難理解,看下MDN就知道了,但是不常用,遇到了,還要腦回路迴轉下。或者時間長了,還是要確定下去看下文件,為了方便記憶:

貓吃魚,狗吃肉,奧特曼打小怪獸。

有天狗想吃魚了

貓.吃魚.call(狗,魚)

狗就吃到魚了

貓成精了,想打怪獸

奧特曼.打小怪獸.call(貓,小怪獸)

或者 馬雲.賺錢.call(我)

 

還有一位楊志大佬解釋的更清楚

我們要先明白存在call和apply的原因,才能記得牢一點:
在javascript OOP中,我們經常會這樣定義:  
function
cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var blackCat = new cat; blackCat.say();

 

但是如果我們有一個物件 whiteDog = {food:"bone"}, 我們不想對它重新定義say方法,

那麼我們可以通過call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是為了動態改變this而出現的,當一個object沒有某個方法,但是其他的有,我們可以藉助call或apply用其它物件的方法來操作。

用的比較多的,通過document.getElementsByTagName選擇的dom 節點是一種類似array的array。

它不能應用Array下的push,pop等方法。我們可以通過:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

 

這樣domNodes就可以應用Array下的所有方法了。

其他的就不提了,講多了反而迷惑。  

call 和apply的用法都是一樣的,知識傳參不同,apply是陣列,call是引數

就這樣記住了。