JavaScript 函数

函数

1 了解函数

函数就是把特定功能的代码抽取出来并进行封装，用来重复执行一些功能，并起个名字（函数名）。函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。

使用函数的好处，为什么要使用函数？

1.函数可以重复某一部分代码（通过函数名调用）；

2.使程序变得更简短而清晰。

3.有利于程序维护；

什么时候需要函数？

1.当相同的代码出现多次时；

2.当需要提取公共代码时。

2 函数的创建方式

2.1 关键字声明（声明式）
格式：function 函数名(){} 。

function sum(){}

函数的声明会提前 ==> 解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）;

2.2 函数表达式(赋值式)

var sum = function(){} function(){} 没有函数名，故为匿名函数。

2.3 Function构造函数（不推荐）
var sum = new Function(‘num1’,’num2’,’return num1+num2’);

3 函数的执行

3.1 手动调用

在需要执行函数的地方写出函数名，如sum(); 。

3.2 事件驱动

格式：元素.事件=函数名;

button.onclick = sum;

需要注意的是 “()”表示函数立即执行，如果不需要立即执行函数则不需要加“()”，此时为点击button触发‘onclick’事件时，才执行sum函数，而不是浏览器编译到这个代码时立即执行函数。

4 常见事件触发函数

4.1 onclick

点击事件，事件的发生都是一瞬间的事情。

4.2 ondblclick

双击事件

4.3 onmouseover

鼠标移入事件

var box = document.getElementById(‘box’);

box.onmouseover = function(){

box.style.backgroundColor:;

}

box.style.backgroundColor:;  为box的style属性中的background-color赋值，其中background-color改为驼峰命名法。

4.4 onmouseout

鼠标先移入，再移开才触发事件。

4.5 onchange

内容改变，且表单失去焦点时，触发事件（一般用于表单元素）。

4.6 onkeyup

键盘按键弹起事件

5 内置函数

JavaScript内部预先定义的函数，如 alert()  /  parseInt()  /  typeof()  /  Math.random() .....

6 声明提前

声明提前，浏览器在逐行执行代码之前，会预存变量声明和函数声明。

var a = 10;  这行代码中的变量声明为 var a ;

function show(){} 声明的方法创建函数，此函数声明为 function show(){}；

var sum = function(){} 赋值的方法创建函数，此函数声明为 var sum；

声明但没有赋值的变量默认为undefined。

7 作用域

俗称“使用范围”，即能够使用某个变量的范围，分“全局作用域”和”局部作用域”。

7.1 全局变量与局部变量

全局变量：在全局作用域下声明的变量，可以在任意地方中使用，作用范围比较大，我们称为全局变量。

局部变量：在函数内（局部作用域）声明的变量，只在函数中可以使用，作用范围较小，我们称之为局部变量。

var a = 10;

function add(){

var b = 5;

}上述代码中，a为全局变量，b为局部变量。

7.2 变量的访问规则（重点）

7.2.1 就近原则

1.使用变量a时先从当前函数查找，如果当前函数有变量a则使用;

2.如果当前函数无变量a,则往父级函数查找，如果找到则使用，并停止查找;

3.如果在父级函数还是无法找到，则继续往上一层函数查找，以此类推，直到最顶层window(全局作用域)，如果还是没找到，则报not defined错误。

7.2.2 作用域链

每个函数在定义时就形成了局部作用域，如果存在多个函数嵌套，他们之间就会建立起某种联系，直到全局作用域，这种联系称之为作用域链。当函数访问变量时，根据就近原则在这个作用域链中从内到外查询变量。

7.3 变量面试题

var a = 10;

function show(){

var b =20;

console.log(a + b);

var a = 30;

}

show();  //为NaN

考点：

1.变量查找规则；

2.声明提前：提前到当前所在作用域；

3.顺序执行。

因为console.log(a+b) 与 var a =30 在同一个作用域中，根据就近原则，会访问var a = 30，但由于var a = 30在console.log(a+b)的下面，所以只能读取浏览器预存的变量声明var a； 由于没有赋值，所以此时a= NaN。

8 函数的参数

8.1 形参

函数声明时的参考数，function sum(a){}; 此处的a为形参。

8.2 实参

函数调用时的参考数。sum(10); 此处10为实参。需要注意的时，在函数内部会自动把形参声明为局部变量；实参为变量的赋值。

如 function sum(a){

console.log(a);

}

sum(10)；此时函数执行,console显示为10，因为在函数内部自动执行了代码var a = 10;  。

还有就是形参和实参的数量可以不同。

8.3  arguments

arguments为函数内隐藏的对象（是一个类数组），保存着实参的信息。 参看案例13“封装一个函数计算所有传入参数的和”。

8.3.1 arguments.length

length属性为argument的长度，其中arguments.length为实参的长度，可以作为数值，即实参中有多少个数值。

8.3.2 arguments[]

arguments[索引值]，用于调用实参中的某一个数组，需要注意的时索引值是从0开始，0,1,2,3....即arguments.length= 15时，arguments索引值范围是0-14。