新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

詳解ES6函數(shù)

ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，已經(jīng)在2015年6月正式發(fā)布了。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業(yè)級開發(fā)語言，本篇文章重點講解一下ES6 函數(shù)。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設、石龍網(wǎng)站維護、網(wǎng)站推廣。

函數(shù)參數(shù)的擴展

默認參數(shù)

基本用法

function fn(name,age=17){
console.log(name+","+age);
}
fn("Amy",18);  // Amy,18
fn("Amy","");  // Amy,
fn("Amy");     // Amy,17

注意點：使用函數(shù)默認參數(shù)時，不允許有同名參數(shù)。

// 不報錯
function fn(name,name){
console.log(name);
}

// 報錯
//SyntaxError: Duplicate parameter name not allowed in this context
function fn(name,name,age=17){
console.log(name+","+age);
}

只有在未傳遞參數(shù)，或者參數(shù)為 undefined 時，才會使用默認參數(shù)，null 值被認為是有效的值傳遞。

function fn(name,age=17){
   console.log(name+","+age);
}
fn("Amy",null); // Amy,null

函數(shù)參數(shù)默認值存在暫時性死區(qū)，在函數(shù)參數(shù)默認值表達式中，還未初始化賦值的參數(shù)值無法作為其他參數(shù)的默認值。

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ù)用來表示不確定參數(shù)個數(shù)，形如，…變量名，由…加上一個具名參數(shù)標識符組成。具名參數(shù)只能放在參數(shù)組的最后，并且有且只有一個不定參數(shù)。

基本用法

function f(...values){
   console.log(values.length);
}
f(1,2);      //2
f(1,2,3,4);  //4

箭頭函數(shù)

箭頭函數(shù)提供了一種更加簡潔的函數(shù)書寫方式。基本語法是：

參數(shù) => 函數(shù)體基本用法：

var f = v => v;
//等價于
var f = function(a){
return a;
}
f(1);  //1

當箭頭函數(shù)沒有參數(shù)或者有多個參數(shù)，要用 () 括起來。

var f = (a,b) => a+b;
f(6,2);  //8

當箭頭函數(shù)函數(shù)體有多行語句，用 {} 包裹起來，表示代碼塊，當只有一行語句，并且需要返回結果時，可以省略 {} , 結果會自動返回。

var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2);  // 8

當箭頭函數(shù)要返回對象的時候，為了區(qū)分于代碼塊，要用 () 將對象包裹起來

// 報錯
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :

// 不報錯
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

注意點：沒有 this、super、arguments 和 new.target 綁定。

var func = () => {
 // 箭頭函數(shù)里面沒有 this 對象，
 // 此時的 this 是外層的 this 對象，即 Window
 console.log(this)
}
func(55)  // Window

var func = () => {    
 console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

箭頭函數(shù)體中的 this 對象，是定義函數(shù)時的對象，而不是使用函數(shù)時的對象。

function fn(){
 setTimeout(()=>{
   // 定義時，this 綁定的是 fn 中的 this 對象
   console.log(this.a);
 },0)
}
var a = 20;
// fn 的 this 對象為 {a: 19}
fn.call({a: 18});  // 18

不可以作為構造函數(shù)，也就是不能使用 new 命令，否則會報錯

適合使用的場景

ES6 之前，JavaScript 的 this 對象一直很令人頭大，回調(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

所以，當我們需要維護一個 this 上下文的時候，就可以使用箭頭函數(shù)。

不適合使用的場景

定義函數(shù)的方法，且該方法中包含 this

var Person = {
   'age': 18,
   'sayHello': ()=>{
       console.log(this.age);
     }
};
var age = 20;
Person.sayHello();  // 20
// 此時 this 指向的是全局對象

var Person1 = {
   'age': 18,
   'sayHello': function () {
       console.log(this.age);
   }
};
var age = 20;
Person1.sayHello();   // 18
// 此時的 this 指向 Person1 對象

需要動態(tài) this 的時候

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

button 的監(jiān)聽函數(shù)是箭頭函數(shù)，所以監(jiān)聽函數(shù)里面的 this 指向的是定義的時候外層的 this 對象，即 Window，導致無法操作到被點擊的按鈕對象。

新聞標題：詳解ES6函數(shù)
網(wǎng)頁地址：http://m.fisionsoft.com.cn/article/dpcjjej.html