《原神攻略》青墟浦礦點無傷挖礦小技巧
阿新 • • 發佈：2021-05-20
之前在看Vue2.0的時候，就被很多的箭頭函式困擾，一直不知道是怎麼回事，雖然箭頭函式四個字在我耳邊一直轉圈，今天小編整理整理箭頭函式裡面的常見用法和表現形式，在這個Vue3.0已經到來的一段時間，希望大家也可以一起搭上箭頭函式的大風飛起來。大家也可以關注我的微信公眾號，蝸牛全棧。
一、es5中函式的宣告方式
function sum(x,y){ return x + y } console.log(sum(4,5)) // 9
let sum = function(x,y){ return x + y } console.log(sum(4,5)) // 9
對於上面的兩種方式，主要區別在於let關鍵字宣告函式的時候，不存在變數提升的問題（ps:具體可以參考小編的第一篇文章，關鍵字let和var的區別）
二、es6中的箭頭函式：主要就是把function去掉，在引數和函式體之間用箭頭分割
let sum = (x,y) => { return x+y } console.log(sum(3,4)) // 7
對於函式體只有一行程式碼的時候，上面程式碼可以簡化為以下程式碼
let sum = (x,y) => x + y
對於返回值，可以省略return關鍵字並用圓括號擴起來
function addStr(str1,str2){ return str1+str2 } const addStr = (str1,str2) => (str1+str2) // 以上兩個函式功能是一樣的，只是箭頭函式在箭頭右側，省略了關鍵字return，並且在外面新增圓括號
三、箭頭函式和普通函式之間的區別
1、this指向定義時所在的物件，而不是呼叫時所在的物件(箭頭函式中沒有this,this指向的是父級的this)
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ console.log(this) // <button id="btn">點我</button>}) </script> </body> </html>
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ // call apply bind改變this指向 console.log(this) // Window },1000) }) </script> </body> </html>
通過bind改變this指向
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(function(){ console.log(this) // <button id="btn">點我</button> }.bind(this),1000) }) </script> </body> </html>
箭頭函式中的this指向
<html> <body> <button id="btn">點我</button> <script> let oBtn = document.querySelector("#btn") oBtn.addEventListener("click",function(){ setTimeout(() => { console.log(this) // <button id="btn">點我</button> },1000) }) </script> </body> </html>
2、不可以作為建構函式
function People(name,age){ console.log(this) // People{} this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // People{name:"lilei",age:34}
let People = (name,age) => { this.name = name this.age = age } let p1 = People("lilei",34) console.log(p1) // 報錯 People is not a constrator
3、不可以使用arguments物件
let foo = function(){ console.log(arguments) } console.log(foo(1,2,3)) // Arguments[1,2,3]
let foo = () => { console.log(arguments) } console.log(foo(1,2,3)) // Arguments is not defined
箭頭函式相容類似es5中arguments物件：通過rest引數
let foo = (...args) => { console.log(args) } console.log(foo(1,2,3)) // [1,2,3]