您的位置：首页 > 职场人生

讲给Android程序员看的前端教程(29)——函数

2017-12-03 09:39 627 查看

版权声明

本文原创作者：谷哥的小弟

作者博客地址：http://blog.csdn.net/lfdfhl

本文视频教程：http://www.stay4it.com/my/course/37

JavaScript中的函数的功能非常丰富和强大，和我们熟悉的java不一样：JavaScript的函数还可以当做一个类使用，而且函数本身也是一个Function实例。嗯哼，来吧，我们开始学习JavaScript的函数。

定义函数的方式

JavaScript是弱类型语言；所以，在定义函数时既不需要声明函数的返回值类型，也不需要声明函数的输入参数类型。在此，介绍JavaScript中三种常用的函数定义方式。

函数声明式

语法格式如下：

function functionName(parameter){
statements
}

该方式是JavaScript中最常用的定义函数的方式。

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
function print(message){
document.writeln(message+"<br>");
var result="已经处理消息";
return result;
}
var msg=print("今天吃饭碰到一个漂亮的妹子");
document.writeln(msg+"<br>");
</script>
</body>
</html>

代码详解如下：

定义函数，请参见代码第9-13行。

函数名叫做print，接收一个输入参数，并向调用者返回结果值

调用函数并接收返回值，请参见代码第14行。

显示函数的返回值，请参见代码第15行。

匿名函数

语法格式如下：

function (parameter){
statements
};

在该方式中无须指定函数名，并且最终以英文分号;结尾。

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
var printMessage=function (message){
document.writeln(message+"<br>");
var result="已经处理消息";
return result;
};
var msg=printMessage("我的编号是9527");
document.writeln(msg+"<br>");
</script>
</body>
</html>

代码详解如下：

定义匿名函数并将其赋值给变量printMessage，请参见代码第9-13行

利用变量printMessage调用函数，请参见代码第14行

显示函数的返回结果，请参见代码第15行

Function定义匿名函数

语法格式如下：

new function ('parameter','function body;');

JavaScript中提供Function类用于定义函数。Function类的构造函数的参数个数不受限制，并且最后一个字符串参数是函数的执行体。

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
var printMessage=new Function("message","document.writeln(message+'<br>');");
printMessage("hello Function");
</script>
</body>
</html>

代码详解如下：

利用Function定义函数并将其赋值给变量printMessage，请参见代码第9行

该函数有一个输入参数message，并在函数体中显示该消息

利用变量printMessage调用函数，请参见代码第10行

函数提升

与之前我们讲过变量提升非常类似，在JavaScript中函数提升指的是：将函数的定义提升至<script> </script>元素的顶部。请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
print("hello javascript");
function print(message) {
document.writeln(message);
}
</script>
</body>
</html>

在该实例中，我们之所以可以先调用函数再定义函数，就是因为JavaScript自动将函数print的定义提升到了<script> </script>的顶部。所以，该示例等同于如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
function print(message) {
document.writeln(message);
}
print("hello javascript");
</script>
</body>
</html>

请注意：如果通过匿名方式定义函数并将函数赋值给变量，那么在该方式下依然会发生函数提升。但是，只提升被赋值的变量而函数定义本身不会被提升。

请看如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数提升</title>
</head>
<body>
<script type="text/javascript">
printMessage("hello javascript");
var printMessage = function(message) {
document.writeln(message);
}
</script>
</body>
</html>

运行，如上程序会报错。因为匿名函数的本身并没有被提升。所以，此时需将函数的调用置于匿名函数的声明之后。

嗯哼，关于JavaScript的函数的基础知识到此结束。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航