【ECMAScript 5_6_7】6、ES6——箭頭函式
阿新 • • 發佈：2019-01-09
一、箭頭函式
* 作用: 定義匿名函式 * 基本語法: * 沒有引數: () => console.log('xxxx') * 一個引數: 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>06_箭頭函式</title> </head> <body> <button id="btn1">測試箭頭函式this_1</button> <button id="btn2">測試箭頭函式this_2</button> <button id="btn3">測試箭頭函式this_3</button> <button id="btn4">測試箭頭函式this_4</button> <script type="text/javascript"> /* ES5寫法： let fun = function () { console.log('fun()') } fun() */ /* ES6箭頭函式寫法： let fun = () => console.log('fun()') fun() */ // 按左邊形參情況分類： //1.沒有形參 let fun1 = () => console.log('fun1()') fun1() //2.只有一個形參的時候：()可以省略 let fun2 = a => console.log('fun2()') fun2() //2.兩個及兩個以上的形參的時候：()不可以省略 let fun3 = (x,y) => console.log(x + y) fun3(10,20) // 按右邊函式體情況分類： //1.函式體只有一條語句或表示式的時候：{}可以省略，會自動返回語句執行的結果或者是表示式的結果（加了{}，則需要return返回） let fun4 = (x,y) => x+y console.log(fun4(100,200)) /*let fun4 = (x,y) => { return x+y } console.log(fun5(100,200))*/ //2.函式體有兩條及以上的語句或表示式的時候：{}不可以省略 let fun5 = (x,y) => { console.log(x,y) return x + y } console.log(fun5(1000,2000)) //箭頭函式的特點：沒有自己的this，箭頭函式的this不是呼叫的時候決定的，而是在定義的時候處在的物件就是它的this let btn1 = document.getElementById('btn1') let btn2 = document.getElementById('btn2') let btn3 = document.getElementById('btn3') let btn4 = document.getElementById('btn4') btn1.onclick = function () { alert(this) // 正常函式內this指向呼叫他的函式，這裡是HTMLButtonElement } btn2.onclick = () => { alert(this) // 箭頭函式this指向處在的物件，這裡看外層是否有函式，沒有就是window } let obj = { setClick:function () { btn3.onclick = () => { alert(this) // 箭頭函式的this看外層的是否有函式，這裡有，內部箭頭函式的this等於外層函式的this指向呼叫它的obj } } } obj.setClick() let obj1 = { setClick: () => { btn4.onclick = () => { alert(this) // 箭頭函式的this看外層的是否有函式，這裡沒有，內部箭頭函式的this則指向window } } } obj1.setClick() function Person() { this.obj = { showThis : () => { console.log(this); // Person{} } } } let fun6 = new Person(); fun6.obj.showThis(); </script> </body> </html>