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压缩工具:X2JSCompactor
Jun 13 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
javascript简单写的判断电话号码实例
2017/05/24 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
中间件分为哪几类
2012/03/14 面试题
求职信范文大全
2014/05/26 职场文书
国庆节活动总结
2014/08/26 职场文书
批评与自我批评总结
2014/10/17 职场文书
关于安全的广播稿
2014/10/23 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
家长通知书家长意见
2015/06/03 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js