js里声明函数有几种方式? var abc = function(x){} 和 function abc(x){} 这两种声明方法有什么不同?

JavaScript011

js里声明函数有几种方式? var abc = function(x){} 和 function abc(x){} 这两种声明方法有什么不同?,第1张

首先后者是指函数声明,前者是指函数表达式,他们之间的区别是后者会在代码执行之前被JS解释器加载到作用域中,这样一来就可以在编程时在定义函数之前调用这个函数,此法是有效的;而前者则是在代码执行到那一行时候才会有定义,此外函数表达式是创建了一个匿名函数,然后将匿名函数赋值给一个变量。

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

例子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

定义函数的种方法1.最基本的作为一个本本分分的函数声明使用。复制代码代码如下:function func(){}或var func=function(){}2.作为一个类构造器使用:复制代码代码如下:function class(){}class.prototype={}var item=new class()3.作为闭包使用:复制代码代码如下:(function(){//独立作用域})()4.可以作为选择器使用:复制代码代码如下:var addEvent=new function(){if(!-[1,]) return function(elem,type,func){attachEvent(elem,'on'+type,func)}else return function(elem,type,func){addEventListener(elem,type,func,false)}}//避免了重复判断5.