函式引數的擴充套件

預設引數

基本用法

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

注意點：使用函式預設引數時，不允許有同名引數。

// 不報錯
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);
}

只有在未傳遞引數，或者引數為 undefined 時，才會使用預設引數，null 值被認為是有效的值傳遞。

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

函式引數預設值存在暫時性死區，在函式引數預設值表示式中，還未初始化賦值的引數值無法作為其他引數的預設值。

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

不定引數

不定引數用來表示不確定引數個數，形如，...變數名，由...加上一個具名引數識別符號組成。具名引數只能放在引數組的最後，並且有且只有一個不定引數。

基本用法

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

箭頭函式

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

引數 => 函式體

基本用法：

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

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

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

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

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

當箭頭函式要返回物件的時候，為了區分於程式碼塊，要用()將物件包裹起來

// 報錯
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 = () => {
  // 箭頭函式裡面沒有 this 物件，
  // 此時的 this 是外層的 this 物件，即 Window 
  console.log(this)
}
func(55)  // Window 
 
var func = () => {    
  console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

箭頭函式體中的 this 物件，是定義函式時的物件，而不是使用函式時的物件。

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

不可以作為建構函式，也就是不能使用 new 命令，否則會報錯

適合使用的場景

ES6 之前，JavaScript 的 this 物件一直很令人頭大，回撥函式，經常看到 var self = this 這樣的程式碼，為了將外部 this 傳遞到回撥函式中，那麼有了箭頭函式，就不需要這樣做了，直接使用 this 就行。

// 回撥函式
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 上下文的時候，就可以使用箭頭函式。

不適合使用的場景

定義函式的方法，且該方法中包含 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 物件

需要動態 this 的時候

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

button 的監聽函式是箭頭函式，所以監聽函式裡面的 this 指向的是定義的時候外層的 this 物件，即 Window，導致無法操作到被點選的按鈕物件。