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