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)
}()
转载请注明原文地址: https://www.6miu.com/read-80182.html
