您好,登錄后才能下訂單哦!
小編給大家分享一下ES6中的箭頭函數(shù)及其作用域是什么,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
在ES6很多很棒的新特性中, 箭頭函數(shù) (或者大箭頭函數(shù))就是其中值得關(guān)注的一個! 它不僅僅是很棒很酷, 它很好的利用了作用域, 快捷方便的在現(xiàn)在使用以前我們用的技術(shù), 減少了很多代碼......但是如果你不了解箭頭函數(shù)原理的話可能就有點(diǎn)難以理解. 所以,讓我們來看下箭頭函數(shù), 就是現(xiàn)在!
你可以自己去學(xué)習(xí)和嘗試下, 你可以簡單的把示例程序代碼復(fù)制到你的瀏覽器控制臺下. 現(xiàn)在, 推薦使用Firefox(22+)開發(fā)者工具, Firefox(22+)開發(fā)者工具現(xiàn)在支持箭頭函數(shù),你也可以使用谷歌瀏覽器. 如果你使用谷歌瀏覽器, 你必須要做下列兩件事:
在谷歌瀏覽器中地址欄中輸入:about:flags, 找到 "使用體驗(yàn)性JavaScript"選項(xiàng),開啟使用。
在函數(shù)的開頭加上use strict,然后再在你的谷歌瀏覽中測試箭頭函數(shù)吧(提示:請用谷歌瀏覽器v38,我當(dāng)時就是被瀏覽器版本坑了):
(function(){ "use strict"; // use arrow functions here }());
幸運(yùn)的是后面會有越來越多的瀏覽器支持ES6特性. 現(xiàn)在你完成了所有準(zhǔn)備工作, 讓我們繼續(xù)深入它吧!
最近大家在討論關(guān)于ES6的一個話題:關(guān)于箭頭函數(shù), 像這樣:
=>
隨著討論產(chǎn)生了一個新的語法:
param => expression
新增的語法是作用在變量上, 可以在表達(dá)式中申明多個變量, 下面是箭頭函數(shù)的使用模式:
// 一個參數(shù)對應(yīng)一個表達(dá)式 param => expression;// 例如 x => x+2; // 多個參數(shù)對應(yīng)一個表達(dá)式 (param [, param]) => expression; //例如 (x,y) => (x + y); // 一個參數(shù)對應(yīng)多個表示式 param => {statements;} //例如 x = > { x++; return x;}; // 多個參數(shù)對應(yīng)多個表達(dá)式 ([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;}; //表達(dá)式里沒有參數(shù) () => expression; //例如var flag = (() => 2)(); flag等于2 () => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1 //傳入一個表達(dá)式,返回一個對象 ([param]) => ({ key: value }); //例如 var fuc = (x) => ({key:x}) var object = fuc(1); alert(object);//{key:1}
我們可以把一個普通函數(shù)轉(zhuǎn)換成用箭頭函數(shù)來實(shí)現(xiàn):
// 當(dāng)前函數(shù) var func = function (param) { return param.split(" "); } // 利用箭頭函數(shù)實(shí)現(xiàn) var func = param => param.split(" ");
從上面的例子中我們可以看出箭頭函數(shù)的語法實(shí)際上是返回了一個新的函數(shù), 這個函數(shù)有函數(shù)體和參數(shù)。
因此, 我們可以這樣調(diào)用剛才我們創(chuàng)建的函數(shù):
func("Felipe Moura"); // returns ["Felipe", "Moura"]
你能在立即執(zhí)行函數(shù)里使用箭頭函數(shù),例如:
( x => x * 2 )( 3 ); // 6
這行代碼產(chǎn)生了一個臨時函數(shù),這個函數(shù)有一個形參x,函數(shù)的返回值為x*2,之后系統(tǒng)會馬上執(zhí)行這個臨時函數(shù), 將3賦值給形參x.
下面的例子描述了臨時函數(shù)體里有多行代碼的情況:
( (x, y) => { x = x * 2; return x + y; })( 3, "A" ); // "6A"
思考下面的函數(shù):
var func = x => { return x++; };
我們列出了一些常見的問題:
箭頭函數(shù)創(chuàng)建的臨時函數(shù)的arguments它不會被置:
console.log(arguments); // not defined
typeof
和instanceof函
數(shù)也能正常檢查臨時函數(shù):
func instanceof Function; // true typeof func; // function func.constructor == Function; // true
把箭頭函數(shù)放在括號內(nèi)是無效的:
// 有效的常規(guī)語法 (function (x, y){ x= x * 2; return x + y; } (3, "B") ); // 無效的箭頭函數(shù)語法 ( (x, y) => { x= x * 2; return x + y; } ( 3, "A" ) ); // 但是可以這樣寫就是有效的了: ( (x,y) => { x= x * 2;return x + y; } )( 3,"A" );//立即執(zhí)行函數(shù)
盡管箭頭函數(shù)會產(chǎn)生一個臨時函數(shù),但是這個臨時函數(shù)不是一個構(gòu)造函數(shù):
var instance= new func(); // TypeError: func is not a constructor
同樣也沒有原型對象:
func.prototype; // undefined
這個箭頭函數(shù)的作用域和其他函數(shù)有一些不同,如果不是嚴(yán)格模式,this關(guān)鍵字就是指向window,嚴(yán)格模式就是undefined,在構(gòu)造函數(shù)里的this指向的是當(dāng)前對象實(shí)例,如果this在一個對象的函數(shù)內(nèi)則this指向的是這個對象,this有可能指向的是一個DOM元素,例如當(dāng)我們添加事件監(jiān)聽函數(shù)時,可能這個this的指向不是很直接,其實(shí)this(不止是this變量)變量的指向是根據(jù)一個規(guī)則來判斷的:作用域流。下面我將演示this在事件監(jiān)聽函數(shù)和在對象函數(shù)內(nèi)出現(xiàn)的情況:
在事件監(jiān)聽函數(shù)中:
document.body.addEventListener('click', function(evt){ console.log(this); // the HTMLBodyElement itself });
在構(gòu)造函數(shù)里:
function Person () { let fullName = null; this.getName = function () { return fullName; }; this.setName = function (name) { fullName = name; return this; }; } let jon = new Person(); jon.setName("Jon Doe"); console.log(jon.getName()); // "Jon Doe" //注:this關(guān)鍵字這里就不解釋了,大家自己google,baidu吧。
在這個例子中,如果我們讓Person.setName函數(shù)返回Person對象本身,我們就可以這樣用:
jon.setName("Jon Doe") .getName(); // "Jon Doe"
在一個對象里:
let obj = { foo: "bar", getIt: function () { return this.foo; } }; console.log( obj.getIt() ); // "bar"
但是當(dāng)執(zhí)行流(比如使用了setTimeout)和作用域變了的時候,this也會變。
function Student(data){ this.name = data.name || "Jon Doe"; this.age = data.age>=0 ? data.age : -1; this.getInfo = function () { return this.name + ", " + this.age; }; this.sayHi = function () { window.setTimeout( function () { console.log( this ); }, 100 ); } } let mary = new Student({ name: "Mary Lou", age: 13 }); console.log( mary.getInfo() ); // "Mary Lou, 13" mary.sayHi(); // window
當(dāng)setTimeout函數(shù)改變了執(zhí)行流的情況時,this的指向會變成全局對象,或者是在嚴(yán)格模式下就是undefine,這樣在setTimeout函數(shù)里面我們使用其他的變量去指向this對象,比如self,that,當(dāng)然不管你用什么變量,你首先應(yīng)該在setTimeout訪問之前,給self,that賦值,或者使用bind方法不然這些變量就是undefined。
這是后就是箭頭函數(shù)登場的時候了,它可以保持作用域,this的指向就不會變了。
讓我們看下上文起先的例子,在這里我們使用箭頭函數(shù):
function Student(data){ this.name = data.name || "Jon Doe"; this.age = data.age>=0 ? data.age : -1; this.getInfo = function () { return this.name + ", " + this.age; }; this.sayHi = function () { window.setTimeout( ()=>{ // the only difference is here console.log( this ); }, 100 ); } } let mary = new Student({ name: "Mary Lou", age: 13 }); console.log( mary.getInfo() ); // "Mary Lou, 13" mary.sayHi(); // Object { name: "Mary Lou", age: 13, ... }
分析:在sayHi函數(shù)中,我們使用了箭頭函數(shù),當(dāng)前作用域是在student對象的一個方法中,箭頭函數(shù)生成的臨時函數(shù)的作用域也就是student對象的sayHi函數(shù)的作用域。所以即使我們在setTimeout調(diào)用了箭頭函數(shù)生成的臨時函數(shù),這個臨時函數(shù)中的this也是正確的指向。
創(chuàng)建一個函數(shù)很容易,我們可以利用它可以保持作用域的特征:
例如我們可以這么使用:Array.forEach()
var arr = ['a', 'e', 'i', 'o', 'u']; arr.forEach(vowel => { console.log(vowel); });
分析:在forEach里箭頭函數(shù)會創(chuàng)建并返回一個臨時函數(shù) tempFun,這個tempFun你可以想象成這樣的:function(vowel){ console.log(vowel);}但是Array.forEach函數(shù)會怎么去處理傳入的tempFunc呢?在forEach函數(shù)里會這樣調(diào)用它:tempFunc.call(this,value);所有我們看到函數(shù)的正確執(zhí)行效果。
//在Array.map里使用箭頭函數(shù),這里我就不分析函數(shù)執(zhí)行過程了。。。。 var arr = ['a', 'e', 'i', 'o', 'u']; arr.map(vowel => { return vowel.toUpperCase(); }); // [ "A", "E", "I", "O", "U" ]
費(fèi)布拉奇數(shù)列
var factorial = (n) => { if(n==0) { return 1; } return (n * factorial (n-1) ); } factorial(6); // 720
我們也可以用在Array.sort方法里:
let arr = ['a', 'e', 'i', 'o', 'u']; arr.sort( (a, b)=> a < b? 1: -1 );
也可以在事件監(jiān)聽函數(shù)里使用:
// EventObject, BodyElement document.body.addEventListener('click', event=>console.log(event, this));
看完了這篇文章,相信你對ES6中的箭頭函數(shù)及其作用域是什么有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。