ES6:箭頭函式
阿新 • • 發佈：2018-12-20
作用: 定義匿名函式 基本語法: 沒有引數: () => console.log('xxx') 一個引數: (i) => i+2 大於一個引數: (i,j) => i+j 函式體不用大括號: 預設返回結果 函式體如果有多個語句,需要用{}包圍,若有需要返回的內容,需要手動返回 使用場景:多用來定義回撥函式 箭頭函式的特點: 1 簡潔 2 箭頭函式沒有自己的this,箭頭函式的this不是呼叫的時候決定的,而是在定義的時候處在的物件就是它的this 3 擴充套件理解: 箭頭函式的this看外層的是否有函式 如果有,外層函式的this就是箭頭函式的this 如果沒有,則this就是window
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>箭頭函式</title> </head> <body> <button id="btn1">測試箭頭函式this_1</button> <button id="btn2">測試箭頭函式this_2</button> </body> <script type="text/javascript"> let fun = () => console.log('I am arrow function!') fun() // 形參的情況 // 1.沒有形參 ()不能省略 let fun1 = () => console.log('I am arrow function!') fun1(); // 2. 只要一個形參 ()可以省略 let fun2 = a => console.log(a) fun2('yoona') // 3. 兩個及兩個以上 let fun3 = (x,y) => console.log(x,y) fun3(1,2) // 函式體的情況 // 1.只有一條語句或者表示式 {}可以省略---會自動返回語句執行的結果或表示式的結果 // let fun4 = (x,y) => x+y // 5 let fun4 = (x,y) => {x+y} // undefined console.log(fun4(2,3)) // 1.不止一條語句或者表示式 {}不可以省略 let fun5 = (x,y) => { console.log(x,y) return x+y } console.log(fun5(10,20)) // 測試箭頭函式的this let btn1 = document.getElementById('btn1') let btn2 = document.getElementById('btn2') btn1.onclick = function(){// 常規函式 console.log(this)// <button id="btn1">測試箭頭函式this_1</button> }; btn2.onclick = () => console.log(this)// window 此時箭頭函式是在全域性寫的 所處物件為window // let obj = { // name : 'Yoona', // getName(){ // console.log(this) // this指向obj // btn2.onclick = () => console.log(this) // this指向obj 跟外層函式一樣 // } // } // obj.getName() let obj = { name : 'Yoona', getName: () => { console.log(this) // this指向window 因為getName也是箭頭函式 其外層沒有函式 btn2.onclick = () => console.log(this) // this指向window 跟外層函式一樣 } } obj.getName() </script> </html>