當前位置:網站首頁>ES6箭頭函數的使用

ES6箭頭函數的使用

2022-07-23 22:31:15InfoQ

前言

箭頭函數是
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
    指向誰

片尾

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

版權聲明
本文為[InfoQ]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/204/202207232229161245.html

隨機推薦