javascript定义函数的方法


Posted in Javascript onDecember 06, 2010

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义,也可以是一个表达式。

函数声明
在之前的教程中,你已经了解了函数声明的语法 :

function functionName(parameters) {
执行的代码
}

函数声明后不会立即执行,会在我们需要的时候调用到。
实例

function myFunction(a, b) {
return a * b;
}

函数表达式

JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中:

实例

var x = function (a, b) {return a * b};

在函数表达式存储在变量后,变量也可作为一个函数使用:
实例

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中,不需要函数名称,通常通过变量名来调用。

Function() 构造函数
在以上实例中,我们了解到函数通过关键字 function 定义。
函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

实际上,你不必使用构造函数。上面实例可以写成:

var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

函数提升(Hoisting)
在之前的教程中我们已经了解了 "hoisting(提升)"。
提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。
提升(Hoisting)应用在变量的声明与函数的声明。
因此,函数可以在声明之前调用:

myFunction(5);

function myFunction(y) {
  return y * y;
}

使用表达式定义函数时无法提升。
自调用函数
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ,则会自动调用。
不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式:

(function () {
  var x = "Hello!!";   // 我将调用自己
})();

当然也可以如下写:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
~(function(){})();
void function(){}();
(function(){}());

最常用的还是第一种方法。

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
函数可作为一个值使用
JavaScript 函数作为一个值使用:

function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3);

JavaScript 函数可作为表达式使用:

function myFunction(a, b) {
  return a * b;
}

var x = myFunction(4, 3) * 2;

函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数:

function myFunction(a, b) {
  return arguments.length;
}

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
  return a * b;
}

var txt = myFunction.toString();

函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。

以下是各种方法的示例代码

<html> 
<head></head> 
<body> 
<script type="text/javascript"> 
/*javascript定义函数(声明函数)可以有三种方法:正常方法、构造函数、函数直接量。*/ 
/*1.正常方法 function(param){}*/ 
function print(msg) 
{ 
document.write(msg,"<br/>"); 
} 
/*如果函数不包含return 语句,只执行函数体内语句,并返回undefined*/ 
/*2.构造函数方法:new Function()*/ 
var add1=new Function('a','b','return a+b'); 
/*3.函数直接量法,创建未命名函数,*/ 
var result = function(x,y){return x+y;}; 
/*也可以指定函数名*/ 
var result2 = function fact(x){if(x<1) return 1;else return x*fact(x-1)}; 
document.write('调用一般的方法:'); 
print("<hr/>"); 
print('调用构造函数方法:add1(5,6)'); 
print(add1(5,6)); 
print("<hr/>"); 
print("调用函数直接量法:result(3,4)"); 
var re =result(3,4); 
print(re); 
print("调用函数直接量法:result2(3)"); 
print(result2(3)); 
print("<hr/>"); 
print('函数作为数据使用'); 
/*函数可以作为数据使用*/ 
function add(x,y){return x+y;} 
function subtract(x,y){return x-y;} 
function multiply(x,y){return x*y;} 
function divide(x,y){return x/y;} 
function operate(operator,operand1,operand2) 
{ 
return operator(operand1,operand2); 
} 
//计算(2+3) + (4*5) 
var i = operate(add,operate(add,2,3),operate(multiply,4,5)); 
print('(2+3) + (4*5)='+i); 
print("<hr/>"); 
//使用函数直接量 
var operators = new Object(); 
operators['add'] = function(x,y){return x+y;} 
operators['substract'] = function(x,y){return x-y;} 
operators['multiply'] = function(x,y){return x*y;} 
operators['divide'] = function(x,y){return x/y;} 
operators['pow'] = Math.pow; 
function operate2(op_name,operand1,operand2) 
{ 
if(operators[op_name] == null) return "unknown operator"; 
else return operators[op_name](operand1,operand2); 
} 
//定义"hello" + "" + "world" 
var j = operate2("add","hello",operate2("add"," ","world")); 
var k = operate2("pow",10,2); 
print(j); 
print(k); 
print("<hr/>"); 
</script> 
</body> 
</html>

运行结果为:
调用一般的方法:
--------------------------------------------------------------------------------
调用构造函数方法:add1(5,6)
11
--------------------------------------------------------------------------------
调用函数直接量法:result(3,4)
7
调用函数直接量法:result2(3)
6
--------------------------------------------------------------------------------
函数作为数据使用
(2+3) + (4*5)=25
--------------------------------------------------------------------------------
hello world
100

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
javascript XML数据显示为HTML一例
Dec 23 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
javascript中的一些注意事项 更新中
Dec 06 #Javascript
JavaScript Accessor实现说明
Dec 06 #Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 #Javascript
javascript处理table表格的代码
Dec 06 #Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 #Javascript
菜鸟javascript基础资料整理2
Dec 06 #Javascript
菜鸟javascript基础整理1
Dec 06 #Javascript
You might like
改造一台复古桌面收音机
2021/03/02 无线电
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JQuery基础语法小结
2015/02/27 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python变量作用范围实例分析
2015/07/07 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
tensorflow如何批量读取图片
2019/08/29 Python
python设置随机种子实例讲解
2019/09/12 Python
Django实现文件上传和下载功能
2019/10/06 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
Linux Interview Questions For software testers
2013/05/17 面试题
双创工作实施方案
2014/03/26 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
开展读书活动总结
2014/06/30 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
党员个人总结范文
2015/02/14 职场文书
联村联户简报
2015/07/21 职场文书
六年级语文教学反思
2016/03/03 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript