JavaScript学习笔记(十一) 闭包

function scope() {
    if (true) {
        var i = 0
        for (var j = 1; j <= 5; j++) {
            i = i + j
        }
        console.log(j)
    }
    console.log(i)
    ~function() { // 立即执行函数
        console.log(i)
      console.log(j)
    }()
}
scope()
/*
 * 执行结果：
 * 6
 * 15
 * 15
 * 6
**/

function hoisting() {
    console.log(i) // 声明提前，但赋值并不会提前
    var i = 'hello'
    console.log(i)
}
hoisting()
/*
 * 执行结果：
 * undefined
 * hello
**/

var counter = (function() { // 立即执行函数，返回一个对象
    var value = 0 // 私有属性，无法直接访问
    var changeBy = function(val) { value += val } // 私有方法，无法直接访问
    // 以下多个嵌套函数共享一个作用域链
    return {
        getValue: function() { return value },
        increase: function() { changeBy(+1) },
        decrease: function() { changeBy(-1) }
    }
})()
console.log(counter.getValue())
counter.increase()
console.log(counter.getValue())
counter.decrease()
console.log(counter.getValue())
/*
 * 执行结果：
 * 0
 * 1
 * 0
**/

function memory(f) {
    // 缓存处理结果
    var cache = {}
    return function() {
        // 将传入的参数作为键
        var key = arguments.length + Array.prototype.join.call(arguments, ',')
        if (key in cache) { // 如果值在缓存，直接读取返回
            return cache[key]
        } else { // 否则执行计算，并把结果放到缓存
            return cache[key] = f.apply(this, arguments)
        }
    }
}
var factorial = function(n) { return (n <= 1) ? 1 : n * factorial(n - 1) }
var factorialWithMemory = memory(factorial)

function test() {
    var array = []
    for(var count = 0; count < 5; count++) {
        array[count] = function() { console.log(count) }
    }
    return array
}
var result = test()
result[0]()
result[1]()
result[2]()
result[3]()
result[4]()
/*
 * 执行结果：
 * 5
 * 5
 * 5
 * 5
 * 5
**/
/*
 * 结果分析：
 * 在调用数组中的函数时，由于需要打印变量 count 的值，所以沿着这些函数的作用域链往上查找
 * 最终在外层函数 test 的变量对象中找到，但是此时局部变量 count 的值已经变成 5
**/

function test() {
    var array = []
    for(var count = 0; count < 5; count++) {
        array[count] = function(value) { // 立即执行函数
            return function() { console.log(value) }
        }(count)
    }
    return array
}
var result = test()
result[0]()
result[1]()
result[2]()
result[3]()
result[4]()
/*
 * 执行结果：
 * 0
 * 1
 * 2
 * 3
 * 4
**/
/*
 * 结果分析：
 * 同样道理，由于需要打印变量 value 的值，所以在调用数组中的函数时需要往上查找作用域链
 * 但是此时在上层函数对应的变量对象中即可找到 value，并且 value 的值等于当时传入的 count 的值
**/

var test = {
  value: 0,
    getValue: function() {
        return function() { console.log(this.value) }
    }
}
var result = test.getValue()
result()
/*
 * 执行结果：
 * undefined
**/
/*
 * 结果分析：
 * 在调用闭包函数时，是在全局作用域的环境下执行的，因此 this 指向全局对象
**/

var test = {
  value: 0,
    getValue: function() {
        return function() { console.log(this.value) }.bind(this)
    }
}
var result = test.getValue()
result()
/*
 * 执行结果：
 * 0
**/
/*
 * 结果分析：
 * 使用 bind 函数将 this 的值绑定为 test 对象
**/