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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
javascript 事件绑定问题
Jan 01 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
jQuery限制图片大小的方法
May 25 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
js自定义事件代码说明
2011/01/31 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python实现多线程下载文件的代码实例
2014/06/01 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python3中详解fabfile的编写
2018/06/24 Python
Win8下python3.5.1安装教程
2020/07/29 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
助人为乐表扬信范文
2014/01/14 职场文书
夜不归宿检讨书
2014/02/25 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
入党自荐书范文
2015/03/05 职场文书
出生证明格式
2015/06/15 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript