JS自定义函数（3） - 教程

1. 变量的生命周期

生命周期规则

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

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

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

123456
var lis = document.getElementsByTagName("li");
for(var i = 0; i

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 = 0; i--){
newArr[newArr.length] = arr[i];
}
return newArr;
}

2. 冒泡排序

function sort(arr){
for(var i = 0; i  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  max){
max = arr[i];
}
}
return max;
}