美文网首页
js中的闭包

js中的闭包

作者: 没了提心吊胆的稗子 | 来源:发表于2019-04-27 10:53 被阅读0次

    什么是闭包?

    (理论上)函数执行形成一个私有作用域,保护里面的私有变量不受外界干扰,这种保护机制叫做闭包
    (或者说)函数执行形成一个不销毁的私有作用域,除了保护私有变量以外,还可以存储一些内容,这样的模式才是闭包

    var utils = (function(){
      /**
      *自执行函数形成一个私有作用域返回一个地址,被外面的变量接收,这个私有作用域不销毁
      */ 
      return {
      }
    })()
    

    闭包作用:

    1.保护作用:保护私有作用域里头的变量不受外界干扰
    具体使用: 团队协作开发,每个开发者把自己的代码存放在一个私有作用域中,防止相互之间冲突;把需要供他人使用的方法通过return或者window.XXX暴露在全局下即可。
    jQuery源码中的例子: 利用保护机制实现

    (function (window) {
        var jQuery = function () {
            // ...  jQuery源码
        }
        // ...  jQuery源码
    
        window.jQuery = window.$ = jQuery
    })(window)
    

    2.保存作用:形成一个不销毁的私有作用域,保存里面的一些变量
    具体使用:选项卡闭包解决办法

    for (var i = 0; i < oList.length; i ++){
        oList[i].onclick = (function (i) {
            return function () {
                changeTab(i)
            }
            }
        )(i)
    }
    
    for (var i = 0; i < oList.length; i ++){
        ~function (i) {
            oList[i].onclick = function () {
                        changeTab(i)
                }(i)
        }
    }
    

    单例模式(JS高阶编程技巧:惰性思想/柯理化函数思想)
    柯理化函数思想:一个JS预先处理的思想,利用函数执行可以形成一个不销毁的私有作用域的原理,把需要预先处理的内容都存储在这个作用域中,并且返回一个小函数,以后执行的都是这个小函数,在小函数中把之前预先存储的值进行相关操作即可

    // 把传递进来的callback函数的this预先处理为context
    function myBind(callback, context) {
        context = context || window;
        return function () {
            callback.call(context);
        }
    }
    
    var obj = {name: 'javascript'};
    function fn() {
        console.log(this);
    }
    setTimeout(myBind(fn, obj), 1000);
    

    重写bind方法

    Function.prototype.myBind = function (context) {
      var outerArg = Array.prototype.slice.call(arguments, 1);
      var _this = this;
      return function () {
          // 默认传递的点击事件
          var innerArg = Array.prototype.slice.call(arguments, 0);
          _this.apply(context, outerArg.concat(innerArg));
      };
    };
    

    相关文章

      网友评论

          本文标题:js中的闭包

          本文链接:https://www.haomeiwen.com/subject/vujzgqtx.html