JS 函数揭秘 (1/6)

有关函数相关的话题在网上讨论的并不够多,因为它比较复杂,这也是为什么现在网上会存在如此多的误解。 在这片文章里面,我会试着从理论和实际出发,去总结有关函数的好的,坏的,丑陋的一面。


函数表达式 VS. 函数声明

在 ECMAScript 中,如果需要使用函数,最常用的两种方法就是通过函数表达式和函数声明。掌握它们区别非常重要,因为在JS 中两者的执行是有差别的,可惜很不爽,至少在看来, 两者之间的差别可以说是相当混乱,只有一件事是 ECMA 规范中讲清楚的----函数声明必须要有一个函数名(规范中称为 identifier (标识)),函数表达式可以忽略函数名:

FunctionDeclaration :
function Identifier ( FormalParameterList <opt> ){ FunctionBody }

FunctionExpression :
function Identifier<opt> ( FormalParameterList <opt> ){ FunctionBody }

我们可以仔细瞧瞧,当忽略函数名时,只能是函数表达式,这个是没有争议的,因为规范中有说,函数表达式可以忽略函数名,但是如果加上函数名呢?这两种方式一模一样,我们别人说这是一个函数声明,还是一个函数表达式呢?

区分函数表达式和函数声明

看起来 ECMAScript 判断两者的不同是基于整个上下文的,如果function foo () {} 是一行语句的某个部分,比如说赋值表达式的一部分,它应该是一个函数表达式,可以理解为当前赋值表达式有函数的参与。 如果function foo () {}被包含在一个函数体内或者直接暴露在最上层的作用域下,它就是一个函数声明。

function foo(){} // 声明,因为它暴露在全局作用域下
var bar = function foo () {} // 表达式,因为它是构成赋值表达式的一部分
 new function bar () {} // 表达式,因为它是 new 语句的一部分
 (funciton () {
     function bar () {} // 声明,因为它在函数体内
 })();

上面的例子有个需要留意的地方,(function () {})这个函数应该算作哪一种。可以明确的说它是一个函数表达式,因为前后的两个()括号。两个括号组成一个分组运算符,而分组运算符可以包含表达式的,所以按照上面的说明,它是一部分,是一个函数表达式(注意区分编程中的语句和表达式,参考文章 http://www.2ality.com/2012/09/expressions-vs-statements.html),并且分组运算符也只可以包裹表达式。

区分清楚之后,来看他们之间的不同,首先在其他语句还没有执行之前,函数声明将会先被解析和执行。即便它的位置在整个页面资源的最底部,它会被在作用域中出现的时间将会先于其他的任何表达式。下面的例子演示了fn 函数声明的位置靠后,但是依然可以在声明的位置之前被调用。

alert(fn());
function fn () {
return 'hello world~"
}

另外一个绝对需要注意的特点,不要在条件语句声明函数,在不同的环境下,会有不同的处理结果,所以当遇到要依据不同条件来新建函数时,一定要使用函数表达式代替,看下面的例子:

// 绝对不要这样做,由于函数声明会在其他语句没有执行之前就声明完毕,所以这里的处理逻辑比较混乱
// 某些浏览器会直接使用第一个声明,返回 'first' 
// 某些会使用第二个声明 'second'

if (true) {
  function foo() {
    return 'first';
  }
}
else {
  function foo() {
    return 'second';
  }
}
foo();

// 当一定需要依据不同情况创建函数时,使用函数表达式的方法来代替
var foo;
if (true) {
  foo = function() {
    return 'first';
  };
}
else {
  foo = function() {
    return 'second';
  };
}
foo();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,076评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,658评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,732评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,493评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,591评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,598评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,601评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,348评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,797评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,114评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,278评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,953评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,585评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,202评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,180评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,139评论 2 352

推荐阅读更多精彩内容