作用域与this

作用域

let a,i//i是全局变量
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {//点击执行回调
        e.preventDefault()
        alert(i)//10：解决办法：将i变为块级作用域
    })
    document.body.appendChild(a)
}

if(true){//块级作用域
    let x=100
}
console.log(x)//报错

let i
for(i=1;i<=2;i++){setTimeout(function(){console.log(i)},0)}//3

 

闭包

作用域的两种特殊情况

// 自由变量示例 —— 内存会被释放
let a = 0
function fn1() {
    let a1 = 100

    function fn2() {
        let a2 = 200//执行完后，变量都释放了

        function fn3() {
            let a3 = 300
            return a + a1 + a2 + a3
        }
        fn3()
    }
    fn2()
}
fn1()

//闭包 函数作为返回值 —— 内存不会被释放
// 函数作为返回值
function create() {
    const a = 100//a要用到，所以不会被释放
    return function () {
        console.log(a)
    }
}

const fn = create()
const a = 200
fn() // 100

// 函数作为参数被传递
function print(fn) {
    const a = 200
    fn()
}
const a = 100//a传进去了，不能被释放
function fn() {
    console.log(a)
}
print(fn) // 100

// 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找
// 不是在执行的地方！！！


//闭包应用
// 闭包隐藏数据，只提供 API
function createCache() {
    const data = {} // 闭包中的数据，被隐藏，不被外界访问
    return {
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
c.set('a', 100)
console.log( c.get('a') )

this

函数调用的时候决定的

作为普通函数；使用call/apply/bind

作为对象方法被调用；箭头函数

在class方法中调用；原型中this，zhangsan.__proto__.sayHi()是undefined