JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

所属分类: 网络编程 / JavaScript 阅读数: 1821
收藏 0 赞 0 分享
一、申明函数的三种方法 (Declaring a Function)
方法一:function functionName([parameters]){functionBody};

Example D1
复制代码 代码如下:

function add(a, b)
{
return a+b;
}
alert(add(1,2)); // produces 3


当我们这样申明函数时,函数的内容被解释(但没有执行,要我们调用该函数才会执行),同时,一个名为add的对象已经建立。

方法二:将一个未命名的函数function赋给一个指定变量(var)


Example D2
复制代码 代码如下:

var add=function(a, b)
{
return a+b;
}
alert(add(1,2)); // produces 3


这种申明的语法看起来怪异,但它可以帮助我们更好地理解“函数即对象”。通过这种方式申明的函数的内容,同样是被解释,而未被执行。
同时,我们还可以这样定义:

Example D2A:
复制代码 代码如下:

var add=function theAdd(a, b)
{
return a+b;
}
alert(theAdd(1,2)); // produces 3
alert(add(1,2)); // also produces 3

由上面一个例子可以看出,我们既可以通过函数名theAdd调用函数,也可以通过指定的函数变量名add调用函数。

Example D2B:
复制代码 代码如下:

var myObject=new Object();
myObject.add=function(a,b){return a+b};
// myObject now has a property/a method named "add"
// and I can use it like below
myObject.add(1, 2);


而这个例子表明,当我们需要将一个自定义函数作为某个对象的属性时,这种函数申明方法是非常有用的,它更接近OOP的思想。


方法三:使用new运算符申明函数
复制代码 代码如下:

varName=new Function([param1Name, param2Name,...paramNName], functionBody);


Example D3:
复制代码 代码如下:

var add=new Function("a", "b", "return a+b;");
alert(add(3,4)); // produces 7

这里有两个参数a和b,以及一个函数体,返回a+b。同时请注意,new Function(……),这里使用的是大写Function,而不是小写function,这就表明,我们是要建立一个Function对象(回想下new Object()建立一个Object对象)。同时,我们也可以看出,前面的参数名和后面的函数体都是通过字符串形式传递(注意:它们都加了双引号)。我们可以有许多个参数,JavaScript会自动判别函数体,通常是离右边括号最近的那一个参数。当然,我们不一定非得将所有的代码写在同一行,我们可以分多行写,中间使用“+”或者“\”进行联接。“+”和“\”告诉我们,JavaScript将要在下一行寻找剩余的代码。

Example D3A
复制代码 代码如下:

var add=new Function("a", "b",
"alert" + // chop string using "+"
"('adding '+a+' and ' +b);\ // separate string using "\"
return a+b;");
alert(add(3,4)); // produces 7

当然,通过这种方式申明函数,函数体没有被解释(要直到运行时才被解释),这样便导致了性能的降低。为什么呢?请看下面的例子:

Example D3B
复制代码 代码如下:

function createMyFunction(myOperator)
{
return new Function("a", "b", "return a" + myOperator + "b;");
}
var add=createMyFunction("+"); // creates "add" function
var subtract=createMyFunction("-"); // creates "subtract" function
var multiply=createMyFunction("*"); // created "multiply" function
// test the functions
alert("result of add="+add(10,2)); // result is 12
alert("result of substract="+subtract(10,2)); // result is 8
alert("result of multiply="+multiply(10,2)); // result is 20
alert(add);


这个例子比较有趣,它在执行时可以通过传递参数(myOperator)分别创建了三个不同的Function对象。然后解释器在意图解释createMyFunction的时候,对return中的“运算符”具体是什么不清楚,从而无法解释,这样,性能自然打了折扣。
当然,当我们有特殊用途,如允许用户去创建他们自定义的函数时,我们可以采用这种函数申明方式,不过我们还是应尽量避免这样使用。
更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多