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 toggle()设置CSS样式
Nov 05 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
JS 表单验证大全
2011/11/23 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python字典与json转换的方法总结
2020/12/28 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
煤矿安全生产标语
2014/06/06 职场文书
校园绿化美化方案
2014/06/08 职场文书
北京申奥口号
2014/06/19 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB