浅析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 相关文章推荐
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
Python算术运算符实例详解
2017/05/31 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Numpy的简单用法小结
2019/08/28 Python
python正则表达式实例代码
2020/03/03 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
关于赌博的检讨书
2014/01/24 职场文书
团代会宣传工作方案
2014/05/08 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
2014年协会工作总结
2014/11/22 职场文书
师德师风个人总结
2015/02/06 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python