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 函数对象的多重身份
Jun 28 Javascript
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
简单说说angular.json文件的使用
Oct 29 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
JavaScript进制转换实现方法解析
2020/01/18 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python基础练习之几个简单的游戏
2017/11/10 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
交通安全标语
2014/06/06 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2015年党小组工作总结
2015/05/26 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
el-table-column 内容不自动换行的解决方法
2022/08/14 Vue.js