JS两种定义方式的区别、内部原理


Posted in Javascript onNovember 21, 2013

相信两种方式大家都用过,但未必所有人都知道其 区别,内部原理。

// 方式1 
function func1(x,y){ 
// your code 
} 
// 方式2 
var func2 = function(x,y){ 
// your code 
}

方式1 是典型的函数声明(Function declarations)。
方式2 是函数表达式(Function expressions),将一个匿名函数赋值给一个变量。或者说方式2中创建了一个具有形参为x,y的匿名函数,然后把该匿名函数赋值给变量func2。

其主要区别在于:
1, 函数声明需显示的指定函数名,这里是func1;函数表达式则使用匿名函数
2, 方式1在代码执行之前(解释期)被加载到作用域中,方式2则需在代码执行时(运行期)加载

一个简单示例就明白了它们在使用上的区别

alert(func1); // --> func1源码 
alert(func2); // --> undefined 
// 方式1 
function func1(x,y){ 
// your code 
} 
// 方式2 
var func2 = function(x,y){ 
// your code 
}

可以看到,第一次弹出的是func1的源码,第二次却是undefined。即采用方式1(函数声明)定义函数,可以在该函数代码之上使用它,采用方式2(函数表达式)定义函数则不能在其定义前使用,只能在其定义后使用。

其内部涉及到 执行上下文(Execution context)及 激活对象(Activation object)。想更深了解的请阅读EcmaScript 5文档。

最近发现越来越多的人喜欢使用方式2定义函数,尤其在嵌套函数中。如单纯的定义一个函数个人还是习惯方式1。

Javascript 相关文章推荐
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
jqgrid 表格数据导出实例
Nov 21 #Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 #Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 #Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 #Javascript
js 实现菜单上下显示附效果图
Nov 21 #Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 #Javascript
You might like
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
js 操作符实例代码
2009/10/24 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
Vue computed计算属性的使用方法
2017/07/14 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python字典简介以及用法详解
2016/11/15 Python
Python3 模块、包调用&路径详解
2017/10/25 Python
Python制作exe文件简单流程
2019/01/24 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
详解python polyscope库的安装和例程
2020/11/13 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
优秀教师主要事迹
2014/02/01 职场文书
Python3 类型标注支持操作
2021/06/02 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript