建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
ECMAScript 6.0（以下簡(jiǎn)稱(chēng)ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。它的目標(biāo)，是使得JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言，本篇文章重點(diǎn)講解一下ES6 函數(shù)。
讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、石龍網(wǎng)站維護(hù)、網(wǎng)站推廣。
函數(shù)參數(shù)的擴(kuò)展
默認(rèn)參數(shù)
基本用法
function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",18); // Amy,18
fn("Amy",""); // Amy,
fn("Amy"); // Amy,17
注意點(diǎn)：使用函數(shù)默認(rèn)參數(shù)時(shí)，不允許有同名參數(shù)。
// 不報(bào)錯(cuò)
function fn(name,name){
console.log(name);
}
// 報(bào)錯(cuò)
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
console.log(name+","+age);
}
只有在未傳遞參數(shù)，或者參數(shù)為 undefined 時(shí)，才會(huì)使用默認(rèn)參數(shù)，null 值被認(rèn)為是有效的值傳遞。
function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",null); // Amy,null
函數(shù)參數(shù)默認(rèn)值存在暫時(shí)性死區(qū)，在函數(shù)參數(shù)默認(rèn)值表達(dá)式中，還未初始化賦值的參數(shù)值無(wú)法作為其他參數(shù)的默認(rèn)值。
function f(x,y=x){
console.log(x,y);
}
f(1); // 1 1
function f(x=y){
console.log(x);
}
f(); // ReferenceError: y is not defined
不定參數(shù)
不定參數(shù)用來(lái)表示不確定參數(shù)個(gè)數(shù)，形如，…變量名，由…加上一個(gè)具名參數(shù)標(biāo)識(shí)符組成。具名參數(shù)只能放在參數(shù)組的最后，并且有且只有一個(gè)不定參數(shù)。
基本用法
function f(...values){
console.log(values.length);
}
f(1,2); //2
f(1,2,3,4); //4
箭頭函數(shù)
箭頭函數(shù)提供了一種更加簡(jiǎn)潔的函數(shù)書(shū)寫(xiě)方式?；菊Z(yǔ)法是：
參數(shù) => 函數(shù)體 基本用法：
var f = v => v;
//等價(jià)于
var f = function(a){
return a;
}
f(1); //1
當(dāng)箭頭函數(shù)沒(méi)有參數(shù)或者有多個(gè)參數(shù)，要用 () 括起來(lái)。
var f = (a,b) => a+b;
f(6,2); //8
當(dāng)箭頭函數(shù)函數(shù)體有多行語(yǔ)句，用 {} 包裹起來(lái)，表示代碼塊，當(dāng)只有一行語(yǔ)句，并且需要返回結(jié)果時(shí)，可以省略 {} , 結(jié)果會(huì)自動(dòng)返回。
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
當(dāng)箭頭函數(shù)要返回對(duì)象的時(shí)候，為了區(qū)分于代碼塊，要用 () 將對(duì)象包裹起來(lái)
// 報(bào)錯(cuò)
var f = (id,name) => {id: id, name: name};
f(6,2); // SyntaxError: Unexpected token :
// 不報(bào)錯(cuò)
var f = (id,name) => ({id: id, name: name});
f(6,2); // {id: 6, name: 2}
注意點(diǎn)：沒(méi)有 this、super、arguments 和 new.target 綁定。
var func = () => {
// 箭頭函數(shù)里面沒(méi)有 this 對(duì)象，
// 此時(shí)的 this 是外層的 this 對(duì)象，即 Window
console.log(this)
}
func(55) // Window
var func = () => {
console.log(arguments)
}
func(55); // ReferenceError: arguments is not defined
箭頭函數(shù)體中的 this 對(duì)象，是定義函數(shù)時(shí)的對(duì)象，而不是使用函數(shù)時(shí)的對(duì)象。
function fn(){
setTimeout(()=>{
// 定義時(shí)，this 綁定的是 fn 中的 this 對(duì)象
console.log(this.a);
},0)
}
var a = 20;
// fn 的 this 對(duì)象為 {a: 19}
fn.call({a: 18}); // 18
不可以作為構(gòu)造函數(shù)，也就是不能使用 new 命令，否則會(huì)報(bào)錯(cuò)
適合使用的場(chǎng)景
ES6 之前，JavaScript 的 this 對(duì)象一直很令人頭大，回調(diào)函數(shù)，經(jīng)?？吹?var self = this 這樣的代碼，為了將外部 this 傳遞到回調(diào)函數(shù)中，那么有了箭頭函數(shù)，就不需要這樣做了，直接使用 this 就行。
// 回調(diào)函數(shù)
var Person = {
'age': 18,
'sayHello': function () {
setTimeout(function () {
console.log(this.age);
});
}
};
var age = 20;
Person.sayHello(); // 20
var Person1 = {
'age': 18,
'sayHello': function () {
setTimeout(()=>{
console.log(this.age);
});
}
};
var age = 20;
Person1.sayHello(); // 18
所以，當(dāng)我們需要維護(hù)一個(gè) this 上下文的時(shí)候，就可以使用箭頭函數(shù)。
不適合使用的場(chǎng)景
定義函數(shù)的方法，且該方法中包含 this
var Person = {
'age': 18,
'sayHello': ()=>{
console.log(this.age);
}
};
var age = 20;
Person.sayHello(); // 20
// 此時(shí) this 指向的是全局對(duì)象
var Person1 = {
'age': 18,
'sayHello': function () {
console.log(this.age);
}
};
var age = 20;
Person1.sayHello(); // 18
// 此時(shí)的 this 指向 Person1 對(duì)象
需要?jiǎng)討B(tài) this 的時(shí)候
var button = document.getElementById('userClick');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
button 的監(jiān)聽(tīng)函數(shù)是箭頭函數(shù)，所以監(jiān)聽(tīng)函數(shù)里面的 this 指向的是定義的時(shí)候外層的 this 對(duì)象，即 Window，導(dǎo)致無(wú)法操作到被點(diǎn)擊的按鈕對(duì)象。
網(wǎng)頁(yè)題目：詳解ES6函數(shù)
文章地址：http://www.5511xx.com/article/dpcjjej.html
