引數的預設值

ES6 允許為函式的引數設定預設值，即直接寫在引數定義的後面

函式不能有同名引數

引數初始化會形成一個單獨作用域。實際執行的是 let a = 1;

引數預設值是惰性求值的

每次呼叫函式foo，都會重新計算x + 1，而不是預設p等於 100

• let x = 99;
  function foo(p = x + 1) {
      console.log(p);
  }
  
  foo();    // 100
  
  x = 100;
  foo();    // 101

• function log(x, y = 'World') {
      console.log(x, y);
  }
  
  log(
   
  'Hello');    // Hello World
  log('Hello', 'China');    // Hello China
  log('Hello', '');    // Hello

• function Point(x = 0, y = 0) {
      this.x = x;
      this.y = y;
  }
  
  const p = new Point();
  console.log(p);    // { x: 0, y: 0 }

   

3

3

3

3

rest 多餘實引數組

...args                x, ...args

...陣列名            實參, 多餘引數陣列

實參列表，是一個真陣列

用於獲取函式的多餘引數

• 陣列的操作
• 
• 函式中的操作
• 利用 rest 引數改寫陣列 push 方法的例子

• function push(arr, ...items) {
      items.forEach(function(item) {
          arr.push(item);
          console.log(item);
      });
  };
  
  var arr = [];
  push(arr, 
   
  1, 2, 3)

• 函式的 length 屬性，不包括 rest 引數，因為 rest 引數表示 多餘的實參列表

• console.log((function(a) {}).length);    // 1
  console.log((function(...a) {}).length);    // 0
  console.log((function(a, ...b) {}).length);    // 1

箭頭函式 const func = () => {}; 

簡化原來的 const func = function(){};

箭頭函式 沒有自己的顯式原型屬性，即 func.prototype = undefined;

箭頭函式 不能作為建構函式使用，即不能 new 呼叫

箭頭函式 的 this 指向最近的包裹函式的 this 一致，如果沒有函式包裹，則 this 指向 window

箭頭函式 可以讓 this 指向固定化，這種特性很有利於封裝回調函式

實際原因是箭頭函式根本沒有自己的 this，導致內部的 this 就是外層程式碼塊的 this。

正是因為它沒有 this，所以也就不能用作建構函式

於箭頭函式沒有自己的 this，所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向

其實箭頭函式也沒有 arguments、super、new.target

箭頭函式的函式體內 不可以使用 arguments 物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替

不可以使用 yield 命令，因此箭頭函式不能用作 Generator 函式

• var handler = {
      id: '123456',
  
      init: function() {
          document.addEventListener('click', event => this.doSomething(event.type), false);
      },
  
      doSomething: function(type) {
         console.log('Handling ' + type  + ' for ' + this.id);
      }
  };

• 當 形參 只有一個時，可以省略括號

const func = (x) => {};

const func = x => {};

• 函式體 只有一條語句時，可以省略花括號，並 return 這條語句的結果;

const func = x => { x += 1;};

const func = x => x+=1;

• 由於花括號被解釋為程式碼塊，所以如果 箭頭函式 想要直接返回一個物件，必須在物件外面加上括號，否則會報錯

• let getTempItem = id => ({ id: id, name: "Temp" });

• 簡化了 回撥函式

• // 正常函式寫法
  [1,2,3].map(function (x) {
      return x * x;
  });
  
  // 箭頭函式寫法
  [1,2,3].map(x => x * x);

rest 引數 與 箭頭函式的結合使用

• const numbers = (...nums) => nums;
  
  numbers(1, 2, 3, 4, 5);    // [1,2,3,4,5]
  
  const headAndTail = (head, ...tail) => [head, tail];
  
  headAndTail(1, 2, 3, 4, 5);    // [1,[2,3,4,5]]

• 以下是錯誤程式碼，不適用場合：

定義函式的方法，且該方法內部包括 this

• const cat = {
     lives: 9,
     jumps: () => {
         this.lives--;    // this 指向 window ，所以結果肯定是有問題的
     };
  };

需要動態this的時候，也不應使用箭頭函式

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

3

3

3

33

3

3

3

3

3

3