世界不止0和1 還有...

目錄???????

函式進階

基礎知識

1.宣告定義

2.匿名函式

3.立即執行

4.函式提升

5.形參實參

6.默認引數

7.函式引數

8.arguments

9.箭頭函式

10.遞回呼叫

11.回呼函式

12.展開語法

13.標簽函式

this

1.函式呼叫

2.方法呼叫

3.箭頭函式

apply/call/bind

1.原理分析

2.apply/call

3.bind

函式進階

基礎知識

函式是將復用的代碼塊封裝起來的模塊，在JS中函式還有其他語言所不具有的特性，接下來我們會詳細掌握使用技巧，

1.宣告定義

在JS中函式也是物件函式是Function類的創建的實體，下面的例子可以方便理解函式是物件，

標準語法是使用函式宣告來定義函式

物件字面量屬性函式簡寫

全域函式會宣告在window物件中，這不正確建議使用后面章節的模塊處理

當我們定義了 screenX 函式后就覆寫了window.screenX方法

使用let/const時不會壓入window

2.匿名函式

函式是物件所以可以通過賦值來指向到函式物件的指標，當然指標也可以傳遞給其他變數，注意后面要以;結束，下面使用函式運算式將 匿名函式 賦值給變數

標準宣告的函式優先級更高，決議器會優先提取函式并放在代碼樹頂端，所以標準宣告函式位置不限制，所以下面的代碼可以正常執行，

標準宣告優先級高于賦值宣告

程式中使用匿名函式的情況非常普遍

3.立即執行

立即執行函式指函式定義時立即執行

可以用來定義私有作用域防止污染全域作用域

使用 let/const 有塊作用域特性，所以使用以下方式也可以產生私有作用域

4.函式提升

函式也會提升到前面，優先級行于var變數提高

變數函式定義不會被提升

5.形參實參

形參是在函式宣告時設定的引數，實參指在呼叫函式時傳遞的值，

形引數量大于實參時，沒有傳參的形參值為 undefined

實引數量大于形參時，多于的實參將忽略并不會報錯

當沒傳遞引數時值為undefined

6.默認引數

下面通過計算年平均銷售額來體驗以往默認引數的處理方式

使用新版本默認引數方式如下

下面通過排序來體驗新版默認引數的處理方式，下例中當不傳遞 type 引數時使用默認值 asc，

默認引數要放在最后面

7.函式引數

函式可以做為引數傳遞，這也是大多數語言都支持的語法規則，

函式可以做為引數傳遞

8.arguments

arguments 是函式獲得到所有引數集合，下面是使用 arguments 求和的例子

更建議使用展示語法

9.箭頭函式

箭頭函式是函式宣告的簡寫形式，在使用遞回呼叫、建構式、事件處理器時不建議使用箭頭函式，

無引數時使用空擴號即可

函式體為單一運算式時不需要 return 回傳處理，系統會自動回傳運算式計算結果

多引數傳遞與普通宣告函式一樣使用逗號分隔

只有一個引數時可以省略括號

10.遞回呼叫

遞回指函式內部呼叫自身的方式，

主要用于數量不確定的回圈操作

要有退出時機否則會陷入死回圈

下面通過階乘來體驗遞回呼叫

累加計算方法

遞回列印倒三角

******
*****
****
***
**
*

function star(row = 5) {
  if (row == 0) return "";
  document.write("*".repeat(row) + "<br/>");
  star(--row);
}

11.回呼函式

在某個時刻被其他函式呼叫的函式稱為回呼函式，比如處理鍵盤、滑鼠事件的函式，

<button id='hd'>button</button>
<script>
     document.getElementById('hd').addEventListener('click', () => alert('通過回呼函式呼叫'));
</script>

使用回呼函式遞增計算

12.展開語法

展示語法或稱點語法體現的就是收/放特性，做為值時是放，做為接收變數時是收，

使用展示語法可以替代 arguments 來接收任意數量的引數

也可以用于接收部分引數

使用 ... 可以接受傳入的多個引數合并為陣列，下面是使用點語法進行求合計算，

多個引數時...引數必須放后面，下面計算購物車商品折扣

13.標簽函式

使用函式來決議標簽字串，第一個引數是字串值的陣列，其余的引數為標簽變數，

this

1.函式呼叫

全域環境下this就是window物件的參考

使用嚴格模式時在全域函式內this為undefined

2.方法呼叫

函式為物件的方法時this 指向該物件

可以使用多種方式創建物件，下面是使用建構式創建物件

建構式

函式當被 new 時即為建構式，一般建構式中包含屬性與方法，函式中的背景關系指向到實體物件，

