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判断IE6等浏览器的代码
Apr 05 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
解读ES6中class关键字
Nov 20 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 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下载远程文件的3种方法
2015/12/29 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
js常用代码段整理
2011/11/30 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JS跨域总结
2012/08/30 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python发送Email方法实例
2014/08/21 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python和ruby,我选谁?
2017/09/13 Python
python决策树之C4.5算法详解
2017/12/20 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python super用法及原理详解
2020/01/20 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
旅行社计调工作总结
2015/08/12 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python