javascript中的箭頭函數(shù)基礎(chǔ)語(yǔ)法及使用場(chǎng)景示例
箭頭函數(shù)
箭頭函數(shù)表達(dá)式的語(yǔ)法比函數(shù)表達(dá)式更簡(jiǎn)潔,并且沒(méi)有自己的 this,arguments,super 或 new.target。箭頭函數(shù)表達(dá)式更適用于那些本來(lái)需要匿名函數(shù)的地方,并且箭頭函數(shù)不能用作構(gòu)造函數(shù)。
語(yǔ)法
(param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression //相當(dāng)于:(param1, param2, …, paramN) =>{ return expression; } // 當(dāng)只有一個(gè)參數(shù)時(shí),圓括號(hào)是可選的: (singleParam) => { statements } singleParam => { statements } // 沒(méi)有參數(shù)的函數(shù)應(yīng)該寫(xiě)成一對(duì)圓括號(hào)。 () => { statements } //加括號(hào)的函數(shù)體返回對(duì)象字面量表達(dá)式: params => ({foo: bar}) //支持剩余參數(shù)和默認(rèn)參數(shù) (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } //同樣支持參數(shù)列表解構(gòu) let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); // 6
沒(méi)有單獨(dú)的this
箭頭函數(shù)的作用:更簡(jiǎn)短的函數(shù)且不綁定 this。
對(duì)于普通函數(shù)來(lái)說(shuō),內(nèi)部的 this 指向函數(shù)運(yùn)行時(shí)所在的對(duì)象,但是箭頭函數(shù)不是。
箭頭函數(shù)不會(huì)創(chuàng)建自己的 this,它只會(huì)從自己的作用域鏈的上一層繼承 this。
箭頭函數(shù)內(nèi)部的 this 指向是固定的,普通函數(shù)的 this 指向是可變的。
function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; foo.call({ id: 42 }); // id: 42
上面代碼中,setTimeout() 的參數(shù)是一個(gè)箭頭函數(shù),這個(gè)箭頭函數(shù)的定義生效是在 foo 函數(shù)生成時(shí),而它的真正執(zhí)行要等到 100 毫秒后。如果是普通函數(shù),執(zhí)行時(shí) this 應(yīng)該指向全局對(duì)象 window,這時(shí)應(yīng)該輸出 21。但是,箭頭函數(shù)導(dǎo)致 this 總是指向函數(shù)定義生效時(shí)所在的對(duì)象(本例是 {id: 42}),所以打印出來(lái)的是 42。
通過(guò) call 或 apply 或 bind 調(diào)用
由于箭頭函數(shù)沒(méi)有自己的 this 指針,通過(guò) call() 或 apply() 方法調(diào)用一個(gè)箭頭函數(shù)時(shí),只能傳遞參數(shù)(不能綁定 this),他們的第一個(gè)參數(shù)會(huì)被忽略(這種現(xiàn)象對(duì)于 bind 方法同樣成立)。
var adder = { base : 1, add: function(a) { var f = v => v + this.base; return f(a); }, addAnotherThis: function(a) { var f = v => v + this.base; var b = { base : 2 }; // return f.call(b, a); // return f.apply(b, [a]); return f.bind(b, a)(); } }; console.log(adder.add(1)); // 輸出 2 console.log(adder.addAnotherThis(1)); // 輸出 2
不綁定 arguments
箭頭函數(shù)不綁定 arguments 對(duì)象。此外,super,new.target 在箭頭函數(shù)中也不存在。
var arguments = [1, 2, 3]; var fn = () => arguments[0]; // arguments 只是引用了封閉作用域內(nèi)的 arguments fn(); // 1 function getArgs(n) { // 隱式綁定 getArgs 函數(shù)的 arguments 對(duì)象。arguments[0] 是 n // 即傳給 getArgs 函數(shù)的第一個(gè)參數(shù) var f = () => arguments[0] + n; return f(); } getArgs(1); // 2 getArgs(2); // 4 getArgs(3); // 6 getArgs(3,2);//6
在箭頭函數(shù)中,相比于使用 arguments 對(duì)象來(lái)說(shuō),使用剩余參數(shù)是更好的選擇。
function getArgs(n) { var f = (...args) => args[0]; return f(); } getArgs(1); // 1 getArgs(2); // 2 const numbers = (...nums) => nums;
使用箭頭函數(shù)作為方法
箭頭函數(shù)表達(dá)式對(duì)非方法函數(shù)是最合適的。
示例1:
var obj = { a: 10, b: () => console.log(this.a, this), c: function() { console.log(this.a, this) } } obj.b(); // undefined, Window{...} obj.c(); // 10, Object {...}
示例2:
let obj = { a: 10 }; Object.defineProperty(obj, "b", { get: () => { console.log(this.a, typeof this.a, this); return this.a + 10; // this 代表全局對(duì)象 'Window', 因此 'this.a' 返回 'undefined' } });
不能使用 new 操作符
箭頭函數(shù)不能用作構(gòu)造器,即不能和 new 一起使用。
let Apple = () => {} let apple = new Apple() // Uncaught TypeError: Apple is not a constructor
不能使用 prototype 屬性
箭頭函數(shù)沒(méi)有 prototype 屬性,因?yàn)椴荒苡米鳂?gòu)造函數(shù)。
let far = function() {} console.log(far.prototype) // {constructor: ?} let Apple = () => {} console.log(Apple.prototype) // undefined
不能用作函數(shù)生成器
函數(shù)生成器用作通常不能在箭頭函數(shù)中使用,除非是嵌套在允許使用的函數(shù)內(nèi)。因此,箭頭函數(shù)不能用作函數(shù)生成器。
返回對(duì)象字面量
let apple = () => ({ height: 100 })
箭頭函數(shù)返回對(duì)象字面量,必須用圓括號(hào)把對(duì)象字面量包起來(lái)。
params => { objectKey: objectValue } 這種語(yǔ)法返回對(duì)象是錯(cuò)誤的。因?yàn)榛ɡㄌ?hào){}里面的代碼被解析為一系列語(yǔ)句(代碼塊),所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象,必須在對(duì)象外面加上括號(hào)。
換行
箭頭函數(shù)中參數(shù)和箭頭之間不能換行。
錯(cuò)誤方式:
let apple = () => ({ height: 100 }) // Uncaught SyntaxError: Unexpected token '=>'
可以在 => 之后換行,或者使用 () 或 {} 換行。
正確方式:
let apple = () => ({ height: 100 }) let apple = ( s, a, b ) => ({ height: 100 }) let apple = () => { // ... }
箭頭函數(shù)不適用場(chǎng)合
定義對(duì)象的方法,且方法內(nèi)部包含 this,不適用箭頭函數(shù)
const obj = { a: 1, fn: () => { this.a++ } } console.log(obj.fn()) // undefined
因?yàn)閷?duì)象不構(gòu)成單獨(dú)的作用域,導(dǎo)致 fn 箭頭函數(shù)中定義時(shí)的作用域就是全局作用域,fn
里面的 this 指向全局對(duì)象。如果 fn 是普通函數(shù),方法內(nèi)部的 this 執(zhí)行調(diào)用時(shí)的作用域,即obj。
需要?jiǎng)討B(tài) this 的時(shí)候,不適用箭頭函數(shù)
var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });
代碼運(yùn)行時(shí),點(diǎn)擊按鈕會(huì)出現(xiàn)報(bào)錯(cuò),因?yàn)?nbsp;button 的監(jiān)聽(tīng)函數(shù)是一個(gè)箭頭函數(shù),它的 this 指向全局對(duì)象。如果改成普通函數(shù),this 就會(huì)動(dòng)態(tài)指向被點(diǎn)擊的按鈕對(duì)象。
相關(guān)文章
詳解微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用
這篇文章主要介紹了詳解微信小程序Page中data數(shù)據(jù)操作和函數(shù)調(diào)用的相關(guān)資料,希望通過(guò)本文能幫助到大家掌握這方法,需要的朋友可以參考下2017-09-09微信小程序 加載 app-service.js 錯(cuò)誤解決方法
這篇文章主要介紹了微信小程序 加載 app-service.js 錯(cuò)誤詳解的相關(guān)資料,在開(kāi)發(fā)微信小程序過(guò)程中出現(xiàn)了app-services.js的錯(cuò)誤,并解決此問(wèn)題,需要的朋友可以參考下2016-10-10apply?call?bind方法原理及使用場(chǎng)景示例詳解
這篇文章主要為大家介紹了apply&call&bind方法原理及使用場(chǎng)景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08前端JavaScript算法找出只出現(xiàn)一次的數(shù)字
這篇文章主要為大家介紹了前端JavaScript算法找出只出現(xiàn)一次的數(shù)字的算法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解
這篇文章主要介紹了微信小程序教程之本地圖片上傳(leancloud)實(shí)例詳解的相關(guān)資料,這里舉例說(shuō)明該如何實(shí)現(xiàn)和實(shí)例代碼,文章一一表述,需要的朋友可以參考下2016-11-11JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用
JavaScript實(shí)際應(yīng)用:innerHTMl和確認(rèn)提示的使用...2006-06-06微信小程序使用navigateTo數(shù)據(jù)傳遞的實(shí)例
這篇文章主要介紹了微信小程序使用navigateTo數(shù)據(jù)傳遞的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09