JS函数和变量

原文链接：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();