/*
* [闭包]
* 》 函数执行形成一个私有的作用域，保护里面的私有变量不受外界的干扰，这种保护机制称之为”闭包“。
*
* =》市面上的开发者认为的闭包：形成一个不销毁的私有作用域（私有栈内存）才是闭包
*/
/*
// > 闭包： 柯理化函数
function fn(){
return function(){
}
}
var f = fn();*/
/*
// > 闭包：惰性函数
var utils = (function(){
return {
}
})(); */
// > 闭包项目实战应用
// ==> 真实项目为了保证js的性能（堆栈内存的性能优化），应该尽可能的减少闭包的使用（不销毁的堆栈内存是耗性能的）
// 1.闭包具有“保护”作用：保护私有变量不受外界的干扰
//> 在真是项目中，尤其是团队协作开发的时候，应当尽可能的减少全局变量的使用，以防止相互之间的冲突（“全局变量的污染”），那么此时我们完全可以把自己这一部分内容封装到一个闭包中，让全局变量转换为私有变量
/*
(function (){
var n = 12;
function fn(){
}
})()
*/
//> 不仅如此，我们封装类库插件的时候，也会把自己的程序都存放到闭包中保护起来，防止和用户的程序冲突，但是我们有需要暴露一些方法给客户使用，这样我们如何处理呢？
// 1.jQ这种方式：把需要暴露的方法抛到全局
// (function (){
// function JQuery(){
// //..
// }
// window.JQuery = window.$ = JQuery;// =>把需要供外面使用的方法，通过WINDOWW设置属性的方式暴露出去
// })
// JQuery();
// $();
// 2.Zepto这种方式:基于RETURN把需要供外面使用的方法暴露出去
// var Zepto = (function (){
// // ...
// // return{
// xxx: function(){}
// }
// })()
// Zepto.xxx()
// 2.闭包具有"保存"作用：形成不销毁的栈内存，把一些值保存下来，方便后面的调取使用
// ### 选项卡案例
/*for(var i = 0;i<tabList.length;i++){
tabList[i].onclick = function () {
changeTab(i);
// => 执行方法：形成一个私有的栈内存，遇到变量i，i不是私有变量，向上一级作用域查找（上级作用域WINDOW）
// => 所有的事件绑定都是异步编程（同步编程：一件一件事的做，当前这件事没有完成，下一个任务不能处理 / 异步编程：当前这件事没有彻底完成，不在等待，继续执行下面的任务），绑定事件后不需要等待执行，继续执行下一个循环任务，所有当我们单机执行方法的时候，循环早已经结束（让结束i等于循环最后的结果）
}
}*/
/*// =》 解决方案自定义属性
for(var i = 0;i<tabList.length;i++){
tabList[i].myIndex = i
tabList[i].onclick = function () {
changeTab(this.myIndex);
// => THIS: 给当前元素的某个事件绑定方法，当事件触发，方法执行的时候，方法中的THIS是当前操作的元素对象
}
}*/
// => 解决方案：闭包
for(var i = 0;i<tabList.length;i++){
tabList[i].onclick = (function (n) {
// => 让自执行函数执行，把执行的返回值（return）赋值给ONCLICK（绑定的是返回的小函数，点击的时候是小函数），自执行函数在给事件赋值的时候就已经执行了
var i = n;
return function(){
changeTab(i)
}
})(0)
}
/*
* i = 0; 第一次循环
* tabList[0].onclick = (function(n){
// 自执行函数执行形成一个私有作用域（不释放：返回的函数对应的堆地址被外面的事件占用了）
// 1.形参赋值 n = 0;
// 2.变量提升 var i;
var i = n;
return function(){ //点击的时候执行小函数
changTab(i)
}
})(i) // 把本次全局i（0）当作实参传递给n
*
* 总结： 循环三次，形参三个不销毁的私有作用域（自执行函数执行）,每一个不销毁的栈内存中都存储了一个私有变量i，而这个值分别是每一次执行传递进来的是全局的i（也就是：第一个不销毁的作用域存储的是0，第二个是1，第二个是2）：当我们点击的时候，执行返回的是小函数，遇到变量I，向它自己的上级作用域查找，找到的i值分别是0/1/2，达到了我们想要的效果。
*/
for(var i = 0;i<tabList.length;i++){
(function (n){
tabList[n].onclick = function(){
changeTab(i);
}
})(i)
}
/*
* 基于ES6来创建变量，是存在块级作用域的（类似于私有作用域）
作用域：（栈内存）
1.全局作用域
2.私有作用域（函数执行）
3.块级作用域（一般用大括号包起来的都是块级作用域），前提是ES6规范
*/
for (let i =0;i<tabList.length;i++){
tabList[i].onclick = function(){
changeTab(i)
}
}
/* 机制let解析机制
{
let i =0;
tabList[i].onclick = function(){
changeTab(i)
}
}
{
let i =1;
tabList[i].onclick = function(){
changeTab(i)
}
}
{
let i =2;
tabList[i].onclick = function(){
changeTab(i)
}
}*/
let a = 100;
{
let a = 100;
{
{
console.log(a)
}
// let a = 200; //保错
}
}
for(let i=0;i<5;i++){
//=>循环体中也是块级作用域，初始值设置的变量是当前本次块级作用域的变量（形成五个块级作用域，每个块级作用域中都有一个私有变量i，变量值就是每一个循环I的值）
}
// var obj = {}; //=>对象的大括号不是块级作用域
