Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于Javascript的函数声明和函数表达式 #73

Open
Wscats opened this issue Mar 28, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@Wscats
Copy link
Owner

commented Mar 28, 2017

Javascript定义函数有两种类型

函数声明

    // 函数声明
    function wscat(type){
        return type==="wscat";
    }

函数表达式

    // 函数表达式
    var oaoafly = function(type){
        return type==="oaoafly";
    }

先看下面这个经典问题,在一个程序里面同时用函数声明和函数表达式定义一个名为getName的函数

		getName()//oaoafly
		var getName = function() {
			console.log('wscat')
		}
		getName()//wscat
		function getName() {
			console.log('oaoafly')
		}
		getName()//wscat

上面的代码看起来很类似,感觉也没什么太大差别。但实际上,Javascript函数上的一个“陷阱”就体现在Javascript两种类型的函数定义上。

  • JavaScript 解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。
  • 而用函数表达式创建的函数是在运行时进行赋值,且要等到表达式赋值完成后才能调用
                var getName//变量被提升,此时为undefined
                
                getName()//oaoafly 函数被提升 这里受函数声明的影响,虽然函数声明在最后可以被提升到最前面了
		var getName = function() {
			console.log('wscat')
		}//函数表达式此时才开始覆盖函数声明的定义
		getName()//wscat
		function getName() {
			console.log('oaoafly')
		}
		getName()//wscat 这里就执行了函数表达式的值

所以可以分解为这两个简单的问题来看清楚区别的本质

                var getName;
		console.log(getName)//undefined
		getName()//Uncaught TypeError: getName is not a function
		var getName = function() {
			console.log('wscat')
		}
                var getName;
		console.log(getName)//function getName() {console.log('oaoafly')}
		getName()//oaoafly
		function getName() {
			console.log('oaoafly')
		}

这个区别看似微不足道,但在某些情况下确实是一个难以察觉并且“致命“的陷阱。出现这个陷阱的本质原因体现在这两种类型在函数提升和运行时机(解析时/运行时)上的差异。
当然我们最后要给一个总结:Javascript中函数声明函数表达式是存在区别的,函数声明在JS解析时进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。而函数表达式的值是在JS运行时确定,并且在表达式赋值完成后,该函数才能调用。这个微小的区别,可能会导致JS代码出现意想不到的bug,让你陷入莫名的陷阱中。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.