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


Posted in Javascript onDecember 04, 2009

一、申明函数的三种方法 (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中的“运算符”具体是什么不清楚,从而无法解释,这样,性能自然打了折扣。
当然,当我们有特殊用途,如允许用户去创建他们自定义的函数时,我们可以采用这种函数申明方式,不过我们还是应尽量避免这样使用。

Javascript 相关文章推荐
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
php与js的区别是什么
Aug 05 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
javascript 跳转代码集合
Dec 03 #Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 #Javascript
javascript json 新手入门文档
Dec 03 #Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 #Javascript
33种Javascript 表格排序控件收集
Dec 03 #Javascript
javascript 面向对象全新理练之原型继承
Dec 03 #Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
Yii分页用法实例详解
2014/12/04 PHP
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
js实现黑白div块画空心的图形
2018/12/13 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python中的数据结构比较
2019/05/13 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python中if嵌套命令实例讲解
2021/02/25 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
情侣吵架检讨书
2014/02/05 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
静心口服夜广告词
2014/03/20 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
个人党性分析材料
2014/12/19 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
java项目构建Gradle的使用教程
2022/03/24 Java/Android