1. 函数的作用
函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时,只需要调用相应的代码即可。方法(method)一般为定义在对象中的函数。JavaScript 使用关键字 function 定义函数。
函数的作用:
- 功能的封装,直接调用,代码复用率提高
- 构建对象的模板(构造函数)
2. 函数的声明
- 函数声明
function 函数名(形参列表){
//函数体
}
- 函数表达式
var 函数名 = function(形参列表){
//函数体
}
-
函数声明与var变量声明类似,会进行提升
foo(); // 函数声明提升到代码的最前边,可以直接调用函数
function foo(){
console.log("hell world");
}
// 变量声明提升 变量声明提升到代码的前边,函数声明之后正常代码之前
console.log(a); //undefined 这里不报错,因为后边有var a的声明。变量的声明进行提升到前边
var a = 'hello';
console.log(a); //'hello'
3. 函数内部属性
只有在函数内部才能访问的属性。this也可以在函数外部进行使用。
- arguments
ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同,ECMAScript函数不介意传递参数的个数以及参数类型,这是因为函数的参数在函数内部是使用一个类数组对象来表示的。这个类数组对象就是arguments,它包含着传入函数中的所有参数。这个对象还有一个名为callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数。
function add(a,b){
return a+b;
}
add(22,42,12,44);
/*参数:接收实参的快捷方式
函数外部:实参保存的就是原始数据
函数内部:arguments保存真正的实参
*/
// arguments类数组对象
arguments = {
"0" : 22,
"1" : 42,
"2" : 12,
"3" : 44
};
callee 属性是 arguments 对象的一个成员,仅当相关函数正在执行时才可用。
callee 属性的初始值就是正被执行的 Function 对象。
// 实现匿名的递归函数
var sum = function (n) {
if (1 == n) {
return 1;
} else {
return n + arguments.callee(n - 1);
}
}
console.log(sum(6));//输出结果:21
- this
在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
-
在方法中,this 表示该方法所属的对象。
-
如果单独使用,this 表示全局对象。
-
在函数中,this 表示全局对象。
-
在事件中,this 表示接收事件的元素。
-
在显式函数绑定时,我们可以自己决定this的指向
4. IIFE
Immediately Invoked Function Expression,意为立即调用的函数表达式,声明函数的同时立即调用这个函数。
作用:
-
页面加载完成后只执行一次的设置函数。
-
将设置函数中的变量包裹在局部作用域中,不会泄露成全局变量。
(function foo(){
var a = 10;
console.log(a);
})();
为什么需要IIFE?
如果只是为了立即执行一个函数,显然IIFE所带来的好处有限。实际上,IIFE的出现是为了弥补JS(ES5)在作用域方面的缺陷:JS只有全局作用域(global scope)、函数作用域(function scope),从ES6开始才有块级作用域(block scope)。对比现在流行的其他面向对象的语言可以看出,JS在访问控制这方面是多么的脆弱!那么如何实现作用域的隔离呢?在JS中,只有function才能实现作用域隔离,因此如果要将一段代码中的变量、函数等的定义隔离出来,只能将这段代码封装到一个函数中。在我们通常的理解中,将代码封装到函数中的目的是为了复用。在JS中,当然声明函数的目的在大多数情况下也是为了复用,但是JS迫于作用域控制手段的贫乏,我们也经常看到只使用一次的函数:这通常的目的是为了隔离作用域了!既然只使用一次,那么立即执行好了!既然只使用一次,函数的名字也省掉了!这就是IIFE的由来。
5. 作用域
ES5中
函数作用域: 在 JavaScript函数中声明的变量,会成为函数的局部变量。
函数内部声明的变量,在函数外部不能访问。
全局作用域:函数之外声明的变量,会成为全局变量。
函数外部声明的变量,在函数内部可以访问。
当函数嵌套,在这个时候,内部函数与外部函数的这个变量就组成了闭包。
// ES5中没有块级作用域
{
var a = 10
}
console.log(a); // 10
//全局作用域:global/window/本文件内
var v1 = 10;
v2 = 20; // 所有末定义直接赋值的变量自动声明为拥有全局作用域
function foo() {
// 函数作用域、局部作用域
var a = 3;
console.log(v1, v2);
console.log(this);
}
foo()
console.log(a); // a is not defined
var a = 10;
function foo() {
// 当函数内部有变量a时,会产生局部作用域,外界全局作用域中的a不会对函数内部造成影响
// 如果把函数内部的变量a注释掉是,函数内部的a输出的就是全局作用域中的a
console.log(a); //undefined
var a = 100;
console.log(a); // 100
function fn() {
console.log(a); //undefined
var a = 200;
console.log(a); // 200
}
fn()
}
foo()
作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。
作用域链:
- 自由变量:当前作用域没有定义的变量,这成为自由变量 。自由变量的值如何得到,要到创建这个函数的那个父级作用域寻找,如果没有就一直向上级祖先元素寻找。
-
作用域链:一层一层向上寻找,直到找到全局作用域还是没找到,就宣布放弃。这种一层一层的关系,就是作用域链 。
6. 函数调用
-
函数名(实参列表);
-
函数名.call(执行环境对象,实参列表);
-
函数名.apply(执行环境对象,实参列表数组);
-
函数名.bind(执行环境对象)(实参列表);
注意:如果call和apply的第一个参数是null,那么this在node环境下指向的是global对象,在HTML中指向的是window对象。
总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。
7. 函数的应用
- 回调函数
//定义主函数,回调函数作为参数
function A(callback) {
callback();
console.log('我是主函数');
}
//定义回调函数
function B() {
// 模仿延时操作
setTimeout(() => {
console.log('我是回调函数');
}, 3000);
}
//调用主函数,将函数B传进去
A(B);
回调函数的作用:回调函数一般都用在耗时操作上面:因为主函数不用等待回调函数执行完,可以接着执行自己的代码。比如ajax请求,比如处理文件等。
- 作为返回值
var a = 10
function fn() {
var b = 20
function bar() {
console.log(a + b) //30
}
return bar
}
var x = fn(), // 执行fn() 返回的是bar
b = 200
x() //执行x,就是执行bar函数
8. 闭包
闭包就是指有权访问另一个函数作用域中的变量的函数。
MDN 上面这么说:闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。
闭包的生成有三个必要条件
-
函数嵌套函数
-
内部函数引用了外部函数中的数据(属性、函数)
-
参数和变量不会被回收
这样就形成了一个不会销毁的函数空间
-
产生一个闭包
创建闭包最常见方式,就是在一个函数内部创建另一个函数。
function func() {
var a = 1, b = 2;
function closure() {
return a + b;
}
return closure;
}
console.log(func()()); // 3
闭包的作用域链包含着它自己的作用域,以及包含它的函数的作用域和全局作用域。
- 闭包的用途
一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
function f1() {
var n = 999;
nAdd = function () { n += 1 }
function f2() {
console.log(n);
}
return f2;
}
var result = f1();
result(); // 999
nAdd();
result(); // 1000
-
使用闭包的注意点
- 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露,这是IE的BUG。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
- 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。多个子函数的scope都是同时指向父级,是完全共享的。因此当父级的变量对象被修改时,所有子函数都受到影响。
解决内存泄露问题:在使用完之后把变量设置为null