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 表单进行客户端验证demo
Aug 24 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
javascript实现Table排序的方法
May 15 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Vue中的vue-resource示例详解
Nov 02 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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获取bing每日壁纸示例分享
2014/02/25 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
JqGrid web打印实现代码
2011/05/31 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
js中unicode转码方法详解
2015/10/09 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
python和C语言混合编程实例
2014/06/04 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python 3中的yield from语法详解
2017/01/18 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
房地产财务管理制度
2014/02/02 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
硕士生找工作求职信
2014/07/05 职场文书
文秘应届生求职信
2014/07/05 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
运动会开幕词
2015/01/28 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS