快速理解js中的call,apply的作用
阿新 • • 發佈:2019-01-10
今天被人問到js中的call,apply的區別和用途,解釋了一番後,想到之前在逼乎上看到一位小夥伴生動形象的解釋
本身不難理解,看下MDN就知道了,但是不常用,遇到了,還要腦回路迴轉下。或者時間長了,還是要確定下去看下文件,為了方便記憶:
貓吃魚,狗吃肉,奧特曼打小怪獸。
有天狗想吃魚了
貓.吃魚.call(狗,魚)
狗就吃到魚了
貓成精了,想打怪獸
奧特曼.打小怪獸.call(貓,小怪獸)
或者 馬雲.賺錢.call(我)
還有一位楊志大佬解釋的更清楚
我們要先明白存在call和apply的原因,才能記得牢一點:在javascript OOP中,我們經常會這樣定義:
functioncat(){ } 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是引數
就這樣記住了。