ES6 箭頭函數

 

 

 

 

 

 非箭頭函數與箭頭函數的寫法

//非箭頭函數寫法，函數聲明
function sum(a, b) {
    return a + b;
}
//非箭頭函數寫法，函數表達式
var sum = function(a,b){
    return a+b;
}
//箭頭函數寫法 把箭頭函數賦給一個變量，省略function，（）括號裏面是參數，當參數是一個時,（）括號可省略
let sum = (a, b) => {

　　  return a + b;

 }

省略不寫return ，仍有返回值，可返回數組，對象，函數。。。

寫法：去掉大括號，直接把要返回的值寫到箭頭的後面，但當返回對象是，{name:'zwq'}會被當成一個箭頭函數的{}，因此，當返回對象時，可用表達式包裹上。

let sum = (a, b) =>  a + b;   //返回 a+b

　let fn = (a, b) => ({ a: a, b: b });

 

使用箭頭函數簡化代碼，以下代碼

function sum(x) {
    return function (y) {
        return function (z) {
            return x + y + z;
        }
    }
}
var sum1 = sum(1);
var sum2 = sum(2);
console.log(sum2(3));

 

能夠寫成：箭頭函數能夠省略return ，並把大括號去掉，參數是一個的時候也能夠去掉。

let sum = x => y => z =>  x + y + z

console.log(sum(1)(2)(3));

 

參數不能重複命名

function sum(a,a){
    console.log(a);    //不報錯
}
let sum  = (a,a) =>{
    console.log(a);    //報錯
}

 

箭頭函數不能new，而且沒有原型

 

let Person = () => {
    this.a = 10;
}
new Person();   // Uncaught TypeError: Person is not a constructor

 

 

 

 

箭頭函數的arguments和this的值是外圍最近一層非箭頭函數的arguments和this值。是詞法做用域下，也就是說是你寫代碼時你眼睛直觀看到的。即便這個函數執行時被保存到外部。

以下代碼箭頭函數外部沒有非箭頭函數，因此沒有arguments。

 

let a = (x,y) =>{
    console.log(arguments);  //Uncaught ReferenceError: arguments is not defined
}
a(3,4);

 

 

 

當前箭頭函數外面套着非箭頭函數，無論執行時函數是否保存到外部，只是當前肉眼看到的詞法做用域，當前裏面的箭頭函數外面套着非箭頭函數，因此能夠拿到外部非箭頭函數的arguments.

 

function fn(a,b){
    return (x,y) =>{
        console.log(arguments,x,y);
    }
}
fn(3,4)(5,6);    //[3,4] 5 6

 

 

 

例若有這樣的需求。咱們定義一個函數fn()而且在fn裏面定義了其餘函數,在這個函數裏面須要接受fn函數的參數，當傳入參數不固定時，咱們接受arguments，可是每一個函數的arguments都是本身函數的參數的arguments，咱們須要外部函數的arguments只能用一個變量先保存起來。

 

function fn(){
   // var a = arguments;
    return function(){
　　　　　console.log(a);   //[3,4]
        console.log(arguments)  //一個空的arguments
    }
}
fn(3,4)();

 

 

 

這是箭頭函數的特色，箭頭函數的arguments只能由外部非箭頭函數的arguments決定

 

function fn(){
    return () =>{
        console.log(arguments);
    }
}
fn(3,4)();   //[3,4]   

 

 

 

 

this指向問題

普通函數的this，誰調用它，他就指向誰。 以下打印的是對象裏的innerObj；

 

var  a = 'outObj';   
var  obj = {
    a:'innerObj',
    fn:function(){ 
        console.log(this.a);   //innerObj
    }
}
obj.fn();

 

 

 

箭頭函數的this跟arguments同樣是外圍離本身最近一層的非箭頭函數，當箭頭函數外面沒有非箭頭函數時，this指向window

 

var  a = 'outObj';   //注意 變量聲明不能用let。若是用let a 的話會打印undefined，由於當前this指向全局，但經過let定義的屬性不會定義成window屬性

let obj = { a:'innerObj', fn:()=>{ console.log(this.a); // outObj由於this和arguments的值取決於外面最近一層的非箭頭函數，而當前的箭頭函數外面沒有箭頭函數因此this綁定在全局上。 } } obj.fn();

若是想打印對象obj裏面的屬性須要在箭頭函數外面套一個非箭頭函數

　　let obj = {

　　　　a:'innerObj',

　　　　fn(){

　　　　　　let sum = () =>{

　　　　　　　　console.log(this.a);   //innerObj

　　　　　　}

　　　　　　sum()

　　　　}

　　}

 

 

 

將變量返回到外部也是同樣
let obj = {
    a:'innerObj',
    fn(){
        let sum = () =>{
            console.log(this.a);   //innerObj
        }
        return sum;
    }
}
let outerSum = obj.fn();

 

當用普通函數是使用settimeout，因爲沒有對象調用settimeout裏面的函數，所以他指向的window。利用保存外部函數this，或者用call改變this指向來改變this。

let obj = {
    ms:'abx',
    fn(){
            var self = this;
        　　 setTimeout(function(){
           　　  console.log(this.ms);   
             　　console.log(self.ms);   或者改變this指向  
       　　 },500)
    }
}
obj.fn();

 

使用箭頭函數解決this指向問題

let obj = {
    ms:'abc',
    fn(){
        setTimeout(() => {
            console.log(this.ms);  //abc
        }, 500);
    }
}
obj.fn();