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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
浅谈JS运算符&&和|| 及其优先级
Aug 10 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
jQuery实现元素的插入
Feb 27 Javascript
React优化子组件render的使用
May 12 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
实用函数8
2007/11/08 PHP
php fckeditor 调用的函数
2009/06/21 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
layui添加动态菜单与选项卡
2019/07/26 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
J2EE相关知识面试题
2013/08/26 面试题
函授毕业自我鉴定
2013/12/19 职场文书
财务主管的岗位职责
2013/12/30 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年财政局工作总结
2015/05/21 职场文书
使用Python获取字典键对应值的方法
2022/04/26 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript