网站首页 > 技术文章 正文
深入理解:全面掌握JavaScript 函数定义方式
1.函数的定义
通俗的来讲,函数是由事件驱动的或者当它被调用时执行的可重复使用的代码快。它是 JavaScript 语言一个即重要又复杂的组成部分,任何一个 JavaScript 框架,如 Dojo、jQuery 等都是有成百上千个函数组成的。函数的使用不仅提高了代码本身的可读性,也为它的扩展提供了可能,同时还降低了维护成本,加快 web 项目的开放进度;尤其是在多人参与的敏捷开发中。
通常函数的定义是通过 function 语句实现的:
清单 1.函数定义
funcname 是要定义的函数名,是一个标识符,而不是字符串或者表达式;紧跟函数名后面的是用括号括起来的参数列表,参数之间用逗号隔开;最后,也是这个函数的核心部分:函数体,它是由一行或者多行代码组成并且是用大括号括起来的。
函数定义描述的是一个静态的程序结构,当 JavaScript 解析器遇到一个函数定义时,它就被解析并存储构成函数体的语句,然后定义一个和该函数名同名的全局或者某个对象属性来保存。当该函数被调用时,里面的函数体才真正的被执行。如:
清单 2
2. 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 () 定义中,前面两个是参数,参数可以是任意多个字符串;第三个是函数体,可以包含任何 JavaScript 语句,语句之间用分号隔开。如果没有参数,传一个函数体即可。由于传递给 Function () 函数中,没有一个字符串是用来声明函数名的,所以它是一个匿名函数。
使用 Function()构造函数来定义函数允许我们动态的来定义和编译一个函数,而不是限定在 function 预编译的函数体中。但同时也会带来负面影响,因为每次调用这个函数都要对它进行编译,对性能有一定的影响,尤其是在循环体中。
3. 函数直接量
函数定义的第三种方式是函数直接量,ECMAScript v3 定义了函数直接量,JavaScript 1.2 实现了它。函数直接量是一个表达式,它即可以定义一个匿名函数,也可以定义一个带函数名的函数:
清单 4.
注意:调用时得用定义的变量名,如f(4),而不能fact(4).
函数直接量和使用 Function()构造函数来创建函数的方法非常相似,因为两种方法都是通过 JavaScript 的表达式创建的,而不是由语句创建的;所以使用他们的方式也更灵活,尤其是那些只使用一次,而且不需要命名的函数。比如把它传递给其他的函数:
清单 5.
4.区别
三种方式的区别,可以从作用域、效率以及加载顺序来区分。首先,从作用域上来说,函数声明式和函数直接量使用的是局部变量,而 Function()构造函数却是全局变量:
清单 6.
其次是执行效率上来说,Function()构造函数的效率要低于其他两种方式,尤其是在循环体中,因为构造函数每执行一次都要重新编译,并且生成新的函数对象:
清单 7.
由此可见,在循环体中,函数直接量的执行效率是 Function()构造函数的 0.6 倍。所以在 Web 开发中,为了加快网页加载速度,提高用户体验,我们不建议选择 Function ()构造函数方式来定义函数。
最后是加载顺序,function 方式(即函数声明式)是在 JavaScript 编译的时候就加载到作用域中,而其他两种方式则是在代码执行的时候加载,如果在定义之前调用它,则会返回 undefined:
清单 8.
猜你喜欢
- 2024-10-23 ECMAScript 6的历史和未来前景展望
- 2024-10-23 JavaScript 引擎基本原理:Shapes 和 Inline Caches
- 2024-10-23 Vue进阶(四十二):var、let、const三者的区别
- 2024-10-23 JavaScript编程基础2(javascript编程工具)
- 2024-10-23 什么是ESLint?(什么是血糖)
- 2024-10-23 前端三剑客:HTML、CSS 和 JavaScript
- 2024-10-23 JavaScript 后端开发者必须跨的 10 道门槛
- 2024-10-23 ECMAScript 2023 新特性解读,附代码示例
- 2024-10-23 带你走进JavaScript世界系列——window对象和全局作用域
- 2024-10-23 前端基础:ECMAScript 6(前端基础笔试题及答案)
- 11-26Win7\8\10下一条cmd命令可查得笔记本电脑连接过的Wifi密码
- 11-26一文搞懂MySQL行锁、表锁、间隙锁详解
- 11-26电脑的wifi密码忘记了?一招教你如何找回密码,简单明了,快收藏
- 11-26代码解决忘记密码问题 教你用CMD命令查看所有连接过的WIFI密码
- 11-26CMD命令提示符能干嘛?这些功能你都知道吗?
- 11-26性能测试之慢sql分析
- 11-26论渗透信息收集的重要性
- 11-26如何查看电脑连接过的所有WiFi密码
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)