JavaScript 函数定义方式

原文链接https://www.ibm.com/developerworks/cn/web/1406_dengxb_jsfunction/index.html(侵删)

邓 晓兵 和 陈 雷鸣2014 年 6 月 19 日发布

函数的定义

通俗的来讲,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码快。它是 JavaScript 语言一个即重要又复杂的组成部分,任何一个 JavaScript 框架,如 Dojo、jQuery 等都是有成百上千个函数组成的。函数的使用不仅提高了代码本身的可读性,也为它的扩展提供了可能,同时还降低了维护成本,加快 web 项目的开放进度;尤其是在多人参与的敏捷开发中。

通常函数的定义是通过 function 语句实现的:

清单 1.函数定义

function funcname([arg1[,arg2......]]){
    statements
}

funcname 是要定义的函数名,是一个标识符,而不是字符串或者表达式;紧跟函数名后面的是用括号括起来的参数列表,参数之间用逗号隔开;最后,也是这个函数的核心部分:函数体,它是由一行或者多行代码组成并且是用大括号括起来的。

函数定义描述的是一个静态的程序结构,当 JavaScript 解析器遇到一个函数定义时,它就被解析并存储构成函数体的语句,然后定义一个和该函数名同名的全局或者某个对象属性来保存。当该函数被调用时,里面的函数体才真正的被执行。如:

清单 2

alert(typeof f)//显示 function,而不是 undefined 
function f(x,y){
    alert(x+y);
}
f(2, 3) //显示 5

函数定义方式之 Function()构造函数

定义一个函数,最为普遍的是直接使用 function 关键字来定义,又称函数声明式(function declaration),如上面定义的 f 函数,但是 function 语句并非是定义函数的惟一方法。在 ECMAScript v1 和 JavaScript v1.1 中,还可以使用 Function () 构造函数和 new 运算符动态地定义函数,如下:

var myfunc = new Function ('x', 'y', 'alert(x+y)');

这行代码创建了一个新函数,该函数和下面使用 function 方法定义的函数是等价的:

清单 3.

function myfunction(x, y){
    alert(x+y);
}

Function () 定义中,前面两个是参数,参数可以是任意多个字符串;第三个是函数体,可以包含任何 JavaScript 语句,语句之间用分号隔开。如果没有参数,传一个函数体即可。由于传递给 Function () 函数中,没有一个字符串是用来声明函数名的,所以它是一个匿名函数。

使用 Function()构造函数来定义函数允许我们动态的来定义和编译一个函数,而不是限定在 function 预编译的函数体中。但同时也会带来负面影响,因为每次调用这个函数都要对它进行编译,对性能有一定的影响,尤其是在循环体中。

函数定义方式之函数直接量

函数定义的第三种方式是函数直接量,ECMAScript v3 定义了函数直接量,JavaScript 1.2 实现了它。函数直接量是一个表达式,它即可以定义一个匿名函数,也可以定义一个带函数名的函数:

清单 4.

        var sum = function(a, b){
            return a+b;
        }
        var f = function fact(x){
            if(x<= 1){
                return 1;
            }else{
                return x * fact(x-1);
            }
        }

函数直接量和使用 Function()构造函数来创建函数的方法非常相似,因为两种方法都是通过 JavaScript 的表达式创建的,而不是由语句创建的;所以使用他们的方式也更灵活,尤其是那些只使用一次,而且不需要命名的函数。比如把它传递给其他的函数:
清单 5.

        var desc = function (a, b) {
            return a < b
        }
        var a = [2, 1, 4, 3, 6, 7]
        a.sort(desc)// 把desc函数当作参数传给数组的sort方法
        alert(a.join(','))// 输出7,6,4,3,2,1

区别

三种方式的区别,可以从作用域、效率以及加载顺序来区分。首先,从作用域上来说,函数声明式和函数直接量使用的是局部变量,而 Function()构造函数却是全局变量:

清单 6.

         var y = 'global'

        function a() {
            var y = 'local a'
            return y
        }

        alert(a())//显示'local a'
        var b = function () {
            var y = 'local b'
            return y
        }
        alert(b()) //显示'local b'
        function c() {
            var y = 'local c'
            return new Function('return y')
        }

        alert(c()())//显示'global',因为Function()返回的是全局变量y,而不是函数体内的局部变量。

其次是执行效率上来说,Function()构造函数的效率要低于其他两种方式,尤其是在循环体中,因为构造函数每执行一次都要重新编译,并且生成新的函数对象:

清单 7.

        var start = new Date().getTime()
        for (var i = 0; i < 10000000; i++) {
            var f = new Function('a', 'b', 'return a + b')
            f(i, i + 1)
        }
        var end = new Date().getTime()

        alert(end - start)//结果显示~11s
        start = new Date().getTime()

        var f = function (a, b) {
            return a + b
        }
        for (var i = 0; i < 10000000; i++) {
            f(i, i + 1)
        }
        end = new Date().getTime()
        alert(end - start)//结果显示~7s

由此可见,在循环体中,函数直接量的执行效率是 Function()构造函数的 0.6 倍。所以在 Web 开发中,为了加快网页加载速度,提高用户体验,我们不建议选择 Function ()构造函数方式来定义函数。

最后是加载顺序,function 方式(即函数声明式)是在 JavaScript 编译的时候就加载到作用域中,而其他两种方式则是在代码执行的时候加载,如果在定义之前调用它,则会返回 undefined:

清单 8.

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