JS自定义函数（3）

1. 变量的生命周期

生命周期规则

• 局部变量：函数运行时创建，函数运行结束后被删除

• 全局变量：页面加载时创建，页面关闭后被删除

经典案例：循环绑定事件的问题

<ul>
    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
<script>
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++){
    lis[i].onclick = function(){
        alert(i); // 总是弹出6（循环结束后的i值）
    }
}
</script>

2. 自执行函数（IIFE）

多种写法

(function(){alert('IIFE')}());        // 推荐
(function(){alert('IIFE')})();        // 推荐
!function(){alert('IIFE')}();         // 求反
+function(){alert('IIFE')}();         // 正号
-function(){alert('IIFE')}();         // 负号
~function(){alert('IIFE')}();         // 按位非
void function(){alert('IIFE')}();     // void操作符
new function(){alert('IIFE')}();      // new操作符

解决循环绑定问题

// 使用IIFE创建闭包
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
    (function(i){ // 创建函数作用域保存i的值
        lis[i].onclick = function(){
            console.log(i); // 正确的索引
        }
    })(i);
}

3. 闭包（Closure）

定义

• 能够读取其他函数内部变量的函数

• 定义在一个函数内部的函数

• 连接函数内部和外部的桥梁

特点

1. 函数内部可以引用外部的参数和变量

2. 参数和变量不会被垃圾回收机制回收（延长生命周期）

创建闭包

// 简单闭包
var num = 10;
function show(){
    console.log(num); // 访问外部变量
}

// 返回闭包函数
function show(){
    var num = 10;
    return function(){ // 闭包函数
        return num;
    };
}
var b = show();
console.log(b()); // 10

闭包案例对比

// 普通函数
function show(){
    var m = 1;
    function inner(){
        var n = 0;
        console.log(++n); // 每次都是1
        console.log(++m); // 每次递增
    };
    inner();
}

// 闭包函数
function show(){
    var m = 1;
    return function(){
        var n = 0;
        console.log(++n); // 每次都是1
        console.log(++m); // 保持状态，每次递增
    };
}
var closure = show();
closure(); // n=1, m=2
closure(); // n=1, m=3

闭包的优缺点

优点：

• 读取函数内部变量

• 让变量值始终保持在内存中

缺点：

• 比普通函数更占用内存

• 可能导致内存泄漏（尤其在IE浏览器中）

• 网页性能变差

4. 函数封装案例

1. 反转数组

// 方法一：正向遍历
function reverse(arr){
    var newArr = [];
    for(var i = 0; i < arr.length; i++){
        newArr[arr.length - i - 1] = arr[i];
    }
    return newArr;
}

// 方法二：反向遍历
function reverse(arr){
    var newArr = [];
    for(var i = arr.length - 1; i >= 0; i--){
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}

2. 冒泡排序

function sort(arr){
    for(var i = 0; i < arr.length - 1; i++){
        for(var j = 0; j < arr.length - i - 1; j++){
            if(arr[j] > arr[j + 1]){
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

3. 判断闰年

function isRunYear(year){
    var flag = false;
    if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
        flag = true;
    }
    return flag;
}

// 判断2月份天数
function getFebruaryDays(year){
    return isRunYear(year) ? 29 : 28;
}

4. 获取数组最大值

function max(arr){
    var max = arr[0];
    for(var i = 1; i < arr.length; i++){
        if(arr[i] > max){
            max = arr[i];
        }
    }
    return max;
}