建構式主要用來生成物件，里面的this默認就是指當前物件

物件字面量

下例中的hd函式不屬于物件方法所以指向window

show屬于物件方法執向 obj物件

在方法中使用函式時有些函式可以改變this如forEach

也可以在父作用域中定義參考this的變數

3.箭頭函式

箭頭函式沒有this, 也可以理解為箭頭函式中的this 會繼承定義函式時的背景關系，可以理解為和外層函式指向同一個this，

如果想使用函式定義時的背景關系中的this，那就使用箭頭函式

下例中的匿名函式的執行環境為全域所以 this 指向 window，

以往解決辦法會匿名函式呼叫處理定義變數，然后在匿名函式中使用，

使用箭頭函式后 this 為定義該函式的背景關系，也可以理解為定義時父作用域中的this

事件中使用箭頭函式結果不是我們想要的

事件函式可理解為物件onclick設定值，所以函式宣告時this為當前物件

但使用箭頭函式時this為宣告函式背景關系

下面體驗使用普通事件函式時this指向元素物件

使用普通函式時this為當前DOM物件

下面是使用箭頭函式時this指向背景關系物件

使用handleEvent系結事件處理器時，this指向當前物件而不是DOM元素，

apply/call/bind

改變this指標，也可以理解為物件借用方法，就現像生活中向鄰居借東西一樣的事情，

1.原理分析

建構式中的this默認是一個空物件，然后建構式處理后把這個空物件變得有值，

可以改變建構式中的空物件，即讓建構式this指向到另一個物件，

2.apply/call

call與apply 用于顯示的設定函式的背景關系，兩個方法作用一樣都是將物件系結到this，只是在傳遞引數上有所不同，

apply 用陣列傳參

call 需要分別傳參

與 bind 不同 call/apply 會立即執行函式

語法使用介紹

使用 call 設定函式背景關系

找陣列中的數值最大值

實作建構式屬性繼承

<script>
	"use strict";
function Request() {
  this.get = function(params = {}) {
    //組合請求引數
    let option = Object.keys(params)
      .map(i => i + "=" + params[i])
      .join("&");

    return `獲取資料 API:${this.url}?${option}`;
  };
}
//文章控制器
function Article() {
  this.url = "article/index";
  Request.apply(this, []);
}
let Lamour = new Article();
console.log(
  Lamour.get({
    row: 10,
    start: 3
  })
);
//課程控制器
function Lesson() {
  this.url = "lesson/index";
  Request.call(this);
}
let js = new Lesson();
console.log(
  js.get({
    row: 20
  })
);

	
</script>

制作顯示隱藏面板

<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }

    dl {
        width: 400px;
        display: flex;
        flex-direction: column;
    }

    dt {
        background: #e67e22;
        border-bottom: solid 2px #333;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    dd {
        height: 200px;
        background: #bdc3c7;
        font-size: 5em;
        text-align: center;
        line-height: 200px;
    }
</style>

<body>
    <dl>
        <dt>愛學習</dt>
        <dd>愛學習</dd>
        <dt>不愛學習</dt>
        <dd hidden="hidden">愛學習</dd>
    </dl>
</body>
<script>
  function panel(i) {
    let dds = document.querySelectorAll("dd");
    dds.forEach(item => item.setAttribute("hidden", "hidden"));
    dds[i].removeAttribute("hidden");
  }
  document.querySelectorAll("dt").forEach((dt, i) => {
    dt.addEventListener("click", () => panel.call(null, i));
  });
</script>

3.bind

bind()是將函式系結到某個物件，比如 a.bind(hd) 可以理解為將a函式系結到hd物件上即 hd.a()，

與 call/apply 不同bind不會立即執行

bind 是復制函式形為會回傳新函式

bind是復制函式行為

系結引數注意事項

在事件中使用bind

動態改變元素背景顏色，當然下面的例子也可以使用箭頭函式處理

<style>
  * {
    padding: 0;
    margin: 0;
  }

  body {
    width: 100vw;
    height: 100vh;
    font-size: 3em;
    padding: 30px;
    transition: 2s;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #34495e;
    color: #34495e;
  }
</style>
<body>
  Lamour
</body>
<script>
  function Color(elem) {
    this.elem = elem;
    this.colors = ["#74b9ff", "#ffeaa7", "#fab1a0", "#fd79a8"];
    this.run = function() {
      setInterval(
        function() {
          let pos = Math.floor(Math.random() * this.colors.length);
          this.elem.style.background = this.colors[pos];
        }.bind(this),
        1000
      );
    };
  }
  let obj = new Color(document.body);
  obj.run();
</script>