原文链接:http://www.cnblogs.com/daysme/p/6127088.html
原文博客:http://www.cnblogs.com/daysme
JS函数和变量 函数:
函数是由事件或者当它被调用时执行的可重复使用的代码块。 是一个独立的代码块,实现特定功能模块。 函数他不进行调用触发的话,不会自己主动执行。 像ATM机一样,不去取钱的话不会自己吐钱。 函数分为系统函数和自定义函数。
系统函数
比如:alert(),当浏览器看到alert(1)时就会直接弹出1。
系统函数是系统固有的,预定义的。 自定义函数
当系统函数不能满足要求时,需要自己定义函数。 创建自定义函数: 通过 function 关键字创建。
语法一:
1
2
3
|
function 函数名(){
执行的代码
} |
语法二:
1
2
3
|
var 函数名= function (){
执行的代码
} |
不能自定义系统函数。 当调用该函数时,会执行函数内的代码。 可以在某事件发生的时候直接调用函数,如点击时、鼠标移入时。 有名函数和无名函数:
都不会自动执行。 无名函数:
直接定义一个无名函数而不调用就会报错:
1
2
3
|
function (){
alert(1)
} |
而这样如果定义并用调用就不会报错:
1
2
3
|
btn.onclick= function (){
alert(1)
} |
调用函数的方式:
window 调用(直接调用),如: test() ,不能没有括号。
定时器调用
事件调用 函数也遵循脚本解析规则:既然由上到下,下面的函数为什么还会执行? 因为所有的函数会被提(相当于移动代码块)到脚本最前面。
1
2
3
4
|
test() function test(){
alert(1)
} |
函数名后面的括号: 在调用和定义函数的时候,可以向其传递值,这些值被叫做参数。个数不限,多个由逗号隔开。
参数的声明方式: 声明函数时的参数叫形式参数,形参,下面的形参是a,b。
1
2
3
4
|
function test(a,b){
alert(a+b)
}
test(1,2) |
调用函数时传入的参数叫实际参数,实参,上面的实参是1,2,运行过程为1+2,结果为3。 参数变量:
1
2
3
4
5
6
7
8
|
function test(a){
//相当于在函数内声明变量a
//var a;
alert(a)
} //如果调用时不传入值,不会报错: //如调用上例函数: test() //弹出 undefined
|
return 每个函数自带的。可以打断函数的运行并返回一个值。 打断函数:
1
2
3
4
5
6
|
function test(){
alert(1)
return
alert(2)
} test() //只会弹出1,不弹出2
|
打断函数并返回值:
1
2
3
4
5
6
|
function test(){
alert(1)
return "断线了"
alert(2)
} console.log(test()) //只会弹出1,不弹出2,在控制台输出test()返回的“断线了”。
|
return 默认返回 undefined 。 return 只能在一个函数里使用一次,多个return只会返回第一个return值。 函数中的内置对象:
arguments 对象包含了函数调用的参数数组, arguments.length 相当于实参个数。 函数名.length 形参个数,函数名无括号(如果有括号就立即执行了)。
1
2
3
4
5
6
|
function test(a,b,c){
console.log(arguments) //数组
console.log(arguments.length) //实参个数
console.log(test.length) //形参个数
} test(1,2) |
上面的调用输出:
[1,2] //数组
2 //实参个数
3 //形参个数 event ,也是函数的内部对象。
1
2
3
4
5
6
|
var oDiv=document.getElementsByTagName( "div" );
oDiv[0].onclick= function (a){
console.log(a); //点击div时输出了一些事件信息。输出 MouseEvent {...}
//为什么输出MouseEvent而不是其他?因为MouseEvent是函数的第一个内置对象。
console.log(arguments); //输出 [MouseEvent]
} |
this 谁触发的事件,this就是谁。
1
2
3
4
|
var oDiv=document.getElementsByTagName( "div" );
oDiv[0].onclick= function (a){
console.log( this ); //输出oDiv[0],即第一个div。
} |
为什么是oDiv[0]而不是onclick?
如果谁打了你一下,你会问:“谁打了我?”
然后我告诉你:“手打了你。”
你肯定也不想得到这个答案吧。
你想得到一个真实的对象。
那js也不是拿来搞笑的。
js和你一样,需要得到一个具体的对象。 局部变量和全局变量 以函数为分界线,定义在函数里面的的变量是局部变量。定义在函数外面的变量是全局变量。
1
2
3
4
5
6
|
test() function test(){
var a=1;
console.log(a) //输出1
} console.log(a) //输出错误,外面的a不能使用不是test里面的a
|
函数内的变量调用完成后会删除。
1
2
3
4
5
|
var a=1;
function test(){
console.log(a) //输出1
} console.log(a) //输出1
|
函数外的变量只有当页面关闭后会被删除。
1
2
3
4
5
6
|
function test(){
//var a; //1
console.log(a); //2因为函数内3处有 var 关键字声明;所以声明(只声明不赋值,赋值依然在3处)会被执行在函数顶部1位置。
var a=1; //3
} test(); //输出 undefinde;
|
例二
1
2
3
4
5
6
7
8
9
|
var a=10;
function fn(){
//var a; //1 因为下面3处有var关键字声明变量a;所以var会被提入函数最顶部声明(但不赋值,赋值依然在3处)。
var b=10;
console.log(a); //2 输出 undefined
console.log(b);
var a= "123" ; //3 这里有var
} fn(); |