基础教程 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';
  }
}
复制代码