JavaScript函数

JavaScript函数

一:函数

封装可以重复使用的代码

使用场合:1主动调用.2事件触发.

和java一样JavaScript有编译的过程,因此不必像python那样必须先定义才能执行,只不过编译对变量有点特殊.

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行         可以先执行,后定义
    fnAlert();
</script>

详解

1:编译阶段,就算你把函数定义写在后面,编译阶段会把函数定义提前.

特殊的就是变量的声明,也会被提前,不会被赋值,用undefined赋值.

2:执行阶段,函数就没什么了,在执行阶段,只有遇到变量赋值语句才会把值替换undefined,否则你在变量赋值前调用都是undefined

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
    alert(iNum) //弹出123
</script>

二:匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

匿名函数往往是前面用一个变量指向,变成一个函数引用.使用时直接引用().

函数的形参:函数可以不用任何形参来接收实参,因为默认有个arguments接收所有的实参,放到一个伪数组里面,之所以叫伪数组是因为,它有索引和长度,但是不能调用数组的方法.

三:封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

(function myalert(){
    alert('hello!');
})();

这个更极端,定义完就执行,没有函数引用,说明只能调用一次

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：

var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

 

四:事件

js中用事件函数来处理不用的时间.

三步走:

1.找到事件源,找到标签对象

2.设置事件类型,例如点击事件,鼠标移动事件等

3.编写事件驱动.事件驱动就是里面的回调函数,也可以直接用写好的函数.

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

五:定时器

定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法  

/*
    定时器：都是回调函数
    setTimeout(2000,fn)  开启只执行一次的定时器,2秒之后回调fn函数. 调完就结束.
    clearTimeout 关闭只执行一次的定时器,相当于垃圾回收机制
    setInterval(time,fn)  反复执行的定时器,每隔几面就回调一次fn.只要不停一直开着
    clearInterval 关闭反复执行的定时器,相当于垃圾回收机制

*/ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert('ok!'); }

 

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

虽然有这样的使用方法,但是别用,而是用jQuery的方式来替代.存在有意义,但是不一定合理,jQuery的链式调用更加简洁.