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


    先看一段代码

    var f = function g() { 
        return 1; 
    }; 
    if (false) { 
        f = function g(){ 
             return 2; 
        }; 
    } 
    alert(g()); 
    

    你知道在不同浏览器中的输出结果是什么吗?

    把这段代码放到IE 6 和chorme,firefox里面是完全不同的效果,ie6里面会输出2chorm以及firefox会输出g没有定义,这是JScript的bug(微软给自己的javascript起名为JScript),IE6未能正确区分哪个是函数声明,哪个是函数表达式,那么何为声明,何为函数表达式呢? 

    在ECMAScript中,创建函数最常用的两个方法是函数表达式和函数声明:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 
    函数声明:
      function 函数名称 (参数:可选){ 函数体 } 
    函数表达式:
      function 函数名称(可选)(参数:可选){ 函数体 } 

    所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?ECMAScript是通过上下文来区分的,如果function fn(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。 
    还有一种函数表达式不太常见,就是被括号括住的(function fn(){}),他是表达式的原因是因为括号 ()是一个分组操作符,它的内部只能包含表达式。 

    知道了什么是函数声明/函数表达式,他们的区别是什么呢?最大的区别在于javascript代码初始化阶段

    来看一段函数声明示例:

    function fn () {
        console.log('fn 函数执行..');
        // code..
    }
    

    这样我们就声明了一个名称为fn的函数,这里出个思考题,如果在这个函数的上面来调用他的话会执行吗?

    fn();
    function fn () {
        console.log('fn 函数执行..');
        // code..
    }
    

    控制台输出结果为

    此时fn函数是可以被调用到的,总结如下:

     1、fn函数调用前,已经被声明,默认存储在全局上下文的变量中(可用 window.函数名 来验证)

     2、此方式为函数声明,在进入全局上下文阶段创建,代码执行阶段,它们已经可用。ps:javaScript在每次进入方法时都会先初始化上下文环境(由全局 → 局部)

     3、它可以影响变量对象(仅影响存储在上下文中的变量)

    function g(){
    	return 1;
    }
    if(false){
    	function g(){
    		return 2;
    	};
    }
    alert(g());  // 2
    

    此时运行的结果就是2,而不是1,函数已经被提前声明了,而不是等到if语句符合条件时再声明

    再来看一段函数表达式示例:

    var fn = function () {
        console.log('fn 函数【表达式】声明执行..')
        // code..
    }
    

    这是一个函数表达式,如果在这个函数的上面来调用他的话会执行吗?

     

    这说明在第一次调用fn()的时候,var fn 变量没有做为全局对象的一个属性而存在,且 fn 引用的匿名函数上下文也没有被初始化,所以在他之前调用失败,同样总结如下:

    1、首先变量本身不做为一个函数存在,而是一个匿名函数的引用(值类型的不属于引用)

    2、在代码执行阶段,初始化全局上下文时,它没有被做为全局的一个属性而存在,所以不会造成变量对象的污染

    3、该类型的声明一般在插件的开发比较常见,也可做为闭包中回调函数的调用

    所以 function fn () {} 并不等于 var fn = function () {} ,他们有本质上的区别。

  • 相关阅读:
    react dva 的 connect 与 @connect
    es6 解构赋值 新认知/新习惯
    从一到面试题了解js异步机制:setTimeout 和 Pronmise
    React.Fragment 的作用:代替div作为外层
    解决dva dispatch yield生成器函数中异常中断,无法继续调用的问题
    vue v-model 与 组件化的表单组件如何沟通
    react 事件绑定的2种常用方式
    React dva 的使用
    gulp#4.0 Did you forget to signal async completion?
    gulp#4.0
  • 原文地址:https://www.cnblogs.com/diantao/p/5192535.html
Copyright © 2020-2023  润新知