闭包

  • 作用域利用的非凡场景有两种体现
  • 函数作为参数被传递
  • 函数作为返回值被返回
//函数作为返回值function create() {    const a = 100    return function () {        console.log(a)    }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) {    const a = 200    fn()}const a = 100function fn() {    console.log(a)}print(fn) // 100//  所有的自在变量的查找,是在函数定义的中央,向下级作用域查找//     不是在执行的中央!!!

this

  • 作为一般函数
  • 应用call,apply,bind
  • 作为对象办法被调用
  • 在class办法中调用
  • 箭头函数(返回下级作用域的this)
this的取值是在函数执行的时候确定的,不是在定义的时候确定的

手写bind函数

// 模仿 bindFunction.prototype.bind1 = function () {    // 将参数拆解为数组    const args = Array.prototype.slice.call(arguments)    // 获取 this(数组第一项)    const t = args.shift()    // fn1.bind(...) 中的 fn1    const self = this    // 返回一个函数    return function () {        return self.apply(t, args)    }}function fn1(a, b, c) {    console.log('this', this)    console.log(a, b, c)    return 'this is fn1'}const fn2 = fn1.bind1({x: 100}, 10, 20, 30)const res = fn2()console.log(res)

理论开发中闭包的利用

// 闭包暗藏数据,只提供 APIfunction 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') )

创立十个a标签,为每个绑定事件

let afor (let i = 0; i < 10; i++) {    a = document.createElement('a')    a.innerHTML = i + '<br>'    a.addEventListener('click', function (e) {        e.preventDefault()        alert(i)    })    document.body.appendChild(a)}