浅析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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
2014/05/09 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python正则表达式指南 推荐
2018/10/09 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python绘制雪景图
2019/12/16 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
给护士表扬信
2014/01/19 职场文书
结婚司仪主持词
2015/06/29 职场文书
谢师宴学生致辞
2015/07/27 职场文书
追悼会家属答谢词
2015/09/29 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers