基礎教程 4. JS 的函數

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰javascript

1、函數

函數：在計算機語言中，函數是擁有固定功能和邏輯的代碼塊。它只須要聲明一次，就能夠無限次執行。在面向對象（OOP，Object-Oriented-Programming）的語言也叫作方法。css

1.1 理解函數意義

先來考慮這樣一個需求:html

需求：有一個數total，值是10,；一、給total加上10，二、再給total除以2，三、再給total再乘以3，四、再給total加上5 五、最後再把total的結果輸出到控制檯六、以上功能重複3次java

var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);

var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);

var total = 10;
total += 10;
total /= 2;
total *= 3;
total += 5;
console.log(total);
複製代碼

上面的代碼有一個壞處，這樣的方式會致使頁面中存在大量的重複的代碼，也下降了開發效率。這樣的狀況，咱們發現這些代碼都相同，乾的事情也同樣，咱們能不能有個東西，把這些代碼存起來，而後等須要的時候把這個東西拿出來跑一會兒，就能這樣的功能呢？這個東西就是函數。markdown

function fn() {
   var total = 10;
   total += 10;
   total /= 2;
   total *= 3;
   total += 5;
   console.log(total);
}

fn();
fn();
fn();
複製代碼

1.2 函數語法

標準函數語法：函數能發揮做用，是由兩部分組成：閉包

函數聲明，

1.1 使用function關鍵字聲明函數變量，fn也是變量，函數變量叫作函數名； function fn 1.2 書寫形參入口的小括號 function fn () 1.3 書寫函數體的花括號 function fn () {} 1.4 把具體的邏輯寫在花括號裏面，花括號叫作函數體 2. 函數執行（調用）函數執行就是函數名後面緊跟着一個小括號，形如 fn()；函數執行除了表示讓函數執行，還表明着獲得函數執行的結果，這個結果叫作函數的【返回值】。例如isNaN('abc')，就是函數名和小括號的組合的意思是：isNaN這個函數執行，同時獲取了isNaN這個函數執行的結果，這個結果就是判斷字符串 'abc' 轉換成數字後是否是NaN的結果，這個結果是true，就是說isNaN('abc') 也表示這個結果true，及isNaN('abc')的返回值是true。app

1.3 函數的參數機制

參數就是函數的入口，當咱們在函數中封裝一個功能，咱們但願咱們給他什麼，它幫咱們處理啥。配合函數的定義和執行兩部分；參數對應這兩個部分，也有兩部分構成:函數

函數聲明階段: 形參，形參是函數內部的變量，它也是用來表明和存儲值的；
函數執行階段：實參，實參是給形參賦值的具體值。就是說函數執行時，形參所表明的具體的值。

// 求和函數
function sum(a, b) {
   // a, b都是形參
   console.log(a, b);
   var total = 0;
   total = a + b;
   console.log(total);
}

sum(10, 20); // 10 和 20是實參，當函數執行時，函數的形參a本次拿到的值是10， b本次拿到20；實參的位置和形參是一一對應的。
sum(1); // 1是實參，a本次拿到的是1，另外一個沒傳，若是沒傳是b獲取到時默認值undefined
sum(); // 沒有實參，此時a，b都是undefined
sum(4, 5, 6); // 4, 4, 6都是實參，a 是4， b是5，沒有人接收6

複製代碼

1.4 函數的返回值機制

1.4.1 函數返回值機制

函數除了咱們給他啥，它幫咱們處理啥，還有一個重要的事情就是，把處理結果給咱們。例如isNaN()，會把函數執行的結果返回給咱們。咱們寫的函數也該有這樣的功能。post

咱們這裏有一個求和函數，咱們但願求和完成後能夠拿到求得的兩數之和：ui

function sum(a, b) {
   var total = 0;
   total = a + b;
   console.log(total)
}
var result = sum(1, 2);
console.log(result) // undefined
console.log(total); // Uncaught ReferenceError: ...
複製代碼

引起報錯的緣由：total是在函數體內部聲明的變量，這種聲明孩砸函數體內部的變量稱爲私有變量，而私有變量在函數外部是沒法訪問的，這是因爲閉包機制致使的。

閉包(closure)：函數會保護函數體內部的變量不被外界所幹擾的機制成爲閉包；

? 這個時候怎麼拿到total? 這個時候就須要函數的返回值機制了：函數的返回值機制：把函數的運行結果（或者函數中某些信息）指定爲函數的返回結果給到函數外部。在函數中使用 return 關鍵字指定函數返回值。

修改後的求和函數代碼：

function sum(a, b) {
   var total = 0;
   total = a + b;
   return total;
}

var result = sum(1, 2);
console.log(result); // 3
console.log(sum(1, 2));
複製代碼

1.4.2 函數返回值的細節問題：

return用於指定函數返回值，那麼return 啥函數返回值是啥
若是函數內部沒有return或者return後面啥也沒寫，那麼函數的返回值是undefined
return 關鍵字還有一個重要做用————強制結束return後面的代碼。（return後面的代碼不執行）
return 永遠返回一個值，若是是一個表達式，return 會等着表達式求值完成，而後再把值返回。

2、選項卡

自定義屬性方式解決問題

在點擊事件觸發時，i已經變成了它tabList.length，可是再循環的過程當中第幾輪循環i就是幾，因此咱們應該把i存起來。

存在哪裏呢？由於每一個li都是一個元素對象，而咱們說對象能夠添加屬性存儲信息，存在每一個li元素身上；

HTML 代碼

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>江外-選項卡</title>
   <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .wrapper { margin: 30px auto; width: 800px; } .header { width: 602px; border: 1px solid #000; } .header:after { display: block; content: ''; visibility: hidden; clear: both; } .header li { float: left; width: 200px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; cursor: pointer; } .header li.active { background: yellow; } .header li:nth-child(2) { border-left: 1px solid #000; border-right: 1px solid #000; } .wrapper div { display: none; height: 200px; width: 602px; border: 1px solid #000; line-height: 200px; text-align: center; font-size: 20px; } .wrapper div.active { display: block; } </style>
</head>
<body>
<div class="wrapper" id="wrapper">
   <ul id="header" class="header">
      <li class="active">實事</li>
      <li>音樂</li>
      <li>時尚</li>
   </ul>
   <div class="active">實事</div>
   <div>音樂</div>
   <div>時尚</div>
</div>
<script src="js/7-4-tab之函數封裝.js"></script>
</body>
</html>
複製代碼

js 代碼

var wrapper = document.getElementById('wrapper');
var header = document.getElementById('header');
var tabList = header.getElementsByTagName('li');
var divList = wrapper.getElementsByTagName('div');

for (var i = 0; i < tabList.length; i++) {
   tabList[i].myIndex = i;
   // i = 0時 tabList[i] 表明第一個li元素，因此給它記錄一下本身的索引 0
   // i = 1時 tabList[i] 表明第二個li元素，它記錄本身的索引 1
   // i = 2時 tabList[i] 表明第三個li元素，它記錄本身的索引 2
  tabList[i].onclick = function () {
    for (var j = 0; j < tabList.length; j++) {
      tabList[j].className = '';
      divList[j].className = '';
    }
    // 上面咱們記錄了每一個li的索引，在這裏須要取出來？這裏有一個關鍵點，就是咱們點擊的哪個，而後就取哪個的myIndex屬性
     // 在事件函數中，this表明本次觸發事件的元素對象
     var myIndex = this.myIndex;
    tabList[myIndex].className = 'active';
    divList[myIndex].className = 'active';
  }
}
複製代碼