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 AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
搭建vscode+vue环境的详细教程
Aug 31 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
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php数组指针操作详解
2017/02/14 PHP
类似框架的js代码
2006/11/09 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python中pop()函数的语法与实例
2020/12/01 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
关于VPN
2012/06/10 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
团队精神的演讲稿
2014/05/14 职场文书
小学教师培训方案
2014/06/09 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
2015年班干部工作总结
2015/04/29 职场文书