簡單說 JavaScript的箭頭函數

Caizhenhao 發布于2019-08-21 17:41 / 548人閱讀

摘要：說明箭頭函數本質還是函數，我們來看看他與中普通函數的區別，先看看寫法上的區別。箭頭函數會捕獲其所在上下文的值，作為自己的值。箭頭函數不可變。這些方法也無法改變箭頭函數的指向。箭頭函數不能用關鍵字來實例化對象，不然會報錯。

說明

箭頭函數本質還是函數，我們來看看他與JavaScript中普通函數的區別，先看看寫法上的區別。

解釋

寫箭頭函數，我們記住一個順序就好，參數、箭頭、函數體、這個順序記住就足夠了，參數、箭頭、函數體、這三個是必須的，函數名可以沒有，但這三項必須有，一些簡寫的方式也是簡寫這三項里的東西。

簡寫

1、只有一個參數時，() 可省略

//不簡寫
var demo = (x) =>{
    console.log(x);
}

//簡寫
var demo = x =>{
    console.log(x);
}

2、函數體只有一句時， {} 可以省略

//不簡寫
var demo = (x) =>{
    console.log(x);
}

//簡寫
var demo = x => console.log(x);

3、函數體只有一條返回語句時，{} 和 return 都可以省略

//不簡寫
var demo = (x) => {
     return x;
}

//簡寫
var demo = (x) => x;   

//注意別寫成這樣  
var demo = (x) =>{ x };  
//或者 這樣  
var demo = (x) => return  x;  
//要省略就都省略，不省略就都不省，別省一半,不然會出錯的。

注意：
箭頭函數放參數的地方就在 () 內，
沒有參數，() 必須寫，
一個參數，() 可寫可不寫，
多個參數，() 必須寫。

箭頭函數放函數體的地方在 {}內，
函數體就一句 {} 可寫可不寫，
函數體不止一句，{} 必須寫。

如果不知道，() {} 寫不寫，該不該省略，那就寫，寫了不會錯。

箭頭函數如果要返回一個對象，要簡寫的話，需要用()包住這個對象

//不簡寫
var demo = () =>{ 
    return {x:1};
}  

//簡寫
var demo = () =>({x:1});

為什么會這樣？因為如果不加 () ，那{ } 就表示的是語法塊，不是表示一個對象，而加上()，按照規范來說，() 里面 { } 就會被解析為對象了。

對于 {x:1} 這個情況，他不僅可以表示一個對象，這個對象有個x屬性，值為1，也可以表示為語法塊中含有名為 x 的 label，忘記 label語法的話，可以看這里
如果不是很明白，可以看看這個回答，應該會理解的更加深刻。
https://www.zhihu.com/questio...
所以這也解釋了為什么會出現下面代碼中的情況

// 不報錯
var demo = () =>{x:1};

// 報錯
var demo = (y) =>{y,x:1};

對象的方法用箭頭函數寫時，this 的指向可能和你想的不一樣

window.name="window";
var obj = {
    name:"obj",
    show_name:() =>{
        console.log(this.name);
    }    
}
obj.show_name(); //window

JavaScript使用的是函數作用域，在上面這段代碼中對象的括號是不能封閉作用域的，所以此時的this還是指向window。
我們換成普通函數看看

window.name="window";
var obj = {
    name:"obj",
    show_name: function (){
        console.log(this.name);
    }    
}
obj.show_name();  //obj

換成普通函數，this 就不是指向window，而是指向 obj 對象了

箭頭函數與普通函數其他的區別

1、箭頭函數沒有自己的this。箭頭函數會捕獲其所在上下文的  this 值，作為自己的 this 值。   
2、箭頭函數 this 不可變。call()、apply()、bind()、這些方法也 無法改變 箭頭函數 this 的指向。
3、箭頭函數 不能用 new  關鍵字來實例化對象，不然會報錯。 
4、箭頭函數沒有arguments對象。

1、箭頭函數沒有自己的this。箭頭函數會捕獲其所在上下文的 this 值，作為自己的 this 值。

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        function fn (){
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name();  // window

聲明一個 obj 對象，有一個name屬性與 show_name方法，上面這段代碼，我的本意是想顯示 obj對象的name，但是沒和我想的一樣，一般我們會用一個變量 self 或者 that 之類的留住this,像這樣

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        //留住this
        var that = this;
        function fn (){
            console.log(that.name);
        }
        fn();
    },
}
obj.show_name();  //obj

通常來說，箭頭函數內部的this就是外層代碼塊的this

window.name = "window";
var obj = {
    name:"obj",
    show_name:function (){
        var fn = () => {
            console.log(this.name);
        }
        fn();
    },
}
obj.show_name(); //obj

2、箭頭函數 this 不可變。call()、apply()、bind()、這些方法也無法改變箭頭函數 this 的指向。

