原生js基础教程 - 4-js基础教程 - 《原生 JavaScript 教程》

一、函数
二、选项卡

一、函数

函数：在计算机语言中，函数是拥有固定功能和逻辑的代码块。它只需要声明一次，然后就可以无限次执行。在面向对象（OOP，Object-Oriented-Programming）的语言也叫做方法。

1.1 理解函数意义

先来考虑这样一个需求:

需求：有一个数total，值是10,；
1、给total加上10，
2、再给total除以2，
3、再给total再乘以3，
4、再给total加上5
5、最后再把total的结果输出到控制台
6、以上功能重复3次

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);

上面的代码有一个坏处，这样的方式会导致页面中存在大量的重复的代码，也降低了开发效率。
这样的情况，我们发现这些代码都相同，干的事情也一样，我们能不能有个东西，把这些代码存起来，然后等需要的时候把这个东西拿出来跑一下子，就能这样的功能呢？这个东西就是函数。

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 把具体的逻辑写在花括号里面，花括号叫做函数体
函数执行（调用）
函数执行就是函数名后面紧跟着一个小括号，形如 fn()；
函数执行除了表示让函数执行，还代表着得到函数执行的结果，这个结果叫做函数的【返回值】。例如isNaN(‘abc’)，就是函数名和小括号的组合的意思是：isNaN 这个函数执行，同时获取了 isNaN 这个函数执行的结果，这个结果就是判断字符串 ‘abc’ 转换成数字后是不是 NaN 的结果，这个结果是 true，就是说 isNaN(‘abc’) 也表示这个结果 true，及 isNaN(‘abc’) 的返回值是 true。

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()，会把函数执行的结果返回给我们。我们写的函数也该有这样的功能。

我们这里有一个求和函数，我们希望求和完成后可以拿到求得的两数之和：

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 会等着表达式求值完成，然后再把值返回。

二、选项卡

<!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>

var wrapper = document.getElementById('wrapper');
var header = document.getElementById('header');
var tabList = header.getElementsByTagName('li');
var divList = wrapper.getElementsByTagName('div');
// 1. 自定义属性方式解决问题
for (var i = 0; i < tabList.length; i++) {
    // 在点击事件触发时，i 已经变成了它 tabList.length，但是再循环的过程中第几轮循环 i 就是几，所以我们应该把i存起来。存在哪里呢？因为没给 li 都是一个元素对象，而我们说对象可以添加属性存储信息，存在每个 li 元素身上；
    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';
  }
}