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创建和操作表格的函数集合
May 07 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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中set_include_path()函数相关用法分析
2016/07/18 PHP
Javascript实现的分页函数
2006/12/22 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
React组件生命周期详解
2017/07/03 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python smallseg分词用法实例分析
2015/05/28 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Django中Model的使用方法教程
2018/03/07 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python3 使用traceback定位异常实例
2020/03/09 Python
如何完美的建立一个python项目
2020/10/09 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
公司开业庆典主持词
2014/03/21 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
招商引资工作汇报
2014/10/28 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
一年级语文教学随笔
2015/08/14 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python