从零开始前端学习[56]:js下的函数

js下的函数

命名函数和匿名函数
函数的执行方式有几种
函数的实参和形参
js下的可变参数列表的获取，arguments
js下的return语句

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

命名函数和匿名函数

跟名字一样，命名函数就是有名字的函数，可以加括号然后直接执行。
匿名函数就是没有名字的函数。并且匿名函数是不能单独存在的。
命名函数:
比如

function onclickEvent(){
    console.log("onclick Event");
}
通过加括号表示自执行
onclickEvent();
或者通过别的时间来进行调用
document.onclick = onclickEvent;
注意：这个是函数的调用是不能够添加括号的，添加括号的时候表示的就是自动执行

匿名函数:
在以前的学习中，其实有内部类等一些匿名的类，但是还确实没有听过匿名函数，一个函数没有名字怎么可以调用，然而js却有这样的一个特性。
匿名函数有这样的特性，即不能够单独存在并且不能够添加括号进行执行
如:
正确的写法:

    document.onclick = function(){
        console.log("onclick");
    }
在命名函数的时候可以通过添加括号执行，但是在如果是匿名函数的话，如:
    function(){
        console.log("onclick");
    }();

这个是无法进行执行的
匿名函数的好处就是可以尽可能的节省变量，并且自执行里面的变量在外面是获取不到的，不会去污染全局变量等。

函数的执行方式

讲到函数的执行，可能在以前的语言类学习中，无非就是函数调用以及函数执行，在这里也是，但是增加了一些调用的方式，如匿名函数既然不能单独存在，要想单独调用该怎么办？？
函数的自执行
函数的自执行，也就是函数自己自动的去调用，对于命名函数来说，其自执行就是

function exportEvent(){
    alert("ecportEvent");
};
exportEvent(); //这个就是在加载的时候，然后去调用这个函数

函数的被动调用
对于命名函数来说，像上述提供的函数

    document.onclick = exportEvent;

但是如果是匿名函数的话，怎么让其自执行呢？？js为匿名函数的自执行提供了一个+，-，！，~；这四个符号去调用；

调用方法一:

    (function () {
        console.log("event1");
    })();

调用方法二:

    var a = function(){console.log("event2")}

调用方法三:

    +function () {
        console.log("小阳三号");
    }();
    //这个时候匿名函数加了括号之后，必须要在前面添加+号，然后才能执行

调用方法四:

    -function () {
        console.log("小阳三号");
    }();
    //这个时候匿名函数加了括号之后，必须要在前面添加-号，然后才能执行

调用方法五:

    !function () {
        console.log("小阳三号");
    }();
    //这个时候匿名函数加了括号之后，必须要在前面添加!号，然后才能执行

调用方法六:

    ~function () {
        console.log("小阳三号");
    }();
    //这个时候匿名函数加了括号之后，必须要在前面添加~号，然后才能执行

函数的实参和形参

其实我都不想写这个，形参就是形式参数，实参就是实际参数，形式参数是在函数定义的时候定义的，而实参是在调用函数的时候传入的参数，其实形参和实参是针对函数的不同阶段来解读的。但是我想说js的松散程度其实有点超过了我想象。
在js中其类型相对定义比较松散，就一个var就可以，但是不代表没有数据类型，number,object,boolean,null,undefined,以及函数类型。同样在函数里面，其也是非常松散。
一般情况下，对于函数的有参数的定义:

function add(var a,var b){   //这种写法会报错，
    console.log(a+b);
}
在定义的时候的参数，表示的是形参
主要js奇葩的地方就是，竟然在定义函数的时候可以不去定义数据类型，如:
function add(a ,b){  //默认的函数在定义的时候，是去省略了var
    console.log(a + b);
}

还有个更松散的地方就是，形式参数列表可以与实际参数列表不一样；

如对上述的函数：
add(1,2);//正常情况下，形式参数为2个的时候，实参应该也可以是两个
但是还可以这样去调用:
add(1,3,6);//实际参数比形式参数要多，只是多出来的实参是没有用途的

但是如果实参比形参少的话，这个时候就会出现NaN,

add(1);//这个时候返回的就是NaN
因为如果形参对应的位置没有实参传入的话，这个时候就是默认这个类型为NaN
也就导致了 1 + NaN = NaN;

js下的可变参数列表的获取，arguments

学过java的人都知道，如果是可变参数列表的话，使用的是…的形式，在C里面的话，也有固定的函数可以使用。但是在JS里面不一样的，也是提供了一个固定的函数，但是这个时候函数的形式参数是不用填的:
如：

    function sum1() {
        var n = 0;
            for( var i=0; i<arguments.length; i++ ){
                 n += arguments[i];
            }
            console.log(n);
        }
      sum1(1,2,3,4,5,6,7,8,9);

js下的return语句

return语句就是返回值，之前看到过类似:

var a = function(){
    console.log("export");
}();
这个时候匿名函数是没有返回值的，或者可以说返回的是undefined类型
但是对于语言的语法来说，基本上都是支持返回值的。即是可以通过return来返回值的
如:
    var a = funtion(){
        var number = 10;
        console.log(number);
        return number;
    }();
通过匿名函数执行，然后返回过后，再去赋值给a，此时就将number返回出来，再赋值给a

以上就是一些相对简单的语法，都是比较简单的，调用来说也比较简单。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">       
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css"> 
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
 *{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 200px;height: 200px;background: red}
</style>
</head>
<body>
<div class="main">
<p></p>
</div>
<script>
var oP = document.getElementsByTagName("p");
var number = 0;
function onclickEvent() {
 number++;
 console.log("onclick Event");
 }
 onclickEvent(); //函数的自执行
 oP.onclick = onclickEvent;

 oP.ondblclick = function () {
 console.log("ondbclick Event");
 }

var a = function () {
 console.log("匿名函数自执行方式\()");
 }();

 +function () {
 console.log("匿名函数自执行方式\+");
 }();
 -function () {
 console.log("匿名函数自执行方式\-");
 }();
 ~function () {
 console.log("匿名函数自执行方式\~");
 }();
 !function () {
 console.log("匿名函数执行方式\!")
 }();

//函数的形式参数和实际参数
function del( num1 , num2) {
 console.log(num1 - num2);
 }
 del(100,21);
 del(100,30,20,90); //后面的参数是无效的
 del(10);

//对于可变参数列表，参数列表是数组
function sum1() {
var n = 0;
for( var i=0; i<arguments.length; i++ ){
 n += arguments[i];
 }
 console.log(n);
 }
 sum1(1,2,3,4,5,6,7,8,9);

//对于return来说
var fn = function () {
return function () {
 console.log("123")
 }
 }
var number = function () {
var number = 10;
return number;
 }();
 console.log(fn); 
 console.log(number);
</script>
</body>
</html>

超级简单的demo；

秒客网