JS箭頭函數(shù)與傳統(tǒng)JavaScript函數(shù)使用與區(qū)別

箭頭函數(shù)的特性:
  • 對this的關(guān)聯(lián)党窜。箭頭函數(shù)內(nèi)置的this的值壳澳,取決于箭頭函數(shù)在哪定義又谋,而非箭頭函數(shù)執(zhí)行的上下文環(huán)境荞胡。
  • new不可用妈踊。箭頭函數(shù)內(nèi)不能使用new關(guān)鍵字來實例化對象,否則報錯泪漂。
  • 沒有arguments對象廊营。不能通過arguments對象訪問傳入?yún)?shù),只能使用顯式命名或其他ES6新特性來完成萝勤。
  • this不可變露筒。函數(shù)內(nèi)置的this不可變,在函數(shù)體內(nèi)整個執(zhí)行環(huán)境中未常量敌卓。

有這些這些差異的原因:對this的綁定是JavaScript錯誤的常見來源之一慎式。容易丟失函數(shù)內(nèi)置數(shù)值,或得出意外結(jié)果趟径。其次瘪吏,將箭頭函數(shù)限制為使用固定this引用,有利于JavaScript引擎優(yōu)化處理蜗巧。

常見使用:
//箭頭函數(shù)返回單個值(當(dāng)入?yún)⑹且粋€不需要加())
var getItem=key=>value;
//返回運算表達式結(jié)果
var sum=(n1,n2)=>n1+n2;
//返回運算表達式結(jié)果
var sum2=()=>1+1;
//大括號函數(shù)體
var sum3=(n1,n2)=>{return n1+n2;}
//箭頭函數(shù)返回對象
var getItem2=key=>({
    id:key,
    name:'jm'
})

使用普通的function聲明函數(shù):
var Comp = {
   id='123' ,
   init:function(){
       document.addEventListener("click", function(event) {
            this.doSomething(event.type); // error
        }, false);
   },
   doSomething:function(type){
             console.log("Handling " + type + " for " + this.id);
   }
}

這里掌眠,因為函數(shù)內(nèi)部this關(guān)聯(lián)問題,this會根據(jù)當(dāng)前函數(shù)執(zhí)行環(huán)境去取值幕屹,所以this.doSomething(event.type); 這里的this會指向全局對象蓝丙,全局對象沒有doSomething方法,就undefinde了望拖。

解決:
這里在函數(shù)中使用bind()將this與Comp明確關(guān)聯(lián)起來渺尘,相當(dāng)于又創(chuàng)建一個已關(guān)聯(lián)現(xiàn)有this的新函數(shù),即可解決問題说敏。

var Comp = {
   id='123' ,
   init:function(){
       document.addEventListener("click", (function(event) {
            this.doSomething(event.type); // error
        }).bind(this), false);
   },
   doSomething:function(type){
             console.log("Handling " + type + " for " + this.id);
   }
}

當(dāng)然鸥跟,由于前面所述箭頭函數(shù)內(nèi)置的this的值,取決于箭頭函數(shù)在哪定義像云,而非箭頭函數(shù)執(zhí)行的上下文環(huán)境锌雀。
這里將function聲明的函數(shù)替換為箭頭函數(shù)蚂夕,即可直接使用this.doSomething()了迅诬。

var Comp = {
   id='123' ,
   init:function(){
       document.addEventListener("click", ()=>this.doSomething(), false);
   },
   doSomething:function(type){
             console.log("Handling " + type + " for " + this.id);
   }
}

當(dāng)然,箭頭函數(shù)的聲明方式也就決定了其簡練性婿牍,使得代碼直觀侈贷,簡單,值得去使用。

其他:
  • 1.對箭頭函數(shù)進行typeof操作會返回“function”俏蛮。
  • 2.箭頭函數(shù)仍是Function的實例撑蚌,故而instanceof的執(zhí)行方式與傳統(tǒng)函數(shù)一致。
  • 3.call/apply/bind方法仍適用于箭頭函數(shù)搏屑,但就算調(diào)用這些方法擴充當(dāng)前作用域争涌,this也依舊不會變化。
    箭頭函數(shù)與傳統(tǒng)函數(shù)最大的不同之處在辣恋,禁用new操作亮垫。

參考:http://www.jb51.net/article/50770.htm

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市伟骨,隨后出現(xiàn)的幾起案子饮潦,更是在濱河造成了極大的恐慌,老刑警劉巖携狭,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件继蜡,死亡現(xiàn)場離奇詭異,居然都是意外死亡逛腿,警方通過查閱死者的電腦和手機稀并,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來单默,“玉大人稻轨,你說我怎么就攤上這事〉癜迹” “怎么了殴俱?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枚抵。 經(jīng)常有香客問我线欲,道長,這世上最難降的妖魔是什么汽摹? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任李丰,我火速辦了婚禮,結(jié)果婚禮上逼泣,老公的妹妹穿的比我還像新娘趴泌。我一直安慰自己,他們只是感情好拉庶,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布嗜憔。 她就那樣靜靜地躺著,像睡著了一般氏仗。 火紅的嫁衣襯著肌膚如雪吉捶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音呐舔,去河邊找鬼币励。 笑死,一個胖子當(dāng)著我的面吹牛珊拼,可吹牛的內(nèi)容都是我干的食呻。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼澎现,長吁一口氣:“原來是場噩夢啊……” “哼搁进!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起昔头,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤饼问,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后揭斧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體莱革,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年讹开,在試婚紗的時候發(fā)現(xiàn)自己被綠了盅视。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡旦万,死狀恐怖闹击,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情成艘,我是刑警寧澤赏半,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站淆两,受9級特大地震影響断箫,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜秋冰,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一仲义、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧剑勾,春花似錦埃撵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至洲赵,卻和暖如春鸳惯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背叠萍。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工芝发, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人苛谷。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓辅鲸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親腹殿。 傳聞我的和親對象是個殘疾皇子独悴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法锣尉,內(nèi)部類的語法刻炒,繼承相關(guān)的語法,異常的語法自沧,線程的語...
    子非魚_t_閱讀 31,581評論 18 399
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品坟奥,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式拇厢。簡單...
    舟漁行舟閱讀 7,718評論 2 17
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理爱谁,服務(wù)發(fā)現(xiàn),斷路器孝偎,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 函數(shù)參數(shù)的默認值 基本用法 在ES6之前访敌,不能直接為函數(shù)的參數(shù)指定默認值,只能采用變通的方法衣盾。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,357評論 0 1
  • 和一群鴿子對弈 童心一下子穿越千年 蹣跚學(xué)步 揮動手臂 逍遙中 舒展飛的坦然 和一群鴿子對弈 在伊人的陽臺棲息打盹...
    冰熊妹妹閱讀 243評論 0 2