私有的作用域

私有的作用域（只有函数执行会产生私有的作用域）

一般情况下，函数执行会形成一个新的私有的作用域，当私有作用域中的代码自行完成后，我们当前作用域都会主动的进行释放和销毁

当前私有作用域中的部分代码内存被作用于以外的东西占用了，那么当前的这个作用域就不能销毁

a、函数执行返回了一个引用数据类型的值，并且在函数的外面被一个其他的东西给接收了，这种情况下一班形成 私有作用域都不会销毁

// 1.返回引用数据类型 2.外面有变量接收
function fn(){
    var num = 100
    return function(){

        }
}
// fn执行形成的这个私有的作用域，就不能再销毁了
var f = fn()    

b、在一个私有的作用域中给DOM元素的事件绑定方法，一般情况下私有作用域也不销毁

// html
<div id="div1"></div>
// js
var oDiv = document.getElementById('div1')

~function () {
    oDiv.onclick = function() {

    }
}() // 当前执行函数形成的这个私有作用域也不销毁

c、（不立即销毁）下面情况属于不立即销毁，fn返回的函数没有被其他的东西占用，但是还需要执行一次，所以暂时不销毁，当返回的值执行完成后，浏览器会在空闲的时候把它销毁了

function fn(){
    var num = 100
    return function(){console.log(num)}
}

f()() // 首先执行fn，返回一个小函数对应的内存地址，然后紧接着让返回的小函数再执行

// ++i 和 i++
都是自身累加1，在和其他的值进行运算时候是有区别
i++： 先拿 i 的值进行运算，运算完成本身再累加 +1
++i：先本身累加 1 ，然后拿累加完成的结果去运算

 

 

练习题

function fn() {
    var i=10
    return function(n){
        console.log(n+(++i))
    }
}
var f = fn()
f(10)//21   i=11
f(20)//32   i=12
fn()(10)//10+11 21
fn()(20)//20+11 31

 

var num = 20
var obj = {
    num: 30,
    fn: (function(){
        this.num*=3
        num+=15
        var num = 45
        return function(){
            this.num*=4
            num+=20
            console.log(num)
        }
    })(num)
    
}

var fn = obj.fn  // window num = 60   var num = 45私有
fn() // window下的num=240 上级作用域 var num = 65       console.log(65)
obj.fn() // obj中的num = 120 num+=20往上级查找  65+=20  console.log(85)
console.log(window.num, obj.num) // 240 120

 

 

// html
<div id="btn">觉得我很帅的点赞 <button id="span" style="color: red;">0</button></div>

// script
var span = document.getElementById('span')
var oBtn = document.getElementById('btn')
oBtn.onclick = function () {
   var count = 0
   count++  
　 oBtn.innerHTML = count;

} // 这个方法每次点击都会形成一个私有的作用域，count重新赋值为0

// 1.全局变量 count = 0
var count = 0
oBtn.onclick = function(){
　　count++
　　span.innerHTML = count
} // 弊端：在项目中为防止全局变量之间的冲突，一般是禁止或者减少使用全局变量

// 2.自己形成一个不销毁的私有作用域，来保存需要累加的数字

~function (){
  var count = 0
  oBtn.onclick = function () {
    count++
    span.innerHTML = count
  }
}()
// 3.onclick点击形成一个自执行函数
oBtn.onclick = (function(){
　　var count = 0
　　return function(){
　　　　count++
　　　　span.innerHTML = count
　　}
})()

// 4.自定义属性
oBtn.count = 0
oBtn.onclick = function(){
　　span.innerHTML = ++this.count
}

// 5.++运算强制类型转换
oBtn.onclick = function(){
　　++span.innerHTML
}