一.JavaScript?函数
1.JavaScript函数的定义
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
JavaScript 使用关键字?function?定义函数，其后是函数名和括号 ()。
函数的声明格式
function? functionname(parameters){
? ? ? ? ? 执行代码
}
function--声明
functionname--函数名称
parameters-- 参数
{}--函数体
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
（参数1,参数2,参数3,......）
由于函数声明不是一个可执行语句，所以不以分号结束。
函数可以通过声明定义，也可以是一个表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript">
//声明 函数名称 参数
function app(a,b,c){
return a+b*c;//执行的代码
}
alert(app(5,10,2));//访问函数名称，参数值
</script>
</head>
<body>
</body>
</html>
2.函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中.
格式：var 变量名称?= function (参数1, 参数2) {执行的代码};
以上函数实际上是一个?匿名函数?(函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
在函数表达式存储在变量后，变量也可作为一个函数使用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数表达式</title>
<script type="text/javascript">
//定义一个变量 匿名函数
var x = function (a, b) {return a * b};//执行的代码
var z=x(5,8)//给变量x赋值
alert(z);//访问变量z
</script>
</head>
<body>
</body>
</html>
?3.function() 构造函数
函数可以通过关键字?function?定义。
函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。
var 变量?= new Function【函数构造器】(参数1, 参数2, 执行的代码);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>构造函数</title>
<script type="text/javascript">
//创建变量 声明 执行的代码
var shao=new Function("name","age","return name+'is'+age+'years old'");
alert(shao("xhaoshao",20));//访问
</script>
</head>
<body>
</body>
</html>
?4.函数提升（Hoisting）
提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。
提升（Hoisting）应用在变量的声明与函数的声明。
因此，函数可以在声明之前调用：
格式：
var 变量=函数名称(参数1,参数2);//
?? ??? ??? ?alert(变量);
?? ??? ??? ?function 函数名称(参数1,参数2){ ?//声明
?? ??? ??? ??? ?执行的代码
?? ??? ??? ?}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数提升</title>
<script type="text/javascript">
var shao=num(10,15);//定义一个变量名称
alert(shao);//调用/访问
function num(a,b){ //声明
return a+b;//执行代码
}
</script>
</head>
<body>
</body>
</html>
5.自调用函数
函数表达式可以 "自调用"。【自己调用自己的】
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自调用函数</title>
<script type="text/javascript">
(function shao(name){//声明
alert(name);//调用
})("xiaoshao");
</script>
</head>
<body>
</body>
</html>
?6.函数可作为一个值使用
JavaScript 函数作为一个值使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var res1 = (function test3(name) {//声明 变量
return "hello," + name;//执行代码
})("zhangsan");
alert(res1);//调用
</script>
</head>
<body>
</body>
</html>
?二.JavaScript?函数参数
函数显式参数(Parameters)与隐式参数(Arguments)
1.函数显示参数Parameters
functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显性参数</title>
<script type="text/javascript">
function shao(name,age) {//声明 参数
return name+","+age;//执行代码
}
alert(shao("xiaoshao",20));//调用
</script>
</head>
<body>
</body>
</html>
2. 函数隐式参数Arguments
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐式参数</title>
<script type="text/javascript">
function shao() {//声明
return arguments[0] + "," + arguments[1];//执行代码
}
alert(shao("xiaoshao", 23));//调用
</script>
</head>
<body>
</body>
</html>
?3.值传递参数
函数调用中的参数（parameter）是函数的参数（argument）。
JavaScript 参数通过值传递：函数只知道值，而不是参数的位置。
如果函数改变了参数的值，它不会改变参数的原始值。
参数的改变在函数之外是不可见的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>值传递参数</title>
<script type="text/javascript">
function test3(name, age) {
return name + "," + age;
}
var canshu1 = "王五"; //类型string
var canshu2 = 25; //类型number
alert(canshu1.charAt(1)); //canshu1变量就是对象
//var res1 = test3(canshu1, canshu2);//执行的代码
//alert(res1);//调用
</script>
</head>
<body>
</body>
</html>
?4.参数通过对象传递
在 JavaScript 中，对象引用是值。
正因如此，对象的行为就像它们通过引用来传递：
如果函数改变了对象属性，它也改变了原始值。
对象属性的改变在函数之外是可见的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象传递参数</title>
<script type="text/javascript">
function test3(name, age) {
return name + "," + age;
}
var canshu1 = "王五"; //类型string
var canshu2 = 25; //类型number
//alert(canshu1.charAt(1)); //canshu1变量就是对象
var res1 = test3(canshu1, canshu2);//执行的代码
alert(res1);//调用
</script>
</head>
<body>
</body>
</html>
?
三.函数的调用?
调用 JavaScript 函数：
在函数被定义时，函数内部的代码不会执行。
在函数被调用时，函数内部的代码会被执行。
调用函数通常也可以说“启动函数”或“执行函数”。
this?关键词
在 JavaScript 中，被称为?this?的事物，指的是“拥有”当前代码的对象。
this?的值，在函数中使用时，是“拥有”该函数的对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this的使用</title>
<script type="text/javascript">
var stu = {
name: "zhangsan",
testname: function() {
alert(this.name);
}
};
stu.testname();
</script>
</head>
<body>
</body>
</html>
?请注意?this?并不是变量。它属于关键词。您无法改变?this?的值。
JavaScript 函数有 4 种调用方式。
1.作为一个函数调用
调用一个函数作为一个全局函数，会导致?this?的值成为全局对象。
作为变量来使用 window 对象很容易使程序崩溃。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
function shao(x,y,z){
return x*y/z
}
var num=shao(10,20,5);
alert(num);
</script>
</head>
<body>
</body>
</html>
??
2.函数作为方法调用
以对象方法来调用函数，会导致?this?的值成为对象本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数调用</title>
<script type="text/javascript">
var shao={
x:10,
y:20,
z:function(){
return this.x+this.y;
}
}
var a=shao.z();
alert(a);
</script>
</head>
<body>
</body>
</html>
?
3.使用构造函数调用函数
如果函数调用前使用了?new?关键字, 则是调用了构造函数。
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的调用</title>
<script type="text/javascript">
function myobj() {
this.name = "zhangsan";
this.age = 23;
this.test1 = function() {
return this.name + "-" + this.age;
};
}
var obj = new myobj(); //构造函数的调用会创建一个新的对象
//新的对象会从函数中继承属性和方法
//alert(obj.name);
//alert(obj.age);
obj.name = "lisi";
var res = obj.test1();
alert(res);
</script>
</head>
<body>
</body>
</html>
?
4.作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call()?和?apply()?是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
call()
call()?方法是预定义的 JavaScript 方法。
它可以用来调用所有者对象作为参数的方法。
通过?call()，您能够使用属于另一个对象的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call函数的调用</title>
<script type="text/javascript">
function myFunction(a, b) {
return a * b;
}
var myfun;
myfun = myFunction.call(myfun, 8, 12.5);
alert(myfun);
</script>
</head>
<body>
</body>
</html>
?apple()
apply()?方法与?call()?方法非常相似。
apply()?方法接受数组中的参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function num(x, y) {
return x / y;
}
var a = [525, 25];
var shao = num.apply(this, a);
alert(shao);
</script>
</head>
<body>
</body>
</html>
call() 和 apply() 之间的区别
不同之处是：
- call()?方法分别接受参数。
- apply()?方法接受数组形式的参数。
- 如果要使用数组而不是参数列表，则?apply()?方法非常方便。