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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript prototype原型操作笔记
Dec 07 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
JavaScript实现电灯开关小案例
Mar 30 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批量删除cookie的简单实现方法
2015/01/26 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
js实现简单计算器
2015/11/22 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
基于canvas粒子系统的构建详解
2017/08/31 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
python绘图方法实例入门
2015/05/19 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python 硬币兑换问题
2019/07/29 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python/golang 删除链表中的元素
2020/09/14 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
盛大二次面试题
2016/11/18 面试题
18岁生日感言
2014/01/12 职场文书
社区工作者演讲稿
2014/05/23 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python