ES6箭頭函數的使用

前言

箭頭函數是

ES6

當中對函數的一種全新的錶示方法，看起來也非常簡潔，我在之前也經常使用，但是沒有整體的學習，今天突發奇想，决定進一步的學習一下箭頭函數

起步

我們以前在寫函數的時候會這樣寫

function fun() {
   return 100;
}

console.log(fun());     //100

也會這樣寫

const fun = function() {
   return 100;
}

console.log(fun());     //100

在ES6中，我們將代碼簡化

const fun1 = () => {
   return 100;
}
console.log(fun1());     //100

再次簡化

const fun2 = x => x;
console.log(fun2(100));     //100

• ()中定義參數，如果只有一個參數，()可以省略

• {}中寫函數體，如果函數體中只有返回值，可以不寫return

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

舉個例子

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();

這串代碼執行結束後，打印的是 

我是undefined

 ，那麼為什麼“小明”不能被打印出來呢？

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(function() {
           console.log(this);
       }, 500)
   }
}
obj.sayName();

所以我們打印一下this，打印的結果是window對象，所以這個this指向的是window對象，也就是全局對象。因為這裏的代碼是sayName函數裏面套了一個函數，內函數裏面的this指向不到

小明

，但是sayName函數的this可以指到

小明

，解决的辦法就是在sayName函數裏定義一個變量，值為this，內函數再通過變量指向

小明

，代碼如下

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       let self = this;
       setTimeout(function() {
           console.log("我是" + self.name);
       }, 500)
   }
}
obj.sayName();

這樣就能够打印出

我是小明

了

使用箭頭函數

看下面這串使用了箭頭函數的代碼

let obj = {
   name: '小明',
   age: 3,
   sayName() {
       setTimeout(() => {
           console.log("我是" + this.name);
       }, 500)
   }
}
obj.sayName();

打印的結果就是 

我是小明

我想你們和我都有同樣的一個疑惑：為什麼使用箭頭函數就可以實現了呢？

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

• this指向不同
• 普通函數：誰調用這個函數，
  this
  指向誰
• 箭頭函數：在哪裏定義函數，
  this
  指向誰

片尾

嘻嘻嘻，小白暫時用到的也就這麼多（其實我就是會這麼多），後續我會繼續更新這篇博客的