比较常见的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 相关文章推荐
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
详解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
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php分页查询的简单实现代码
2017/03/14 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
浅谈Python中的闭包
2015/07/08 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Python基于百度云文字识别API
2018/12/13 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
门诊挂号室室长岗位职责
2013/11/27 职场文书
集体生日活动方案
2014/08/18 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
MySQL导致索引失效的几种情况
2022/06/25 MySQL