先看一段代码

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 () {} ,他们有本质上的区别。

javascript 函数声明与函数表达式的区别的更多相关文章

  1. 详解Javascript 函数声明和函数表达式的区别

    Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...

  2. javascript中函数声明与函数表达式的区别

    javascript中声明函数的方法有两种:函数声明式和函数表达式.究竟他们用起来有什么区别呢? 区别如下: (1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. (2) ...

  3. JavaScript的函数声明与函数表达式的区别

    1)函数声明(Function Declaration); // 函数声明 function funDeclaration(type){ return type==="Declaration ...

  4. 转载 JavaScript的函数声明与函数表达式的区别

    1)函数声明(Function Declaration); // 函数声明 function funDeclaration(type){ return type==="Declaration ...

  5. JavaScript 函数声明与函数表达式的区别 函数声明提升(function declaration hoisting)

    解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问).至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真的被 ...

  6. Javascript函数声明与函数表达式的区别

    在定义函数时,我们一般使用下面这两种方法: 使用函数声明定义: 1 2 3 function  sum (a, b) {     return a + b; } 使用函数表达式定义: 1 2 3 va ...

  7. JavaScript(js)函数声明与函数表达式的区别

    在JavaScript中,函数是经常用到的,在实际开发的时候,我想很多人都没有太在意函数的声明与函数表达式的区别,但是呢,这种细节的东西对于学好js是非常重要的. 函数声明与函数表达式用代码写出来是这 ...

  8. JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别

    函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...

  9. Javascript函数声明与函数表达式

    在定义函数时,我们一般使用下面这两种方法: 使用函数声明定义: function sum (a, b) { return a + b; } 使用函数表达式定义: var sum = function ...

随机推荐

  1. Linux系统管理命令之权限管理

    对于一个目录来说,x权限:可以cd进去 对于目录: 读:看 执行:进去 写:写操作 rw权限没有意义 umask 022     特殊权限: suid sgid 2种情况:对于文件:类似于suid对于 ...

  2. 快速操作Linux终端命令行的快捷键列表

    终端有很多快捷键,不太好记,常用的在这里 Ctrl+r 实现快速检索使用过的历史命令.Ctrl+r中r是retrieve中r.Ctrl+a:光标回到命令行首. (a:ahead)Ctrl+e:光标回到 ...

  3. .NET导入导出Excel

    若是开发后台系统,ASP.NET MVC中总是涉及了很多导入导出Excel的问题,有的时候处理起来比较烦 如果能使用以下代码解决,就完美了 public class ReportModel { [Ex ...

  4. ARM学习篇 中断定时理解

    1. 中断控制器 a. 中断处理流程 P1--摘自S3C2440A手册 P1简要阐述了S3C2440A内置中断控制器处理中断的流程: ●​若某中断有自中断,则先接收子中断请求,否则,直接接受源中断. ...

  5. 关于电磁场中的E.B.D.H的理解

    电磁场理论中存在四个基本物理量,电场强度E,磁场强度H,电场通量密度D,磁场通量密度B. E:其中E和H最简单,电场中的电荷受到电场力的作用,单位电荷受的力称为电场强度,这种定义得到E的单位为N/C, ...

  6. 三星s4宣传片配色有惊喜

    三星s4宣传片配色有惊喜据了解,一周前,三星曾对外发布了新旗舰手机galaxy s4的宣传视频,不过那份视频里所含信息仅仅只有s4发布会的邀请函.而日前,三星官方发布了s4的第二弹宣传片则暗示该机在配 ...

  7. jvm虚拟机性能监控与故障处理工具

    java开发人员肯定知道jdk的bin目录中有java.exe javac.exe这两个命令行工具,但并非所有程序员都了解过jdk的bin目录之中其他命令行的作用.jdk的工具,体积都比较小,这些命令 ...

  8. Ubuntu下初学ROS时所遇小问题

    [1]运行命令$ rospack depends1 beginner_tutorials 时,提示 : [rospack] Error: no such package beginner_tutori ...

  9. Json数据与Json数据转换

    1.json数据 [{\"IS_DISTRIBUTOR_LIMIT\":0,\"PROVISION_PRICE\":null,\"PRO_STATUS ...

  10. Python的高级特性2:列表推导式,生成器与迭代器

    一.列表推导式 1.列表推导式是颇具python风格的一种写法.这种写法除了高效,也更简短. In [23]: {i:el for i,el in enumerate(["one" ...