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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
javascript multibox 全选
Mar 22 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JavaScript中的继承之类继承
May 01 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
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
一个PHP日历程序
2006/12/06 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
文本加密解密
2006/06/23 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Python字典操作简明总结
2015/04/13 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
keras 多gpu并行运行案例
2020/06/10 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
董事长助理岗位职责
2014/02/18 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js