浅析JS中对函数function的理解(基础篇)


Posted in Javascript onOctober 14, 2016

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法。因此,函数名实际上是指向函数对象的指针,不与某个函数绑定。在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念:

var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐

Function的构造函数可以接收任意数量的参数,但最后一个参数始终被看做函数体。这种方式有个缺点是,会导致解析两次代码,第一次是基础的ES代码解析,第二次是解析传入构造函数中的字符串,这样会导致性能的下降,在此写出是帮助理解js中函数其实是对象这个概念。

 (一)js函数没有重载的概念

说到重载的概念,我们来类比Java中的重载是怎么实现的:在Java中,方法是通过方法签名来唯一标识一个方法。方法签名包括:方法名、参数数量、参数顺序和参数类型这几个要素。因此两个方法的方法名相同,而其他签名要素不同,编译器就会认为是两个不同方法,从而可以存在同名的不同方法,以实现重载的概念。(引用:怎么深入理解js中为什么没有重载呢--segmentfault 中manxisuo的回答)。

而上面我们说过,js中的函数名实际上是指向函数对象的指针,因此函数名可以说是一个函数的唯一标识,跟参数列表并没有关系,因此并不会出现同名的两个函数(因为一个指针同时只能指向一个对象)从而不存在重载的概念。 举个栗子:

function sum(num1, num2){
return num1 + num2;
}
function sum(num1, num2, num3){
return num1 + num2 + num3;
}

上面这种可以换一种写法,会更直观一些:

var sum = function(num1, num2){
return num1 + num2;
}
sum = function(num1, num2, num3){
return num1 + num2 + num3;
}

这样就很明显可以看出,上面一行将sum指向function(num1,num2),而接下来又将sum指向function(num1, num2, num3),从而造成第二次的指向覆盖了第一次的,因此更明显的看出js中并没有重载的概念。

(二)函数声明和函数表达式的区别

我们知道,常用的定义函数方法有两个:函数声明和函数表达式。

函数声明,可以说是最常见的定义方法,如下例:

function sum(num1, num2){
return num1 + num2;
}

函数表达式,这种定义方式在闭包及一些框架中使用较多,例如angular中常见的$scope.doSomething = function(){...}:

sum = function(num1, num2){
return num1 + num2;
};

上述两种定义方法几乎是相同的,但有一点小区别,请看下面这个例子:

//函数声明
alert(sum(100, 100));
function sum(num1, num2){
return num1 + num2;
}
//函数表达式
alert(sum(100, 100));
var sum = function(num1, num2){
return num1 + num2;
};

这两段代码看起来差别不大,只是函数定义的方式不同而已。但事实是,第一段可以正常运行而第二段则会报错。这是因为,在代码开始执行之前,解析器就已经通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。简单来说,解析器会先将函数声明放在源代码树的顶部。而下面那段代码,函数位于一个初始化语句中(并不会将其提升到顶部),简单来说,在执行到这个赋值语句之前,sum并未指向任何一个函数,因此在之前调用函数则会报错。

以上所述是小编给大家介绍的JS中函数function的理解(基础篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中小数转换整数的方法
Jan 26 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
jquery实现图片轮播器
May 23 jQuery
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
微信小程序手动添加收货地址省市区联动
May 18 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
JS动态计算移动端rem的解决方案
Oct 14 #Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 #Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 #Javascript
第一次接触神奇的Bootstrap
Oct 14 #Javascript
You might like
php $_SERVER当前完整url的写法
2009/11/12 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
Angular2库初探
2017/03/01 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python3实现ftp服务功能(客户端)
2017/03/24 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
促销活动总结范文
2014/04/30 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
酒店工程部岗位职责
2015/02/12 职场文书