1. 函數的參數
1）. 形參 – 函數在定義階段，裏面的參數屬於形參
2）. 實參 – 函數的調用階段，參數爲實參
function fn(n){
alert(n)
}
fn(10);
3）. 當把函數表達式做爲值傳給另一個函數的參數的時候，就叫做回調函數
function fn(n){
n();
}
function aa(){
alert(456)
}
fn(aa);
4）. 函數自帶參數機制： arguments (arguments是一個類數組)
function add(){
var total=0;
for(var i=0; i<arguments.length; i++){
if(!isNaN(arguments[i])){
total+=Number(arguments[i]);
}
}
return total;
}
console.log(add(1,2,'3','3px','aaa',7));
2. 函數封裝的意義
對於相同的功能；只需要封裝1次，以後需要的時候，直接調用即可；
3. 函數的分類
![這裏寫圖片描述]()
4. 閉包
函數被調用的時候形成一個私有作用域，保護裏面的變量不受外界的干擾，函數的這種保護機制，叫做閉包；
例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按鈕1"/>
<input type="button" value="按鈕2"/>
<input type="button" value="按鈕3"/>
<input type="button" value="按鈕4"/>
<script>
var aBtn=document.getElementsByTagName('input');
for(var i=0; i<aBtn.length; i++){
(function(index){
aBtn[index].onclick=function(){
alert(index);
}
})(i);
}
</script>
</body>
</html>
例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
li{
width: 450px;
height: 200px;
font-size: 50px;
margin:10px;
}
li input{
width: 150px;
float: left;
height: 40px;
}
li input.on{
background: lightblue;
}
li div{
width: 100%;
height: 100%;
display: none;
background: lightblue;
}
li div.show{
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<input type="button" value="按鈕1" class="on"/>
<input type="button" value="按鈕2"/>
<input type="button" value="按鈕3"/>
<div class="show">內容1</div>
<div>內容2</div>
<div>內容3</div>
</li>
<li style="width: 300px">
<input type="button" value="按鈕1" class="on"/>
<input type="button" value="按鈕2"/>
<div class="show">內容1</div>
<div>內容2</div>
</li>
<li>
<input type="button" value="按鈕1" class="on"/>
<input type="button" value="按鈕2"/>
<input type="button" value="按鈕3"/>
<div class="show">內容1</div>
<div>內容2</div>
<div>內容3</div>
</li>
<li style="width: 600px">
<input type="button" value="按鈕1" class="on"/>
<input type="button" value="按鈕2"/>
<input type="button" value="按鈕3"/>
<input type="button" value="按鈕4"/>
<div class="show">內容1</div>
<div>內容2</div>
<div>內容3</div>
<div>內容4</div>
</li>
</ul>
<script>
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
tab(aLi[i]);
}
function tab(oBox){
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName('div');
for(var i=0; i<aBtn.length; i++){
(function (index){
aBtn[index].onclick=function(){
for(var i=0; i<aBtn.length; i++){
aBtn[i].className='';
aDiv[i].className='';
}
this.className='on';
aDiv[index].className='show';
}
})(i)
}
}
</script>
</body>
</html>
5. 自執行函數
特點：自己調用自己
(function (){
alert(123)
})();
~function(){
alert(456)
}()
+function(){
alert(789)
}()
-function(){
alert(147)
}()
!function(){
alert(258)
}()
