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实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
Vue的props父传子的示例代码
May 20 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
Python3实现的简单验证码识别功能示例
2018/05/02 Python
numpy返回array中元素的index方法
2018/06/27 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
服装电子商务创业计划书
2014/01/30 职场文书
运动会通讯稿500字
2014/02/20 职场文书
村委会换届选举方案
2014/05/03 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
见义勇为事迹材料
2014/12/24 职场文书
邹越演讲观后感
2015/06/15 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书