比较常见的javascript中定义函数的区别


Posted in Javascript onNovember 09, 2015

比较常见的javascript中定义函数的区别主要通过以下三个方面给大家讲解,需要的朋友参考下吧

1:调用关键字function来构造

如:

function distance(x1,x2,y1,y2) 
{ 


var dx=x2-x1; 


var dy=y2-y1; 


return Math.sqrt(dx*dx+dy*dy); 

}

2:使用Function()构造函数

如:

var f=new Function*"x","y","return x*y");

这行代码创建了一个新函数,该函数和你所熟悉的语法定义的函数基本上时等价的:

function f(x,y) 
{ 

  return x*y; 

}

Functino()构造函数可以接受任意多个字符串参数。它的最后一个参数时函数的主体,其中可以包含任何JavaScript语句,语句之间用分号分隔。其他的参数都是用来说明函数要定义的形式参数名的字符串。如果你定义的函数没有参数,那么可以只需给构造函数传递一个字符串(即函数的主体)即可。

注意,传递给构造函数Function()的参数中没有一个用于说明它要创建的函数名。用Function()构造函数创建的未命名函数有时被成为“匿名函数”。

你可能非常想知道Function()构造函数的用途是什么。为什么不能只用function语句来定义所有的函数呢?原因是Function()构造函数允许我们动态地建立和编译一个函数,它不会将我们限制在function语句预编译的函数体中。这样做带来的负面影响效应就是每次调用一个函数时,Function()构造函数都要对它进行编译。因此,在循环体中或者在经常使用的函数中,我们不应该频繁地调用这个构造函数。

使用Function()构造函数的另一个原因是它能够将函数定义为JavaScript表达式的一部分,而不是将其定义一个语句,这种情况下使用它就显得比较的方面,甚至可以说精致。

3:函数直接量

函数直接量是一个表达式,它可以定义匿名函数。函数直接量的语法和function语句非常相似,只不过它被用作表达式,而不是用作语句,而且也无需指定函数名。下面的三行代码分别使用function()语句、Funciont()构造函数和函数直接量定义了三个基本上相同的函数:

function f(x){return x*x}; 
var f=new Function("x","return x*x;"); 

var f=function(x){reurn x*x};

 

虽然函数直接量创建的是未命名函数,但是它的语法也规定它可以指定函数名,这在编写调用自身的递归函数时非常有用。

例如:

var f=function fact(x){if(x<=1)return 1;else return x*fact(x-1);};

上面的代码定义了一个未命名函数,并对它的引用存储在变量f中。它并没有真正的创建一个名为fact()的函数,只是允许函数体用这个名字来引用自身。但是要注意,JavaScript1.5之前的版本中没有正确实现这种命名的函数直接量。

函数直接量的用法和用Function()构造函数创建函数的方法非常相似。由于它们都是由JavaScript的表达式创建的,而不是由语句创建的,所以使用它们的方式也就更加灵活,尤其适用于那些只使用一次,而且无需命名的函数。例如,一个使用函数直接量表达式指定的函数可以存储在一个变量中、传递给其他的函数甚至被直接调用:

a[0]=function(x){return x*x;};//定义一个函数并保存它 
a.sort(function(a,b){return a-b;});//定义一个函数;把它传递给另一个函数 

var tensquared=(function(x){return x*x;})(10);

和Function()构造函数一样,函数直接量创建的是未命名函数,而且不会自动地将这个函数存储在属性中。但是,比起Function()构造函数来说,函数直接量有一个重要的优点。由Function()构造函数创建的函数的主体必须用一个字符串说明,用这种方式来表达一个长而复杂的函数是狠笨拙的。但是函数直接量的主体使用的却是标准的JavaScript语法。而且函数直接量只被解析一次,而作为字符串传递给Function()构造函数的JavaScript代码则在每次调用构造函数时只需被解析一次和编译一次。

在JavaScript1.1中,可以使用构造函数Function()来定义函数,在JavaScript1.2和其后的版本中,还可以使用函数直接量来构造函数。你应该注意这两种方法之间的重要差别。

首先,构造函数Function()允许在运行时动态地创建和编译JavaScript代码。但是函数直接量却是函数结构的一个静态部分,就像function语句一样。

其次,作为第一个差别的必然结果,每次调用构造函数Function()时都会解析函数体并且创建一个新东汉数对象。如果对构造函数的调用出现在一个循环中,或者出现在一个经常被调用的函数中,这种方法的效率非常低。另一个方面,函数直接量或出现在循环和函数中的嵌套函数不是在每次调用时都被重新编译,而且每当遇到一个函数直接量时也不创建一个新的函数对象。

Function()构造函数和函数之间量之间的第三点差别是,使用构造函数Function()创建的函数不使用词法作用域,相反的,它们总是被当作顶级函数来编译,就像下面代码所说明的那样:

 var y="global"; 
function constructFunction() 

{ 


var y="local"; 


return new Function("return y");//不捕捉局部作用域。 

} 

//这行代码将显示"global",因为Function()构造函数返回的函数并不使用局部作用域。 

//假如使用一个函数直接量,这行代码则可能显示"local"。 

alert(constructFunction());
Javascript 相关文章推荐
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
详解JavaScript中的Unescape()和String() 函数
Nov 09 #Javascript
表单验证正则表达式实例代码详解
Nov 09 #Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 #Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 #Javascript
window.location.hash知识汇总
Nov 09 #Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 #Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 #Javascript
You might like
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
浅析PHP开发规范
2018/02/05 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
Angular 4依赖注入学习教程之简介(一)
2017/06/04 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
深入浅析Python字符编码
2015/11/12 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python生成任意频率正弦波方式
2020/02/25 Python
Python如何实现机器人聊天
2020/09/10 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
旅游网创业计划书
2014/01/31 职场文书
行政专员的岗位职责
2014/03/10 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
运动会1000米加油稿
2015/07/21 职场文书