摘要:的作用在中,方法和方法都是為了改變函數(shù)運(yùn)行時(shí)上下文而存在的,換句話說就是為了改變函數(shù)體內(nèi)部的指向。歡迎前端大牛糾正錯(cuò)誤,如有錯(cuò)誤我會(huì)及時(shí)改正。
寫在前面:
隔了很長(zhǎng)時(shí)間了,也不知道寫點(diǎn)什么。最近一直在研究ES6,一直想寫出來的文章能對(duì)初學(xué)者或者是在學(xué)習(xí)JS路上有所幫助的。這就是我的初衷。
call、apply的作用在JavaScript中,call()方法和apply()方法都是為了改變函數(shù)運(yùn)行時(shí)上下文而存在的,換句話說:就是為了改變函數(shù)體內(nèi)部 this 的指向。
在JavaScript中,也可以說再OOP JavaScript思想編程中,其實(shí)最繞的地方就是:函數(shù)被定義時(shí)的上下文、運(yùn)行時(shí)的上下文、上下文的改變。
我們先來定義一個(gè)構(gòu)造函數(shù)(constructor)然后改變指向:
function Fn() {} Fn.prototype = { color:"red", say:function () { alert(this.color); } }; var fn = new Fn(); fn.say(); //返回red
這是一個(gè)很普通的構(gòu)造函數(shù),給原型new了一個(gè)新的對(duì)象,然后添加一個(gè)屬性和方法。那么我們?nèi)绻賱?chuàng)建一個(gè)對(duì)象呢,不想給這個(gè)新的對(duì)象添加方法怎么去公用上面這個(gè)方法呢?
var Fn1 = { color:"yellow" }; var fn = new Fn(); fn.say.call(Fn1); //使用call()方法返回yellow fn.say.apply(Fn1); //使用apply()方法返回yellow
所以,可以看出 call()和 apply()是為了動(dòng)態(tài)改變 this 而出現(xiàn)的,當(dāng)一個(gè)對(duì)象(Object)沒有這個(gè)方法,但是其他的Fn原型里面有這個(gè)方法,我們可以借助call或apply用其它對(duì)象的方法來操作。
大家是不是感覺這個(gè)call()和apply()沒什么差距對(duì)吧?
對(duì)于使用者而言,call與apply的作用完全一樣,不過它們接受的參數(shù)不一樣:
call()方法中的其余的參數(shù)必須直接傳給函數(shù)
apply()接收兩個(gè)參數(shù):一個(gè)參數(shù)是在其中運(yùn)行的作用域,另一個(gè)是參數(shù)數(shù)組(可以是Array實(shí)例,也可以是arguments對(duì)象).
也可以理解為其實(shí)call傳參為固定的必須知道你有多少個(gè)參數(shù)傳進(jìn)去,而apply可以傳一個(gè)數(shù)組。
當(dāng)明確知道傳參數(shù)量時(shí)使用call()而不確定的時(shí)候使用apply()方法然后把參數(shù)push進(jìn)數(shù)組傳遞進(jìn)去,函數(shù)內(nèi)部也可以通過 arguments 這個(gè)數(shù)組來遍歷所有的參數(shù)。
深入理解call與applyfunction box(msg) { alert(msg); } box(1); //1 box(1,2); //1
上面的這個(gè)函數(shù)就是沒有確定實(shí)參數(shù)量,這個(gè)時(shí)候就可以考慮使用call或者apply,剛剛講過,只有apply在不確定的數(shù)量的時(shí)候使用最佳。
function?box(){ ?console.log.apply(console,arguments); }; box(1);?//1 box(1,2);?//1 2
這一章差不多就講完了,其實(shí)要點(diǎn)沒多少知識(shí)點(diǎn),主要就是充分掌握了技巧與思想,JavaScript就會(huì)變的很容易。歡迎前端大牛糾正錯(cuò)誤,如有錯(cuò)誤我會(huì)及時(shí)改正。謝謝~
(PS:其實(shí)一直不知道寫什么,所以這么長(zhǎng)時(shí)間沒更新,如果大家想看JS哪些方面的,在我了解與掌握的前提下還是可以寫一寫的。我的郵箱:[email protected])
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/81509.html
摘要:深入系列第十篇,通過和的模擬實(shí)現(xiàn),帶你揭開和改變的真相一句話介紹方法在使用一個(gè)指定的值和若干個(gè)指定的參數(shù)值的前提下調(diào)用某個(gè)函數(shù)或方法。如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?,?qǐng)務(wù)必給予指正,十分感謝。 JavaScript深入系列第十篇,通過call和apply的模擬實(shí)現(xiàn),帶你揭開call和apply改變this的真相 call 一句話介紹 call: call() 方法在使用一個(gè)指定的 this...
摘要:也就是說當(dāng)返回的函數(shù)作為構(gòu)造函數(shù)的時(shí)候,時(shí)指定的值會(huì)失效,但傳入的參數(shù)依然生效。構(gòu)造函數(shù)效果的優(yōu)化實(shí)現(xiàn)但是在這個(gè)寫法中,我們直接將,我們直接修改的時(shí)候,也會(huì)直接修改函數(shù)的。 JavaScript深入系列第十一篇,通過bind函數(shù)的模擬實(shí)現(xiàn),帶大家真正了解bind的特性 bind 一句話介紹 bind: bind() 方法會(huì)創(chuàng)建一個(gè)新函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí),bind() 的第一個(gè)參數(shù)...
摘要:難兄難弟我是里的方法,我和方法是難兄難弟。有些地方?jīng)]有咱倆還真不行。我可以改變被調(diào)用方法內(nèi)部的指向指向第一個(gè)參數(shù)。這個(gè)時(shí)候我方法就無能為力了,只能讓幫你了也可以使用運(yùn)算符最后我們這對(duì)難兄難弟其實(shí)一點(diǎn)也不難啊 難兄難弟 我是js里的call方法,我和apply方法是難兄難弟。為什么這么說呢,因?yàn)楹芏嗲岸诵“卓吹皆蹅z就犯怵: WTF!這是什么方法,根本看不懂??!然后去谷歌去百度,回來還是:...
摘要:第一版首先要獲取調(diào)用的函數(shù),用可以獲取的指向?yàn)椋驗(yàn)槭堑膶?shí)例相當(dāng)于把掛載到上,所以可以取到測(cè)試一下但是第一版不可以傳遞多個(gè)參數(shù)第二版這里會(huì)自動(dòng)調(diào)用這個(gè)方法。 // 第一版 Function.prototype.call2 = function(context) { // 首先要獲取調(diào)用call的函數(shù),用this可以獲取 // this的指向?yàn)閎ar,因?yàn)閎ar是Func...
摘要:深入系列第十二篇,通過的模擬實(shí)現(xiàn),帶大家揭開使用獲得構(gòu)造函數(shù)實(shí)例的真相一句話介紹運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一也許有點(diǎn)難懂,我們?cè)谀M之前,先看看實(shí)現(xiàn)了哪些功能。 JavaScript深入系列第十二篇,通過new的模擬實(shí)現(xiàn),帶大家揭開使用new獲得構(gòu)造函數(shù)實(shí)例的真相 new 一句話介紹 new: new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具...
閱讀 2382·2023-04-26 00:01
閱讀 832·2021-10-27 14:13
閱讀 1882·2021-09-02 15:11
閱讀 3415·2019-08-29 12:52
閱讀 561·2019-08-26 12:00
閱讀 2597·2019-08-26 10:57
閱讀 3438·2019-08-26 10:32
閱讀 2873·2019-08-23 18:29