window.name = "window";
var obj = {
    name:"obj",
}
function show_name(){
    //這里 show_name 是一個普通的全局函數，所以他的this指window
    console.log(this.name);
}
//用了 call 方法，把 show_nam 的this 指向了 obj 對象
show_name.call(obj);  //obj

箭頭函數 this 不可變

window.name = "window";
var obj = {
    name:"obj",
}
var show_name = () => {
    //這里 show_name 是箭頭函數，他的this指window，并且不會變
    console.log(this.name);
}
//用了 call 方法，但是 this 沒變，所以打印了 window
show_name.call(obj);  //window

3、箭頭函數不能用 new 關鍵字來實例化對象，不然會報錯，箭頭函數的this 不可變，new 也改變不了 this的指向，而且更為重要的是，箭頭函數內部并沒有 [[Construct]] 方法，所以會沒有原型屬性（prototype），所以箭頭函數沒法當構造函數。

4、箭頭函數沒有arguments對象，不能通過arguments對象訪問傳入參數，但是可以用rest參數實現
rest參數，剩余參數，不了解的朋友看這里

var demo = (...theArgs) => theArgs;
demo(1,2,3); //[1,2,3]

總結

在來看一遍箭頭函數與普通函數，除了寫法上的區別

1、箭頭函數沒有自己的this。箭頭函數會捕獲其所在上下文的  this 值，作為自己的 this 值。   
2、箭頭函數 this 不可變。call()、apply()、bind()、這些方法也 無法改變 箭頭函數 this 的指向。
3、箭頭函數 不能用 new  關鍵字來實例化對象，不然會報錯。 
4、箭頭函數沒有arguments對象。

可以看出，最重要的區別還是在 this 上，所以要想用好箭頭函數，還是要對 this 有一定認識的，朋友們繼續努力吧！

云服務器 GPU云服務器簡單的javascript 箭頭函數 javascript的函數 javascript中的函數

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

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

ES6—箭頭函數（5）

摘要：因為它不產生屬于它自己上下文的箭頭函數的另一個用處是簡化回調函數。箭頭函數使用場景箭頭函數適合于無復雜邏輯或者無副作用的純函數場景下，例如用在的回調函數定義中，另外目前等庫，都大量使用箭頭函數，直接定義的情況已經很少了。 0.為什么會出現箭頭函數？ 1.傳統的javascript函數語法并沒有提供任何的靈活性，每一次你需要定義一個函數時，你都必須輸入function () {},這至少...

yanwei 2019-08-23 17:20 評論0 收藏0
JavaScript深入淺出第1課：箭頭函數中的this究竟是什么鬼？

摘要：箭頭函數沒有自己的值，箭頭函數中所使用的來自于函數作用域鏈。使用箭頭函數打印對于內層函數，它本身并沒有值，其使用的來自作用域鏈，來自更高層函數的作用域。《JavaScript 深入淺出》系列： JavaScript 深入淺出第 1 課：箭頭函數中的 this 究竟是什么鬼？ JavaScript 深入淺出第 2 課：函數是一等公民是什么意思呢？普通函數與箭頭函數普通函數指的是...

MRZYD 2019-08-23 18:11 評論0 收藏0
從-1開始的ES6探索之旅01：顏文字成精的箭頭函數上篇 - 大哥，你指哪呢？

摘要：基礎語法參數參數參數函數聲明參數參數參數表達式單一相當于參數參數參數表達式當只有一個參數時，圓括號是可選的單一參數函數聲明單一參數函數聲明沒有參數的函數應該寫成一對圓括號。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？之前在某些大神的代碼中出現一串神秘符號類似于num =>...

Snailclimb 2019-08-21 18:36 評論0 收藏0
JavaScript 的 this 指向問題深度解析

摘要：而改變了這種狀態，雖然定義的類用運算符得到的仍然是，但它不能像普通函數一樣直接調用同時，中定義的方法函數，也不能當作構造函數用來調用。而在中，用調用一個構造函數，會創建一個新對象，而其中的就指向這個新對象。 JavaScript 中的 this 指向問題有很多博客在解釋，仍然有很多人問。上周我們的開發團隊連續兩個人遇到相關問題，所以我不得不將關于前端構建技術的交流會延長了半個時候討論 ...

liuchengxu 2019-08-20 14:22 評論0 收藏0
什么是 JAVASCRIPT？

摘要：，微軟發布，同時發布了，該語言模仿同年發布的。，公司在瀏覽器對抗中沒落，將提交給國際標準化組織，希望能夠成為國際標準，以此抵抗微軟。同時將標準的設想定名為和兩類。，尤雨溪發布項目。，正式發布，并且更名為。，發布，模塊系統得到廣泛的使用。前言作為程序員，技術的落實與鞏固是必要的，因此想到寫個系列，名為 why what or how 每篇文章試圖解釋清楚一個問題。這次的 why w...

ephererid 2019-08-26 10:20 評論0 收藏0