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 3D球状导航的文章分类
Jul 06 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Javascript MD4
2006/12/20 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
webpack3之loader全解析
2017/10/26 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python 音频生成器的实现示例
2019/12/24 Python
python实现的Iou与Giou代码
2020/01/18 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
关键字final的用法
2013/10/02 面试题
关于毕业的广播稿
2014/01/10 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
财务会计岗位职责
2015/02/03 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android