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语句可以不以;结尾的烦恼
Mar 08 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
解析vue中的$mount
Dec 21 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 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环境――Appserv
2006/12/13 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
js实现打字小游戏
2019/12/17 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Python用input输入列表的实例代码
2020/02/07 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
驾驶员岗位职责
2014/01/29 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
企业安全标语
2014/06/07 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
商品陈列协议书
2014/09/29 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python