• JS函数定义与匿名函数的调用


    一、函数声明、函数表达式、匿名函数

    函数声明:function fnName () {…};使用function关键字 声明一个函数,再指定一个函数名,叫函数声明。

    函数表达式 var fnName = function () {…}; 使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式,这是最常见的函数表达式语法形式。

    匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,匿名函数属于函数表达式,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。

    函数声明和函数表达式不同之处在于?

    一、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,

    而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式,

    二、函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。

     

    定义函数的三种方法:

    1.函数声明 关键字法  

    function fnMethodName(x) {
        alert(x);
    }

    2.函数表达式,字面量法

    var fnMethodName = function (x) {
        alert(x);
    }

    3.Function()构造函数

    var fnMethodName = new Function('x', 'alert(x);')
     上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常用的方法,后两种都是把一个函数复制给变量fnMethodName,而这个函数是没有名字的,即匿名函数。

    4.定义匿名函数

    <body onload="alert('http://www.baidu.com/');">  
    <script type="text/javascript">  
    void function()  
    {              //如果不加void则会报错?
        alert('弹出框');  
    }();  
    </script>  
    </body> 
    
    二写法
    <body onload="alert('http://www.baidu.com/');">  
    <script type="text/javascript">  
    (function()  
    {  
        alert('弹出框');  
    })();  
    </script>  
    </body> 

    没有函数名的函数,这就引申了如何去调用一个匿名函数的问题了。

    小括号调用

    为什么这种方法能成功调用呢?
    小括号的作用:

      小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。

      所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。

      因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

    在理解了一些函数基本概念后,回头看看

    ( function(){…} )()和( function (){…} () )这两种立即执行函数的写法

      ,最初我以为是一个括号包裹匿名函数,并后面加个括号立即调用函数,当时不知道为什么要加括号,后来明白,

      要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    (function(a){

        console.log(a);   //firebug输出123,使用()运算符

    })(123);

     

    (function(a){

        console.log(a);   //firebug输出1234,使用()运算符

    }(1234));

     

    !function(a){

        console.log(a);   //firebug输出12345,使用!运算符

    }(12345);

     

    +function(a){

        console.log(a);   //firebug输出123456,使用+运算符

    }(123456);

     

    -function(a){

        console.log(a);   //firebug输出1234567,使用-运算符

    }(1234567);

     

    var fn=function(a){

        console.log(a);   //firebug输出12345678,使用=运算符

    }(12345678)

     

     

    可以看到输出结果,在function前面加!、+、 - 甚至是逗号等到都可以起到函数定义后立即执行的效果,而()、!、+、-、=等运算符,都将函数声明转换成函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。

    加括号是最安全的做法,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。

    不过这样的写法有什么用呢?

    javascript中没用私有作用域的概念,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以模仿一个私有作用域,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,俗称“匿名包裹器”或“命名空间”。

  • 相关阅读:
    python爬虫学习(7) —— 爬取你的AC代码
    python爬虫学习(6) —— 神器 Requests
    python爬虫学习(5) —— 扒一下codeforces题面
    python爬虫学习(4) —— 手刃「URP教务系统」
    听说你叫爬虫(3) —— 模拟登陆
    python爬虫学习(2) —— 爬一下ZOL壁纸
    python爬虫学习(1) —— 从urllib说起
    数据结构/ 串的模式匹配法 / kmp算法与next数组的构造
    ADWORLD web/PHP2
    ADWORLD web/upload1
  • 原文地址:https://www.cnblogs.com/jiechn/p/4070890.html
Copyright © 2020-2023  润新知