javascript中的闭包概念与用法实践分析

function a() {
 var temp = 100;
 function b() {
  console.log(++temp);
 }
 return b;
}
var fn = a(); // 此时fn属于全局的函数。
fn();// 101
fn();// 102

function a() {
 var temp = 100;
 return function() {
  console.log(++temp);
 }
}
var fn = a();
a = null;
fn();// 101
fn();// 102
fn = null; // 调用完毕后要，要解除对内部匿名函数的引用，以便释放内存

<ul>
 <li>0</li>
 <li>1</li>
 <li>2</li>
</ul>

var ul = document.querySelector('ul');// 为了演示方便，直接用html5的api
var lis = ul.children;
for(var i=0; i< lis.length; i++) {
 lis[i].οnclick=function(){
  console.log(i);
 }
}

for(var i=0; i< lis.length; i++) {
 lis[i].οnclick=function(num){
  return function(){
   console.log(num);
  }
 }(i)
}

'use strict'
let ul = document.querySelector('ul');
let lis = ul.children;
for(let i=0; i< lis.length; i++) {
 lis[i].οnclick=function(){
   console.log(i);
 }
}

/* createFunctions方法返回一个函数数组 result */
function createFunctions() {
 var result = new Array();
 for(var i=0; i<10;i++) {
  result[i] = function() {
   return i;
  }
 }
 return result;
}
var arr = createFunctions();
// 我们拿到并输出第一个数组元素函数的返回值
var fn0 = arr[0];
var varible0 = fn0();
console.log(varible0); // 返回的是 10
// 我们拿到并输出第二个数组元素函数的返回值
var fn1 = arr[1];
var varible1 = fn1();
console.log(varible1); // 返回的是 10
// 可见闭包保存的是这个变量i对象，i的最终结果是10

function createFunctions() {
 var result = new Array();
 for(var i=0; i<10;i++) {
  result[i] = (function(num) {
   return function(){
    return num;
   }
  })(i)
 }
 return result;
}
var arr = createFunctions();
// 我们拿到并输出第一个数组元素函数的返回值
var fn0 = arr[0];
var varible0 = fn0();
console.log(varible0); // 返回的是 0
// 我们拿到并输出最后一个数组元素函数的返回值
var fn9 = arr[9];
var varible9 = fn9();
console.log(varible9); // 返回的是 9

var color = 'black';
var person = {
 color:"yellow",
 getColorFun1:function(){
  return function(){
   return this.color;
  }
 },
 getColorFun2:function(){
  var that = this;
  return that.color;
 }
}
console.log(person.getColorFun1()()); // 指向了 black （备注：fn()()这种写法只限于非严格模式下）
console.log(person.getColorFun2()); // 指向了yellow

window.onresize = throttle(function(){
  var width = window.innerWidth || document.documentElement.clientWidth;
  console.log(width);
},300); // 调节浏览器窗口，在松手后的0.3s后执行
function throttle(fn,delay) {
   var timer = null;
   return function() {
     clearTimeout(timer);
     timer = setTimeout(fn,delay);
   }
}

var Person = (function(){
 var haha = 0; // 这里表示可以定义一能够使用到的参数
 return function(name, age){
  ++ haha; // 这里表示去使用定义到的参数,虽然在此处并没有实际意义。
  this.name = name;
  this.age = age;
 };
})();
Person.prototype = {
 say : function(){
  console.log(this.name + ' say hi');
 }
}
var p1 = new Person('zhang san', 10);
var p2 = new Person('li si', 20);
console.log(p1.name); // zhang san
p1.say(); // zhang san say hi
p2.say(); // li si say hi