js如何创建函数

JavaScript015

js如何创建函数,第1张

JS中创建函数的几种方法

声明函数:最普通最标准的声明函数方法,包括函数名及函数体。

function fn1(){}

创建匿名函数表达式:创建一个变量,这个变量的内容为一个函数

var fn1 = funciton (){}

创建具名函数表达式:具名函数表达式的函数名只能在创建函数内部使用,即采用此种方法创建的函数在函数外层只能使用fn1不能使用func_name的函数名。func_name的命名只能在创建的函数的内部使用

var fn1 = funciton func_name(){}

自执行函数:自执行函数属于上述的“函数表达式”,规则相同

(function(){alert(1)})()

(function fn1(){alert(1)})()

Function构造函数

可以给 Function 构造函数传一个函数字符串,返回包含这个字符串命令的函数,此种方法创建的是匿名函数。

其他创建函数的方法

当然还有其他创建函数或执行函数的方法,这里不再多说,比如采用 eval , setTimeout , setInterval 等非常用方法,这里不做过多介绍,属于非标准方法,这里不做过多展开

上述两种方式除了定义的语法不同之外,最主要的区别是函数声明具有【函数声明提升】的特点,将函数声明提升到作用域顶端,意思是在执行代码之前会先读取函数声明,也就是说可以把函数声明放在函数调用的后面。

例子1:

test()//弹出hello,因为【函数声明提升】的特点,函数调用之前,已经读取了该函数完成了声明

            function test(){

                alert("hello")

            }

例子2:

 test()//报错:Uncaught ReferenceError: test is not defined

            //因为【函数表达式】不具备提升的特点,在函数调用时,作用域中还未读取该函数的定义

            //作用域读取函数表达式是按照代码顺序读取

            var test = function(){

                alert("hello")

            }

            test()//弹出hello

例子3:

            if(condition){

                function test(){

                    alert("hello")

                }

            }else{

                function test(){

                    alert("world")

                }

            }

            //弹出world,因为函数声明在代码执行前就已经完成了,作用域已经完成了对该函数的读取,与条件无关

            //同名函数声明,后面的会覆盖前面的

            test()

            if(condition){

                var test2 = function(){

                    alert("hello")

                }

            }else{

                var test2 = function(){

                    alert("world")

                }

            }

            //弹出内容与条件相关,作用域读取函数表达式是按照代码执行顺序读取的

            test2()

例子4:

 //函数表达式

            var  test = function(){

                alert("hello")

            }

            //第一次调用

            test()

            //变量声明

            var s = "world"

            //函数声明

            function test(){

                alert(s)

            }

            //第二次调用

            test()

        //解释:两次调用都将弹出hello,在代码执行前方式二已经被作用域读取,然后执行方式一代码,方式一的test覆盖方式二的test,然后执行两次调用弹出hello

“函数的调用只能在自执行函数内”这句话是错的,应该说如果函数内的语句涉及页面DOM元素的操作,则函数的调用最好是放到自执行函数内,否则就可以放在外面执行。这是因为如果不放在自执行函数内而是放在外面立即执行,那么执行的时候页面的整个DOM结构很可能尚未完全加载到内存,这时候如果要对页面的某个DOM元素进行操作就很可能会失败(JS可能会认为这个元素不存在而返回null),所以为了保险起见就把函数的调用放到自执行函数内,因为自执行函数肯定是在页面全部调入内存后才执行的。而如果你的代码没有涉及任何页面元素的操作,自然就不需放到自执行函数内啦,比如下面这个:

function fun1(){

    return 1+2   //这个fun1函数只是进行最简单的数学运算,没有操作页面元素

}

console.log(fun1())   //所以fun1可以直接调用