函数 function
2018-02-26 本文已影响0人
挥剑斩浮云
函数
JavaScript 有三种声明函数的方法。
1、function 命令
- function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面
function print(s) {
console.log(s);
}
- 上面的代码命名了一个print函数，以后使用print()这种形式，就可以调用相应的代码。这叫做函数的声明（Function Declaration）
2、函数表达式
- 除了用function命令声明函数，还可以采用变量赋值的写法
var print = function(s) {
console.log(s);
};
- 这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。
- 采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。
var print = function x(){
console.log(typeof x);
};
x
// ReferenceError: x is not defined
print()
// function
- 上面代码在函数表达式中，加入了函数名x。这个x只在函数体内部可用，指代函数表达式本身，其他地方都不可用。这种写法的用处有两个，一是可以在函数体内部调用自身，二是方便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因此，下面的形式声明函数也非常常见
var f = function f() {};
- 需要注意的是，函数的表达式需要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说，这两种声明函数的方式，差别很细微，可以近似认为是等价的
3、Function 构造函数
- 第三种声明函数的方式是Function构造函数
var add = new Function(
'x',
'y',
'return x + y'
);
// 等同于
function add(x, y) {
return x + y;
}
- 上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数
- 你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体
var foo = new Function(
'return "hello world"'
);
// 等同于
function foo() {
return 'hello world';
}
- Function构造函数可以不使用new命令，返回结果完全一样
- 总的来说，这种声明函数的方式非常不直观，几乎无人使用
常用定义函数
- 在
js中，使用函数前，必须使用function关键字来定义函数，函数常用方式有2种 - 1、不指定函数名的函数
- 2、指定函数名的函数
不指定函数名的函数
- 函数，就是语句的集体，即语句块
语法：
function(参数1,参数2,...参数n){
//函数体语句
}
说明：
定义函数必须使用function关键字
指定函数名的函数
- 指定函数名的函数是javascript中使用最广泛的方法，反而“不指定函数名的函数”用的比较少
语法：
function 函数名(参数1,参数2,...参数n){
//函数体语句
return 表达式;
}
说明：
定义函数必须使用function关键字
函数名必须是卫衣的，尽量通俗易懂，并且跟你定义的代码有关
函数可以使用return语句将某个值返回，也可以没有返回值
参数是可选的，可以不带参数，也可以带多个参数，吐过是多个参数的话，参数直接要用英文逗号隔开
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
//定义函数
function addNum(a,b)
{
var m=a+b;
return m;
}
//调用函数
var sum=addNum(1,2);
document.write("相加的结果是："+sum);
</script>
</head><body>
</body>
</html>
在浏览器预览效果
- 分析：
- 我们在定义函数的时候用到的参数，那就叫“
形参”，例如上面的a和b就是形参。我们在调用函数时，与形参对应的数据叫“实参。”其实“形参”和“实参”从名字上面来看就很好理解，所谓的形参就是“形同虚设”而到头来被其他数据替代掉的参数，实参就是实实在在的数据 - 使用形参和实参，需要注意
形参和实参是一一对应的。通常，在定义函数时使用了多少形参，那么在函数调用时也必须给出多少个参数 - 一句话：定义函数时的参数叫“
形参”，调用函数时的参数叫“实参”
调用函数
- 如果一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的
- 常用的函数调用方式有4种：
（1）简单调用；
（2）在表达式中调用；
（3）在事件响应中调用；
（4）通过链接调用；
一、简单调用 - JS函数简单调用，也被称为直接调用。该方法一般比较适用于没有返回值的函数。也就是说相当于执行函数中的语句集合
语法：
函数名(实参1,实参2,….实参n);
- 调用函数时的实参取决于定义函数时的形参
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
//定义函数
function alertSum()
{
//计算1+2+3+…+10的和
var sum=0;
for(var i=1;i<=10;i++)
{
sum=sum+i;
}
alert(sum);
}
//调用函数
alertSum();
</script>
</head>
<body>
</body>
</html>
在浏览器预览效果
二、在表达式中调用
- 在表达式中调用函数的方式，一般适用于有返回值的函数，然后函数的返回值参与表达式的计算。通常该方式还会和输出语句（如document.write()、alert()等）搭配使用
举例：判断给定的年份是否闰年
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
//定义函数
function isLeapYear(year)
{
//判断闰年的条件
if((year%4==0)&&(year%100!=0)||(year%400==0))
{
return year+"年是闰年";
}
else
{
return year+"年不是闰年";
}
}
//调用函数
document.write(isLeapYear(2015));
</script>
</head>
<body>
</body>
</html>
在浏览器预览效果
三、在事件响应中调用
-
JavaScript是基于事件模型的程序语言，页面加载、用户点击、移动光标等都会产生事件。当事件产生时，JavaScript就可以调用某个函数来针对这个事件做出响应
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function alertMes()
{
alert("老子果然最帅");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="提交"/>
</body>
</html>
在浏览器预览效果
我们点击按钮就会弹出对话框，效果如下：
在浏览器预览效果
- 这就是所谓的在事件响应中调用函数，这种方式非常实用
四、通过链接调用 - 函数除了可以在事件响应中调用外，还可以通过超链接来调用函数
语法：
<a href="javascript:函数名"></a>
- 说明：
- 在超链接中调用函数，指的就是在
a标签的href属性中使用“javascript:函数名”来调用函数。当用户点击该超链接时，就会执行调用的相应函数
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function mes()
{
alert("她：我爱helicopter。\n我：oh~my，= =?!");
}
</script>
</head>
<body>
<a href="javascript:mes()">表白对话</a>
</body>
</html>
在浏览器中的效果
- 当我们点击了超链接之后，就会调用函数
mes()，效果如下：
在浏览器中的效果
- 分析：这里使用转义字符“
\n”来使得alert()函数的内容换行
