函数声明与函数表达式的区别

浠ラ箍发布于2019-08-22 15:50 / 3006人阅读

摘要：，在这里的将所有的函数声明进行了提升，从而由替代了函数表达式的在顺着条件判断进行了定义，执行为的情况，进行赋值解析。

函数声明（funDeclaration）

无论在哪儿定义函数,只要是外层函数并且满足不被包裹，就都可以进行全局范围的调用

function foo() { }

在函数体内部的函数声明无法提升到全局，只能提升到函数体内顶部(块级作用域空间)

function test() {
    console.log(1);

    function test2() {
      console.log(2);
    }

  }
  test();  // 1
  test2(); // Uncaught ReferenceError: test2 is not defined

函数体内部执行：

function test() {
   
    test2();
    function test2() {
      console.log(2);
    }
  }
  test(); // 2

在外部要想访问函数内部申明的函数，需要先return出来:

function test() {
    console.log(1);

    function test2() {
      console.log(2);
    }
    return {
      test2:test2
    }
  }
  test().test2(); // 2

函数表达式（funExpression）

函数表达式需要等到表达式赋值完成才可以

换言之使用var来声明函数，就会涉及到变量的声明提升，先拿出变量名定义为undefined，再随着逻辑顺序进行赋值先定义，后使用

var foo = function () { }

demo1

    Toast()    // hello world

    showToast(); // shwoToast is not a function

    var showToast = function () {
      console.log("123")
    }
    function Toast() {
      console.log("hello world") 
    }

在这里只需要把showToast 提前就好了

demo2 主流浏览器解析，ie11+

 var sayHello;
    console.log(typeof (sayHey));//=>undefined   
    console.log(typeof (sayHo));//=>undefined
    if (true) {
      function sayHey() {
        console.log("sayHey");
      }
      sayHello = function sayHo() {
        console.log("sayHello");
      }
    } else {
      function sayHey() {
        console.log("sayHey2");
      }
      sayHello = function sayHo() {
        console.log("sayHello2");
      }
    }
    sayHey();// => sayHey   
    sayHello();// => sayHello

在花括号里面声明的函数在进行预解析时只会提升函数名，不会提升函数体，所以不管if条件是否为真，函数体都不会提升，永远是undefined,接下来随着if条件判断进行解析赋值，当然是走ture方法。

ie9，ie10

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHo));//=>undefined
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

在这里的ie将所有的函数声明进行了提升，从而由sayHey2替代了sayHey,函数表达式的在顺着条件判断进行了定义，执行为true的情况，进行赋值解析。

ie8

var sayHello;
    console.log(typeof (sayHey));//=>function    
    console.log(typeof (sayHello));//=>function
    if (true) {
        function sayHey() {
            console.log("sayHey");
        }
        sayHello = function sayHo() {
            console.log("sayHello");
    }
    } else {
        function sayHey() {
            console.log("sayHey2");
        }
        sayHello = function sayHo() {
            console.log("sayHello2");
        }
    }    
    sayHey();// => sayHey2    
    sayHello();// => sayHello

ie8在这里处理的比较奇葩，正常的函数申明提升，但是却也将条件判断为假的情况进行了提升，我们看到typeof (sayHello)=>function

结论

由于函数声明提升的差异，想要在条件判断中定义不同的函数方法，应该采用定义函数表达式的方法，这样就在各个浏览器中拿到相同的函数方法，得到相同的结果。

 var sayHello;
    console.log(typeof (sayHey));//=>undefined    ie8以下解析为function
    console.log(typeof (sayHo));//=>undefined
    if (true) {
      var sayHey =function sayHey() {
        console.log("sayHey");
      }
     
    } else {
      var sayHey =function sayHey() {
        console.log("sayHey2");
      }
     
    }
    sayHey();// => sayHey

参考

http://www.cnblogs.com/isaboy...

云服务器 GPU云服务器函数的声明c语言函数声明声明式函数提前声明函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93786.html

JS基础篇--函数声明与定义，作用域，函数声明与表达式的区别

摘要：在中，有四种方式可以让命名进入到作用域中按优先级语言定义的命名比如或者，它们在所有作用域内都有效且优先级最高，所以在任何地方你都不能把变量命名为之类的，这样是没有意义的形式参数函数定义时声明的形式参数会作为变量被至该函数的作用域内。 Scoping & Hoisting 例： var a = 1; function foo() { if (!a) { var ...

TerryCai 2019-08-21 10:41 评论0 收藏0
函数声明与函数表达式的区别

摘要：有两种定义函数的方式函数声明与函数表达式。所以在实际开发的时候，一定要注意变量函数的声明会被提升到当前作用域的最前面 JS有两种定义函数的方式：函数声明与函数表达式。那么这两种方式有区别吗，还是一样的呢？下面我们来进一步探讨探讨。下面我们定义了两个函数分别为 hello 和 hi，前者采用函数声明，后者采用函数表达式，然后再调用，如下： function hello () { ...

_Suqin 2019-08-22 14:06 评论0 收藏0
JavaScript—— 函数声明和函数表达式有什么不同吗？

摘要：函数声明和函数表达式的区别函数声明只能出现在程序或函数体内。所以，在等语义为语句的代码块中存在函数声明，由于函数提升特性，会破坏掉原本的语义。这篇谈一下JS函数声明与函数表达式的区别及要注意的地方：函数声明主要有两种类型：函数声明 function fn() {}; 函数表达式 var fn = function () {}; 这两种函数创建方式...

FleyX 2019-08-20 16:36 评论0 收藏0
函数声明与函数表达式的区别

摘要：函数声明函数声明的语法说明函数声明最重要的特征就是函数声明提升，意思是在执行代码之前就会读取函数声明例子不会报错，因为函数声明在在函数之前已经读取函数表达式函数表达式的语法说明用函数表达式定义的函数在使用之前必须先赋值例子报错，函数调用之前 1.函数声明函数声明的语法： function functionName(arg0,arg1...) { //functionBody ...

Karrdy 2019-08-19 17:57 评论0 收藏0
js中函数声明与函数表达式的区别以及立即执行函数

摘要：最近在写代码时遇到了闭包，其中闭包又和立即执行函数有点关系，于是牵扯除了函数声明以及函数表达式，我感觉中文的很多文章写的不太好，查阅了的指南和这篇关于的文章，觉得写的很好，整合一下。函数声明和函数表达式。最近在写代码时遇到了闭包，其中闭包又和立即执行函数（immediately invoked function expression, aka IIFE)有点关系，于是牵扯除了函数声明...

madthumb 2019-08-23 10:26 评论0 收藏0