函数
函数的参数
定义
- 形参：是形式上的参数，用来接收实参的
- 实参：实际上参与的函数
它们两会出现的三种情况
- 实参数目与形参相同
正常输出 - 实参数目大于形参
只取前面几个实参，多余的实参不参与 - 实参数目小于形参
没有接收到实参的形参输出undefined
带有返回值的函数
return语句
函数中return后面的值就是返回值
function getSum (num1,num2){
return num1+num2
}
getSum(1,2); // 这时是打印不出结果的
console.log(getSum(1,2)); // 这时才会打印出3，这个3就是函数的返回值
// 我们还可以这样做
var sum = getSum(1,2);
console.log(sum); // 3
如果函数中没有return返回值，那么函数在打印时会出现一个undefined
function getSum (num1,num2){
console.log(num1+num2);
}
getSum(1,2);// 控制台输出3
console.log(getSum(1,2));// 控制台输出3，和undefined，undefined就是return的返回值
**所以我们总结出，函数中有return就会返回return后面的值，如果没有那么就会返回undefined
注意
return能够终止函数，return后面的代码不会被执行
工作中，经常需要对方法或函数执行的结果进行处理时，就需要使用return语句将结果返回(抛出)
闭包函数
什么是闭包函数
- 能读取其他函数内部变量的函数，在js中只有函数内部的子函数才能读取局部变量，所以闭包函数可以理解为‘定义在一个函数内部的函数’
- 本质上闭包函数是将函数内部与外部连接起来的桥梁
- 这也是基于链式作用域实现的，子对象可以一级一级地向上寻找父对象的变量，也就是说父对象的变量子对象是可以用的，但是子对象的变量父对象是不可以用的
function func1(){
var a = 1000;
function func2(){
return a;
}
return func2
}
console.log(func1()); // 1000
案例中func2就是一个闭包函数，它将func1的局部变量a展示在函数的外部，它还可以使用自执行函数进行简化
function func1(){
var a = 1000;
return (function func2(){
return a;
})()
}
console.log(func1()); // 1000
闭包函数的应用
- 可以读取函数内部的数据
function func1(){
var b = 1000;
return (function func2(){
return b;
})()
}
console.log(func1()); // 1000
- 让一个变量始终保存在内存中
function func1 (){
var a = 10;
func2 = function(){
a+=1;
}
return (function(){
return a
}
}
var b = func1();
console.log(b());// 10
func2();
console.log(b());// 11
自执行函数
他也属于匿名函数，他不需要特地地调用或者什么事件来触发，只要用一个括号将这个匿名函数包起来，在后面添加一个括号，便可以自己执行了。理论上在function前面加上一个其他的符号也是可以的，但是通常来说我们使用括号将他包起来
(function(){ // 用括号将这个函数包起来，浏览器识别时才不会报错
console.log('这是自执行函数')
})() // 这里的括号相当于执行的意思
函数的封装
定义
是一种函数功能，编写一个或多个功能，通过函数的方式封装起来，需要使用这个功能时就可以调用它
封装起来的函数就相当于一个工具，哪里需要就往哪里搬
下面是一个简易计算器的案例
html代码
<input type="number" id="num1"><br>
<input type="number" id="num2"><br>
<button>+</button>
<button>-</button>
<button>*</button>
<button>/</button>
<h3>结果：<span id="res"></span></h3>
js代码
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var btn = document.getElementsByTagName('button');
var res = document.getElementById('res');
function count (type){ // 封装函数
var a = num1.value;
var b = num2.value;
res.innerText = eval(a + type + b)
}
btn[0].onclick = function(){
count('+') // 使用封装函数
}
btn[1].onclick = function(){
count('-') // 使用封装函数
}
btn[2].onclick = function(){
count('*') // 使用封装函数
}
btn[3].onclick = function(){
count('/') // 使用封装函数
}
作用域
作用域是可访问的变量（包括对象和函数）的集合
全局作用域：全局变量
- 在函数外定义的变量为全局变量
它具有全局作用域，网页中的所有的脚本和函数都可以使用 - 当变量没有声明，直接赋值也是全局变量，即使在函数中未声明就直接赋值的变量也是全局变量，在函数外部也可以使用
未声明就直接赋值会自动作为window的属性，window是Js中的顶级变量（对象）
局部作用域：局部变量
- 变量在函数中声明，变量为局部作用域
- 局部变量只能在函数内部访问
变量的生命周期
- 变量在它被声明的时候初始化
- 局部变量在函数执行完以后销毁
- 全局变量在页面关闭后被销毁
补充知识点
- eval() ：对字符串中的数字进行计算
console.log(eval('10'+'+'+'20')) // 30
- border-collapse : 边框塌陷/折叠（表格的边框属性，消除每个单元格之间的间距）
<style>
table{
border-collapse:collapse;
</style>
总结
我一开始对函数的理解是：函数就是一些操作的集合，里面可以放许多的东西，我们可以通过它完成一些任务。但是通过今天的学习，我知道了还有闭包函数、自执行函数，这不禁让我产生疑惑：函数到底是个什么鬼？为什么会有这么多种类？本来对函数单纯的理解感觉不太适合了，但是目前这些理论性的东西没有大量的实践是不会真正显示它们的含义的，相信在练习过后，我会对它有更为透彻的一个认识。
最后照例，上传今天的作业
今天的作业是一个计算器，虽然做出来了，但是还存在一定的疑惑：当上面的显示框什么数字都没有的时候，点击“=”就会出现‘undefined’，这可如何是好哇
- html代码
<table>
<tr>
<td colspan="5" ><input type="text" id="screen"></td>
</tr>
<tr>
<td><button onclick="record('7')">7</button></td>
<td><button onclick="record('8')">8</button></td>
<td><button onclick="record('9')">9</button></td>
<td><button onclick="record('/')">/</button></td>
<td><button id="reSet">AC</button></td>
</tr>
<tr>
<td><button onclick="record('4')">4</button></td>
<td><button onclick="record('5')">5</button></td>
<td><button onclick="record('6')">6</button></td>
<td><button onclick="record('*')">*</button></td>
<td><button id="delete">←</button></td>
</tr>
<tr>
<td><button onclick="record('1')">1</button></td>
<td><button onclick="record('2')">2</button></td>
<td><button onclick="record('3')">3</button></td>
<td><button onclick="record('+')">+</button></td>
<td rowspan="2"><button id="equal">=</button></td>
</tr>
<tr>
<td><button onclick="record('.')">.</button></td>
<td><button onclick="record('0')">0</button></td>
<td><button onclick="record('00')">00</button></td>
<td><button onclick="record('-')">-</button></td>
</tr>
</table>
- css代码
table{
border: 1px solid;
margin: 100px auto;
background-color: beige;
}
#screen{
width: 500px;
height: 80px;
border: 1px solid;
outline: none;
font-size: 28px;
background-color: azure;
}
td{
text-align: center;
}
button{
width: 100%;
height: 50px;
}
#equal{
height: 105px;
}
- js代码
// 要求：
// 点击按钮，能将数字以及加减乘除输入到上面的框子
// 点击等于号可以对框子里的算式进行计算
// 首先要获得事件源
var screen = document.getElementById('screen');
var del = document.getElementById('delete');
var equal = document.getElementById('equal');
var reSet = document.getElementById('reSet');
// // 封装一个函数，点击按钮时，能将内容打印到屏幕上
function record (sign){
screen.value += sign;
}
// 创建一个点击事件给等于号,用于运算输入的算式，结果呈现在屏幕
equal.onclick=function(){
screen.value = eval(screen.value);
}
// 创建点击事件给AC，点击它时屏幕清空
reSet.onclick = function(){
screen.value = ''; // 它能让屏幕上清零
}
// 创建点击事件给删除键，让它能够删除数字，可以使用substring，删除字符串
del.onclick = function(){
screen.value = screen.value.substring(0,screen.value.length-1);
}
