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 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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
实现树状结构的两种方法
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
linux下php上传文件注意事项
2016/06/11 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
Python数据类型详解(四)字典:dict
2016/05/12 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python实现的科学计算器功能示例
2017/08/04 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
解决python删除文件的权限错误问题
2018/04/24 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
出国留学自荐信
2013/10/25 职场文书
课例研修方案
2014/05/31 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
分家协议书范本
2016/03/22 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS