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高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
javascript滚轮控制模拟滚动条
Oct 19 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
JavaScript中的this妙用实例分析
May 09 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php注入实例
2006/10/09 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
python实现class对象转换成json/字典的方法
2016/03/11 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
如何基于Python按行合并两个txt
2020/11/03 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
大二自我鉴定范文
2013/10/05 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
中学生个人自我评价
2014/02/06 职场文书
投标邀请书范本
2015/02/02 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript