摘要:難兄難弟我是里的方法,我和方法是難兄難弟。有些地方沒有咱倆還真不行。我可以改變被調用方法內部的指向指向第一個參數。這個時候我方法就無能為力了,只能讓幫你了也可以使用運算符最后我們這對難兄難弟其實一點也不難啊
難兄難弟
我是js里的call方法,我和apply方法是難兄難弟。為什么這么說呢,因為很多前端小白看到咱倆就犯怵: "WTF!這是什么方法,根本看不懂啊!"然后去谷歌去百度,回來還是:"WTF!還是沒懂!"。然后就把咱倆丟在一邊不管了,心想:"哎,能不用就不用吧,反正也不見得用得著"。
借過來玩一玩其實只要你認真的研究一下, 就會發現我和我哥們一點也不難。有些地方沒有咱倆還真不行。要說咱倆有啥用,我管咱倆的功能叫借過來玩一玩。你看下面的例子啊:
let cat = { food: "fish", eat: function() { console.log("I want to eat " + this.food); }, sleep: function(time) { console.log("I sleep" + time); } } let dog = { food: "bone", playBall: function() { console.log("I am a doggy, I love playing ball"); } } dog.playBall(); //I am a doggy, I love playing ball cat.eat(); //I want to eat fish cat.eat.call(dog); //I want to eat bone
喵星人那里定義了eat方法,而汪星人里邊只定義了playBall方法,懶惰的汪星人不想在自己內部再定義一個重復的eat方法,但是又想吃吃吃,那怎么辦呢?
當然就是通過我call方法來找喵星人把eat方法借過來玩一玩啦。所以呢:
cat.eat.call(dog);的意思就是:喵哥!你的eat方法借dog玩一玩唄!你那個eat方法里的this現在指向了dog了啊!
這下你明白了為啥我的功能是借過來玩一玩了吧:
1.沒有的方法我去別人那里借。
2.我可以改變被調用方法內部的this指向, this指向第一個參數。
除此之外,你可能會問了,假如我要調用的函數要接收參數,要怎么辦呢?那么可以用到我call方法接收的第2,3,4...個參數了!
cat.sleep.call(dog, "all day"); //I sleep all day我和我哥們apply的區別
我和我哥們apply區別很小很小,因為咱倆的主要功能都是一樣的,都是借方法過來玩一玩外加改變this的指向,咱倆唯一的不同在于:
對于要借過來玩一玩的函數:
function myFunction(arg1, arg2, arg3, arg4) { console.log(arg1); console.log(arg2); console.log(arg3); console.log(arg4); }
我call的使用方法是myFunction.call(null, "1", "2", "3", "4")
而apply的使用方法是myFunction.apply(null, ["1", "2", "3", "4"])
看出來了么,apply這哥們有強迫癥!他要把傳進去的參數用數組包起來!而我就是一個一個往里傳。你要是怕記混咱倆,你就這么記: 我是call,call就是打電話啊,打電話不得一個一個打嗎,所以我的參數是一個個獨立的。
你可能又要問了:既然你倆區別這么小,而且看你上面的例子,既能用call又能用apply,那你倆這區別有啥用啊?
嘿嘿嘿,當然有用啦,看我給你舉個栗子啊:
//這個函數熟悉吧?求傳入參數的最大值 Math.max(1, 2, 3); //3
如果你是想求一個數組中的最大值, 咋辦?把數組傳入Math.max?當然不行,不信的話你可以試一下。這個時候我call方法就無能為力了,只能讓apply幫你了:
let myArray = [1, 2, 3]; Math.max.apply(null, myArray);
ps: 也可以使用...運算符Math.max(...myArray);
最后我們這對難兄難弟其實一點也不難啊!(╯﹏╰)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89293.html
摘要:的作用在中,方法和方法都是為了改變函數運行時上下文而存在的,換句話說就是為了改變函數體內部的指向。歡迎前端大牛糾正錯誤,如有錯誤我會及時改正。 寫在前面: 隔了很長時間了,也不知道寫點什么。最近一直在研究ES6,一直想寫出來的文章能對初學者或者是在學習JS路上有所幫助的。這就是我的初衷。 call、apply的作用 在JavaScript中,call()方法和apply()方法都是為了...
摘要:深入系列第十篇,通過和的模擬實現,帶你揭開和改變的真相一句話介紹方法在使用一個指定的值和若干個指定的參數值的前提下調用某個函數或方法。如果有錯誤或者不嚴謹的地方,請務必給予指正,十分感謝。 JavaScript深入系列第十篇,通過call和apply的模擬實現,帶你揭開call和apply改變this的真相 call 一句話介紹 call: call() 方法在使用一個指定的 this...
摘要:也就是說當返回的函數作為構造函數的時候,時指定的值會失效,但傳入的參數依然生效。構造函數效果的優化實現但是在這個寫法中,我們直接將,我們直接修改的時候,也會直接修改函數的。 JavaScript深入系列第十一篇,通過bind函數的模擬實現,帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會創建一個新函數。當這個新函數被調用時,bind() 的第一個參數...
摘要:第一版首先要獲取調用的函數,用可以獲取的指向為,因為是的實例相當于把掛載到上,所以可以取到測試一下但是第一版不可以傳遞多個參數第二版這里會自動調用這個方法。 // 第一版 Function.prototype.call2 = function(context) { // 首先要獲取調用call的函數,用this可以獲取 // this的指向為bar,因為bar是Func...
摘要:深入系列第十二篇,通過的模擬實現,帶大家揭開使用獲得構造函數實例的真相一句話介紹運算符創建一個用戶定義的對象類型的實例或具有構造函數的內置對象類型之一也許有點難懂,我們在模擬之前,先看看實現了哪些功能。 JavaScript深入系列第十二篇,通過new的模擬實現,帶大家揭開使用new獲得構造函數實例的真相 new 一句話介紹 new: new 運算符創建一個用戶定義的對象類型的實例或具...
閱讀 3708·2023-04-26 00:56
閱讀 2686·2021-09-30 10:01
閱讀 961·2021-09-22 15:30
閱讀 3915·2021-09-07 10:21
閱讀 1507·2021-09-02 15:40
閱讀 2750·2021-08-30 09:47
閱讀 1234·2021-08-16 10:57
閱讀 1862·2019-08-30 14:01