04、JavaScript-函数
2017-04-27 本文已影响134人
EndEvent
每天一句：想说会有多少人问自己一下几个问题“你这辈子到底要什么，要做怎么样的人？你现在能够做什么？你正在做什么？你现在做的事情能实现你的人生目标吗？你有真正努力过吗？”答案告诉自己就行了...
JavaScript是一种基于对象的脚本语言，JavaScript代码的复用单位是函数。
一、函数的定义
- 定义命名函数
// 函数调用
sayHello();
// 函数定义
function sayHello() {
alert('hello');
}
注意: 在同一个<script>元素中，JavaScript允许先调用函数，然后再定义该函数; 但在不同的<script>元素时，必须先定义函数再调用该函数；
- 定义匿名函数
// 无需指定函数名，
var fn = function(){
document.writeln('匿名函数: hello');
}; // 注意，结尾的分号
// 函数调用
fn();
// 不是赋值，而是调用fn函数
oBt.onclick = fn();
// 赋值
oBt.onclick = fn;
二、函数的参数
- 形参: 声明函数时括号内定义的变量
- 实参: 函数调用时传递的参数
- arguments: 函数内部隐藏的对象，保存着实参的信息
- argunments是一个数组
- length: 保存着实参的数量
var a = 10;
var b = 20;
// 函数的参数x/y即是为形参 [形参的改变是不会影响到实参]
function sum(x, y){
document.writeln(arguments.length);
document.writeln(x+y);
}
// 函数调用，a和b为实参
sum(a, b);
// 形参个数2个，那么x=10,y=20, 30和40被忽略
sum(10, 20, 30, 40);
三、函数的返回值
- return 终止函数的执行，return后的代码不会执行;
- return 后面有值，则将这个值返回到只执行的地方;
var str = sayHello('LiMing');
alert(str);
// 函数带有返回值
function sayHello(name){
return 'hello ' + name;
}
四、递归函数
递归函数是一种特殊的函数，递归函数允许在函数定义中调用函数本身；【递归一定要向已知点追溯】
function fn1(num){
document.writeln(num);
if(num == 1){
return;
}
// 函数内部，调用函数本身
fn1( num - 1);
}
fn1(10);
递归函数应用:
// 10阶乘: 10 * 9 * 8 * 7 * 6 ... * 1
function test(num){
// 10 * test(9) ==> 10 * 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1
// test(9): 9 * test(8); ==> 9 * 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1
// test(8): 8 * test(7); ==> 8 * 7 * 6 * 5 * 4 * 3 * 2 * 1
// test(7): 7 * test(6); ==> 7 * 6 * 5 * 4 * 3 * 2 * 1
// test(6): 6 * test(5); ==> 6 * 5 * 4 * 3 * 2 * 1
// test(5): 5 * test(4); ==> 5 * 4 * 3 * 2 * 1
// test(4): 4 * test(3); ==> 4 * 3 * 2 * 1
// test(3): 3 * test(2); ==> 3 * 2 * 1
// test(2): 2 * test(1); ==> 2 * 1
// test(1): 1
// 递归的停止条件
if(num == 1){
return 1;
}
// 调用函数本身
return num * test(num-1);
}
// 函数调用
alert( test(4) );
五、作用域(解析过程)
域: 空间、区域、范围;
作用: 读、写;
作用域: 变量、函数的读写范围；
- 全局变量、全局函数、局部变量、局部函数
- 浏览器: JS解析器
- a、预解析(var function 参数…)
- 所有变量，在真正运行代码之前，都给赋值了未定义的值; a = 未定义; - 所有的函数，在正式运行之前，都是整个函数块; fn1 = function(){…}; - 遇到重名的: 只留下一个; 变量和函数重名时，只留下函数;- b、逐行解析 【即是修改上面仓库中的值】
表达式: = + - / % ++ ... 例如: a = 20;
注意:
1、函数就是一个作用域，也即是会有JS的预解析过程!!!
2、函数: 既有全局变量，又有局部变量，局部变量优先;
案例1:
1 var a = 1;
2 function fn1(){
3 alert(a);
4 a = 2;
5 }
6 fn1();
7 alert(a);
a、预解析
第1行: var a;
第2行: fn1 = function(){ alert(a); a = 2; }
b、逐行解析
第1行: a = 1;
第6行: fn1()函数调用 【函数也是一个作用域】
a、预解析
无任何操作
b、逐行解析
第3行: alert(a); // 输出1
第4行: a = 2;
第7行: alert(a); // 输出2
案例2:
1 var a = 1;
2 function fn1(){
3 alert(a);
4 var a = 2;
5 }
6 fn1();
7 alert(a);
a、预解析
第1行: var a;
第2行: fn1 = function fn1(){ alert(a); var a = 2; }
b、逐行解析
第1行: a = 1;
第6行: fn1();函数调用 【函数也是一个作用域】
a、预解析
第4行: var _a; // _a表示局部变量
b、逐行解析
第3行: alert(_a); // 局部变量优先原则，输出的是局部变量； 输出undefined
第4行: _a = 2;
第7行: alert(a); // 输出1
案例3:
1 var a = 1;
2 function fn1(a){
3 alert(a);
4 a = 2;
5 }
6 fn1();
7 alert(a);
a、预解析
第1行: var a;
第2行: fn1 = function fn1(){ alert(a); var a = 2; }
b、逐行解析
第1行: a = 1;
第6行: fn1();函数调用 【函数也是一个作用域】
a、预解析
第2行: var _a; // 参数a即是声明一个局部变量
b、逐行解析
第3行: alert(_a); // 局部优先原则，输出undefined
第4行: _a = 2;
第7行: alert(a); // 输出1
案例4:
1 alert(a);
2 var a = 1;
3 function a(){
4 alert('1--我是函数a');
5 }
6 alert(a);
7 var a = 3;
8 alert(a);
9 function a(){
10 alert('2--我是函数a');
11 }
12 alert(a);
a、预解析
第2行: var a;
第3行: a = function(){ alert('1--我是函数a'); }
第7行: var a;
第9行: a = function(){ alert('2--我是函数a'); }
// 变量和函数重名时，只留下函数;
第行:
b、逐行解析
第1行: alert(a); // 输出: function(){ alert('2--我是函数a'); }
第2行: a = 1;
第6行: alert(a); // 输出 1
第7行: a = 3;
第8行: alert(a); // 输出 3
第12行: alert(a); // 输出 3
