全面了解函数声明与函数表达式、变量提升

函数的声明方式

在定义一个函数的时候通常有两种声明方式：

foo(){};   // 函数声明
var foo = function(){};  // 函数表达式

不同之处

1、函数表达式后面加括号可以直接执行
2、函数声明会提前预解析

预解析

让我们先看一个例子：

foo();     // 函数声明
foo_later();   // foo_later is not a function

function foo(){ console.log('函数声明'); }
var foo_later = function(){ console.log('函数表达式'); }

可以看到，函数声明foo被预解析了，它可以在其自身代码之前执行；而函数表达式foo_later则不能。要解决这个问题，我们先要弄清楚JavaScript解析器的工作机制。

变量提升(hoist)

JavaScript解析器会在自身作用域内将变量和函数声明提前(hoist)，也就是说，上面的例子其实被解析器理解解析成了以下形式：

function foo(){ console.log('函数声明'); }  // 函数声明全部被提前
var foo_later;   // 函数表达式（变量声明）仅将变量提前，赋值操作没有被提前

foo();
foo_later();   

foo_later = function(){ console.log('函数表达式'); }

这样也就可以解释，为什么在函数表达式之前调用函数，会返回错误了，因为它还没有被赋值，只是一个未定义变量，当然无法被执行。

同样的，我们也可以试着猜测下面这段代码的输出结果：

console.log(declaredLater);  

var declaredLater = "Now it's defined!";

console.log(declaredLater);

该段代码可以被解析成一下形式：

var declaredLater;     

console.log(declaredLater);  // undefined

declaredLater = "Now it's defined!";

console.log(declaredLater);  // Now it's defined!

变量声明被提到最前（所以不会报出变量不存在的错误），但赋值没有被提前，所以第一次的输出结果是undefined。

需要注意的是

由于函数声明会被预解析，所以不要使用此种方法来声明不同函数。尝试猜想下面例子的输出结果：

if(true){
 function aaa(){
  alert('1');
 }
}
else{
 function aaa(){
  alert('2');
 }
}

aaa();

与我们预想的不同，该段代码弹出的是“2”.这是因为两个函数声明在if语句被执行之前就被预解析了，所以if语句根本没有用，调用aaa()的时候直接执行了下面的函数。

总结

通过上面的讲解可以总结如下：

•变量的声明被提前到作用域顶部，赋值保留在原地

•函数声明整个“被提前”

•函数作为值赋给变量时只有变量“被提前”了，函数没有“被提前”

通过练习上面的实例自己多感受一下。另外，作为最佳实践：变量声明一定要放在作用域/函数的最上方（JavaScript 只有函数作用域！）。

以上这篇全面了解函数声明与函数表达式、变量提升就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

    函数表达式和函数声明 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明: function 函数名称 (参数:可选){ 函数体 } 函数表达式: function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

  • js中函数声明与函数表达式

    目前为止,我们一直没有对函数声明和函数表达式加以区别.而实际上,解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问):至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行.如下例子: 复制代码 代码如下: alert(sum(10,10)); function sum(num1,num2) {     return num1+num2; } 以上代码完全可以正确执行,因为在代码开始执行之前,解析

  • JavaScript中的函数声明和函数表达式区别浅析

    记得在面试腾讯实习生的时候,面试官问了我这样一道问题. 复制代码 代码如下: //下述两种声明方式有什么不同   function foo(){};   var bar = function foo(){}; 当初只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好.最近正好看到这方面的书籍,就想好好总结一番. 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终

  • 详解JavaScript中的函数声明和函数表达式

    JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下: // 方法一:函数声明 function foo() {} // 方法二:函数表达式 var foo = function () {}; 另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行: (function () { // var x = ... })(); 此种自执行函数表达式归类于以上两种方法

  • 浅析函数声明和函数表达式——函数声明的声明提前

    前两天班级聚会,除了吃喝玩乐就是睡觉扯淡,甚是喜悦,真是独乐乐不如众乐乐啊. PS:毕业的或即将毕业的有时间能聚就聚吧,毕了业以后属于自己的时间能聚到一块儿可就少太多了. 现在有点时间来看点东西总结些东西了,又因为前段时间片片断断地看了看JavaScript的函数部分,所以抽时间总结下函数的相关部分,当然,里面有些部分都是自己的理解,如果有理解的不对的地方还请小伙伴们不吝指出. 这一节我结合自己的理解和小伙伴们聊一下函数声明的声明提前. 注:有的地方也叫函数声明提升.翻译的不一样,意思一样,大家

  • 浅谈javascript 函数表达式和函数声明的区别

    浅谈javascript 函数表达式和函数声明的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • 浅析javascript中函数声明和函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而     函数表达式可以在任何地方声明. 下面分别用两种方法定

  • 全面了解函数声明与函数表达式、变量提升

    函数的声明方式 在定义一个函数的时候通常有两种声明方式: foo(){}; // 函数声明 var foo = function(){}; // 函数表达式 不同之处 1.函数表达式后面加括号可以直接执行 2.函数声明会提前预解析 预解析 让我们先看一个例子: foo(); // 函数声明 foo_later(); // foo_later is not a function function foo(){ console.log('函数声明'); } var foo_later = funct

  • javascript函数声明和函数表达式区别分析

    javascript函数声明和函数表达式区别分析

    平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明. 函数声明 函数声明示例代码 复制代码 代码如下: function fn () {     console.log('fn 函数执行..');     // code.. } 这样我们就声明了一个

  • Javascript学习笔记之 函数篇（一） : 函数声明和函数表达式

    函数声明 function foo() {} 函数 foo 将会在整个程序执行前被 hoist (提升),因此它在定义 foo 函数的整个 scope (作用域)中都是可用的.即使在函数定义之前调用它也没问题. foo(); // Works because foo was created before this code runs function foo() {} 因为我打算专门写篇介绍作用域的文章,所以这里就不详述了. 函数表达式 对于函数声明,函数的名称是必须的,而对于函数表达式而言则是

  • Javascript中的函数声明与函数表达式(奇技淫巧)

    举一个例子: ~function() { alert("hello, world."); }(); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 试一下就知道这段代码的意思就是声明一个函数,然后立刻执行,因为Javascript中的变量作用域是基于函数的,所以这样可以避免变量污染,但这里的位运算符"~"乍一看让人摸不到头脑,如果去掉它再运行则会报错:SyntaxError. 在阐述为什么之前,让我们先来明确Javascript中的两个概念:函数声明和函

  • JavaScript函数声明和函数表达式的区别

    JavaScript函数声明和函数表达式的区别

    目录 一.写法不一样 二.函数声明加载 三.分析浏览器如何执行代码 一.写法不一样 //函数声明 let res1 = sum1(10 , 20) console.log(res1) function sum1(num1, num2) { return num1 + num2 } //函数表达式 let res2 = sum2(10 , 20) console.log(res2) let sum2 = function ( num1, num2 ){ return num1 + num2 } 二

随机推荐