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 相关文章推荐
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
jquery each()源代码
2011/02/14 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
python绘制玫瑰的实现代码
2020/03/02 Python
django model通过字典更新数据实例
2020/04/01 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
为什么使用接口?
2014/08/13 面试题
iostream与iostream.h的区别
2015/01/16 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
经贸专业毕业生求职信
2014/03/23 职场文书
校长四风对照检查材料
2014/09/27 职场文书
部队个人年终总结
2015/03/02 职场文书