箭頭函數與普通函數的區別及示例

Backache 發布于2019-08-26 10:12 / 1242人閱讀

摘要：箭頭函數是前端面試環節的一個高頻考點，一般會問箭頭函數的是指如何用普通函數實現一個箭頭函數箭頭函數有哪些優點帶著這些問題，小編帶各位上路吧箭頭函數與普通函數得區別普通函數函數作為全局函數被調用時，指向全局對象函數作為對象中的方法被調用時，指

箭頭函數是前端面試環節的一個高頻考點，一般會問

1、箭頭函數的this是指？
2、如何用普通函數實現一個箭頭函數
3、箭頭函數有哪些優點

帶著這些問題，小編帶各位上路吧

箭頭函數與普通函數得區別

普通函數：
1、函數作為全局函數被調用時，this指向全局對象
2、函數作為對象中的方法被調用時，this指向該對象
3、函數作為構造函數的時候，this指向構造函數new出來的新對象

箭頭函數
1、箭頭函數沒有this，函數內部的this來自于父級最近的非箭頭函數，并且不能改變this的指向

其他補充

普通函數還可以通過bind改變this的指向

箭頭函數示例

1.this指向

 var a = "全局變量a";
    var obj={
        a:"局部變量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

輸出結果為：

局部變量a
全局變量a

普通函數的this我們知道是指向最近的一個對象，而箭頭函數的this實際上是指向定義時的this，比如把上面代碼改為：

 var obj={
        a:"局部變量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

輸出結果為：

局部變量a
undefined

此時因為箭頭函數是指向全局的，全局沒有變量a則輸出undefined,這里的fn1和fn2都是全局函數，所以箭頭函數this指向的是定義時的全局，而普通函數的this指向的是最近的一個對象

云服務器 GPU云服務器箭頭函數主機主機與普通主機的區別寬帶專線與普通寬帶的區別 vps主機與普通主機的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105777.html

論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
ES6 - 箭頭函數、箭頭函數與普通函數的區別總結

摘要：但是因為箭頭函數沒有自己的，它的其實是繼承了外層執行環境中的，且指向永遠不會隨在哪里調用被誰調用而改變，所以箭頭函數不能作為構造函數使用，或者說構造函數不能定義成箭頭函數，否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0
字節跳動前端一面試題及答案

摘要：將構造函數的作用域賦值給新對象。也所以對象指向新對象執行構造函數內部的代碼，將屬性添加給中的對象。通常的解決方案是判斷是否是構造函數的實例，若是則繼續執行，若不是則進行的操作。代碼如下在構造函數參數個數固定的情況下這種方案是可行的。首先，一般的都是介紹自己，主要是項目經歷問題1：jQuery與Vue的區別是什么？ JQuery和Vue的主要區別是JQuery主要是通過選擇器來選取D...

roundstones 2019-08-23 15:36 評論0 收藏0
帶你入門 JavaScript ES6 (三)

摘要：上一章我們學習了遍歷和擴展字符語法。本章我們主要學習中的箭頭函數箭頭函數更準確來說叫箭頭函數表達式。箭頭函數余普通函數功能相同，但語法差別比較大。帶你入門 JavaScript ES6 (三) 本文同步帶你入門 JavaScript ES6 (三)，轉載請注明出處。上一章我們學習了 for of 遍歷和擴展字符語法。本章我們主要學習 ES6 中的箭頭函數箭頭函數更準確來說叫箭...

劉福 2019-08-21 18:35 評論0 收藏0