ES6箭頭函式(Arrow Functions)

2021-07-23 10:32:54 字數 3209 閱讀 8383

箭頭函式 (arrow functions)也稱「胖箭頭函式」,是es6全新的特性。是個簡寫的函式表示式,擁有詞法作用域的this。此外,箭頭函式總是匿名的。(詞法作用域就是乙個變數的作用在定義的時候就已經被定義好,當在本作用域中找不到變數,就會一直向父作用域中查詢,直到找到為止。)

函式無引數,返回值為1

返回值為引數的平方,當函式體只有一條語句時,則可以省略大括號{},預設返回該表示式的值。

只有乙個引數時,則可以省略小括號()

返回值為1。(使用塊語句的箭頭函式不會自動返回值,需要使用return語句將所需的值返回)

返回值為物件

1、typeof運算子和普通的函式一樣

let commfunc = () => {};

console.log(typeof commfunc);

輸出為function

let arrowfunc = () => {};

console.log(typeof arrowfunc);

輸出也為function

從此可以看出箭頭函式的型別和普通的函式一樣都為function

2、instanceof也返回true,表明是function的例項

let func = () => {};

console.log(func instanceof function);

輸出為true,由此可以看出箭頭函式也是function的例項

3、箭頭函式中的this繼承外圍作用域

let person = 

};person.say();

this的值為」{}」或windowthis.name的值為undefined或」「(空字串)。將上面的這段**寫在檔案中,在node環境中執行,this的值輸出為」{}」,這個空物件就是exports,因為沒有寫exportsexports就預設指向module.exports,而module.exports就是個空物件。但是在命令列中執行上面**(依然是node環境中),則this指向global物件(這些有可能偏離中心,但是大家可以試試,在這段**前加上exports.name = "susan",此時的this指向物件,this.name的值就是susan

let person = 

};person.speak();

this的值為person物件,this.name的值為galler。

小結:箭頭函式本身沒有this,根據詞法作用域,於是向上查詢this,則發現this指向window物件(瀏覽器環境)或者{}(node環境中),由於window和{}物件沒有name屬性,則this.name為」「(瀏覽器環境)或者undefined(node環境)

4、返回物件用小括號括起來

let person = () => 

console.log(person());

輸出為undefined。此時的」{}」表明函式的起始位置和結束位置,由於該函式沒有返回值,所以被呼叫時值為undefined

let person = () => ();

console.log(person());

輸出為。 此時」{}」表示定義乙個物件。用」()」括起來表示是乙個表示式,預設返回該物件。

5、箭頭函式中不能使用new

let person = (name) => ;

let one = new person("galler");

執行該程式,則出現typeerror: person is not a constructor

6、arguments

function person() 

person(1);

一般的函式使用arguments,在瀏覽器中輸出為乙個陣列:[1],在node環境中輸出為乙個物件:

let person = () => ;

person("galler");

箭頭函式使用arguments,在瀏覽器環境中,則出現referenceerror,在node環境中輸出,……}

由此可以得出,箭頭函式與普通函式的再乙個區別:不能使用arguments物件。

7、沒有原型

let person = () => {}

console.log(person.prototype);

輸出為undefined。由此可以看出箭頭函式沒有原型。

注意:箭頭函式內容實體中不能使用statement作為表示式expression。

事物都是有兩面性的,所以箭頭函式的優點即缺點。**太過簡單,導致不好閱讀,this提前定義。

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...

ES6 箭頭函式

es6 中,箭頭函式就是函式的一種簡寫形式,使用括號包裹數,跟隨乙個 緊接著是函式體 var getprice function 箭頭函式 var getprice 9.15 箭頭函式不僅僅是讓 變得簡潔,函式中 this 總是繫結總shi 指向物件自身 function person 1000 使...