我所理解的箭頭函數

箭頭函數

  • 箭頭函數表達式是ES6標準新增的定義函數的一種方式

最簡單的箭頭函數

var f = x=>x*x;
f(2);//4

相當于

var f = (x)=>{
    return x*x;
}
f(2);//4

箭頭函數的省略原則

  • 箭頭函數的標志就是箭頭 => 箭頭的左邊是參數 右邊是函數體
    • 當只有一個參數時,參數可以省去()
    • 沒有參數和有多個參數都不能省去()
    • 當函數體只有一行語句時,{}和return關鍵詞都可以省略,相當于 { return xxx; }
    • 函數體沒有一行語句時,或者有多行語句時,{}和return都不可以省略,{return {};}省略return {{}}代表著{{};return undefined}}
      • 原因在于 直接返回的對象{},會跟函數體的{...}表達有沖突,因此直接返回{}格式的對象時,{}和return都不能省

省略了箭頭左邊的() 和 箭頭右邊的 {} 及 return

(x=>console.log(x))(6);//6

//類比function定義 相當于 
(function (x) {
    return console.log(x);//直接返回函數調用,復習一下,這個叫做尾調用。
})(6);

省略了 箭頭右邊的 {} 及 return

((x,y)=>console.log(x+y))(3,4);

返回{}是不能省略箭頭右邊的{}和return

var f = ()=>{};
console.log(f());//undefined 而不是 {}

var f = ()=>{name:'xiaoming'};
console.log(f());//undefined 而不是 {name:'xiaoming'} 

箭頭右邊的省略的本質,是將箭頭 右邊的 語句 作為一個整體 包裹在函數體中 {};

解釋如下:

var f = x=>x*x;
//相當于
var f = x => {
    return x*x;
}

因此返回對象的正確方法是

  1. 不直接使用{}
var obj = {};
var f = ()=>obj;
console.log(f(obj));//{}
  1. 不省略{}和return
var f = ()=>{
    return {};
};
console.log(f());

箭頭函數和匿名函數的區別


var a = x=>x*x;
var b = function (x) {
    return x*x;
}

嚴格來說,a和b定義的函數并不相等,

  • 箭頭函數不綁定 this
    • 箭頭函數內部的this是詞法作用域,由上下文確定,也就是誰調用它,它指向誰。
    • function函數定義 內部的this指向由調用方式決定。因為function函數綁定了this,而call、play、bind都會改變this指向
      • 1.直接調用:非嚴格模式 默認指向全局對象瀏覽器環境是window node環境是global; 嚴格模式下 默認未定義undefined
      • 2.既然箭頭函數沒有綁定this,那么call,play,bind是為了改變this指向,因此 不適用于 箭頭函數。使用這些方法,也不會改變this的指向。
    • 箭頭函數也沒有綁定 arguments,super或 new.target 參數,不能用作構造函數。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 函數參數的默認值 基本用法 在ES6之前,不能直接為函數的參數指定默認值,只能采用變通的方法。 上面代碼檢查函數l...
    呼呼哥閱讀 3,476評論 0 1
  • 1.函數參數的默認值 (1).基本用法 在ES6之前,不能直接為函數的參數指定默認值,只能采用變通的方法。
    趙然228閱讀 707評論 0 0
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy閱讀 9,541評論 1 51
  • 文/焉支閑人 詩中有你 一點點的癡 一點點的呆 想寫盡 人世間的悲歡離愁 想寫盡 奇峰異景 風急雨驟 卻還是依樣葫...
    焉支閑人閱讀 320評論 6 4
  • Android是基于Linux的(所以嵌入式開發的同學比較容易玩轉整個Android系統),在Linux中,一切都...
    _laoliu閱讀 2,801評論 1 1