箭頭函數 · Javascript基礎篇

[TOC] >[success] # 箭頭函數 ~~~ '箭頭函數'與'普通函數'的區別： 1. 沒有'this'、'super'、'arguments'、'new.target'，使用'箭頭函數'時只能用'剩余參數'和'具名參數' 來代替'arguments' 2. 不能被'new'調用，'箭頭函數'沒有'Constructor'方法，因為不能用作'構造函數' 3. 沒有'prototype'屬性 4.不能更改'this' 5. 不允許重復的'具名參數'，'傳統函數'是可以傳多個'同名'的'形參',但是'引用最后一個'重名參數 ~~~ >[success] ## 箭頭函數語法 ~~~ 1. '無參數'需要寫一個'空括號' 2. '單參數'可以不寫括號，如果不寫'{ }'會自動'return' 3. '多參數'要跟'傳統函數'一樣有'括號包裹參數' ~~~ >[success] ### 無參數 ~~~ let getName = () => "Nicholas" 等同于： var getName = function() { return "Nicholas" } ~~~ >[success] ### 單個參數 ~~~ let reflect = value => value 等同于： let reflect = function(value) { return value } ~~~ >[success] ### 多個參數 ~~~ let sum = (num1, num2) => num1 + num2 等同于： let sum = function(num1, num2){ return num1 + num2 } ~~~ >[info] ### 箭頭函數，簡寫需要注意 ~~~ '箭頭函數'簡寫時候雖然說可以代替'傳統函數'的'return'，但是返回數據的是'對象'的時候需要'加括號' ~~~ ~~~ let getTempItem = id => ({ id: id, name: "Temp" }) 等同于： var getTempItem = function(id) { return { id: id, name: "Temp" } } ~~~ >[success] ## 創建自執行函數 ~~~ 自執行函數，創建即調用，使用'傳統函數'時， (function(){/*函數體*/})() 與 (function(){/*函數體*/}()) 這兩種方式都是可行的。但若使用'箭頭函數'，則只有下面的寫法是有效的： (() => {/*函數體*/})() ~~~ >[success] ### ES5創建自執行函數寫法 ~~~ let person = function (name) { return { getName: function () { return name } } }('呵呵噠') console.log(person.getName()) // '呵呵噠' ~~~ >[success] ### ES6創建自執行函數寫法 ~~~ let person = ((name) => { return { getName: function () { return name } } })("呵呵噠") console.log(person.getName()) // '呵呵噠' ~~~ >[success] ## 無 this 綁定 ~~~ 下面這段代碼會報錯，因為'PageHandler.init()'方法中又創建了一個'監聽事件方法'，并且在這個方法里使用了'this.doSomething()'方法，這里的'this'實際上是'document'，'this'指向不對，所以會報錯 ~~~ ~~~ let PageHandler = { id: "123456", init: function () { document.addEventListener("click", function (event) { console.log(this === document) // true this.doSomething(event.type) // 錯誤 }, false) }, doSomething: function (type) { console.log(`我的事件是${ type }，我的id是${ this.id }`) } } PageHandler.init() ~~~ >[success] ### ES5解決this指向問題 ~~~ 'ES5'可以通過'bind()'方法來修改this，以達到好用的效果，但是'bind()'方法會創建一個'新函數'，為了避免額外創建一個函數，修正此代碼的更好方式是使用'箭頭函數'。 ~~~ ~~~ let PageHandler = { id: "123456", init: function () { document.addEventListener("click", function (event) { console.log(this === document) // false this.doSomething(event.type) }.bind(this), false) // 在方法的后面加了bind方法 }, doSomething: function (type) { console.log(`我的事件是${ type }，我的id是${ this.id }`) } } PageHandler.init() // 我的事件是click，我的id是123456 ~~~ >[success] ### ES6解決this指向問題 ~~~ 'ES6'可以通過'箭頭函數'的形式來解決此問題 ~~~ ~~~ let PageHandler = { id: "123456", init: function () { document.addEventListener("click", event => this.doSomething(event.type) , false) }, doSomething: function (type) { console.log(`我的事件是${ type }，我的id是${ this.id }`) } } PageHandler.init() // 我的事件是click，我的id是123456 ~~~ >[warning] ### 箭頭函數不可以new ~~~ '箭頭函數'不可以當做'構造函數'使用，不可以'new',因為'箭頭函數'沒有'Constructor'屬性和'prototype' 屬性，同樣'箭頭函數'也不可以使用'call()' 、 'apply()' 或 'bind()' 方法來改變其 'this' 值。 ~~~ ~~~ let myType = () => { }, object = new MyType() // 錯誤：你不能對箭頭函數使用 'new' ~~~ >[success] ## 箭頭函數與數組方法 ~~~ 很多'ES5'的'數組方法'都可以使用'箭頭函數'的方式來代替，例如'forEach'、'filter'、'map'、'some'... ~~~ 傳統數組方法寫法： ~~~ let result = values.sort(function (a, b) { return a - b }) ~~~ 箭頭函數數組方法寫法： ~~~ let result = values.sort((a, b) => a - b) ~~~ >[success] ## 沒有 arguments 綁定 ~~~ 下面的例子實際上是做了一個'閉包',在'返回'的函數中使用'test'方法的第一個參數。 ~~~ ~~~ function test() { return () => arguments[0] } let arrowFunction = test(5) console.log(arrowFunction()) // 5 ~~~ >[success] ## 識別箭頭函數 ~~~ let comparator = (a, b) => a - b console.log(typeof comparator) // "function" console.log(comparator instanceof Function) // true ~~~ ~~~ 你仍然可以對箭頭函數使用 'call()' 、'apply()'與 'bind()' 方法，雖然函數的'this'綁定并不會受影響。這里有幾個例子： let sum = (num1, num2) => num1 + num2 console.log(sum.call(null, 1, 2)) // 3 console.log(sum.apply(null, [1, 2])) // 3 // bind方法創建一個新的函數 let boundSum = sum.bind(null, 1, 2) console.log(boundSum()) // 3 ~~~ ~~~ 'call'和'apply'以及'bind'后面的是'sum'方法的參數，他們三個方法的不同： 1. 'call'的第二個參數是'正常傳參' 2. 'apply'的第二個參數是以'數組'的形式 3. 'bind'是雖然也可以改變'this'指向，它是'創建一個新的函數'，第二個參數是'正常傳參' ~~~