闭包

作者: 蛮吉大人123 | 来源:发表于2018-07-10 16:41 被阅读12次

    ES5里面的的作用域是函数级作用域,闭包就是函数外部引用函数内部的变量,然后函数内部的变量可以保持不被销毁的一种方式。

    var name = 'Li Si';
    function getName() {
      var name = 'Zhang San';
      return function() { return name; }
    }
    var currentName = getName()();
    console.log(currentName);
    

    特点

    • 函数外部调用函数内部的局部变量。
    • 此局部变量不会被销毁,所以可以代替全局变量去做一些事情,但是不会污染全局变量,且不受其他地方定义的全局变量的影响。

    用途

    编写插件: 其实闭包在编写插件的时候很有用,由于全局变量很多地方都能定义,所以编写插件一般情况下不要去定义全局变量避免重名, 而局部变量在调用完之后会被销毁掉,所以可以使用闭包的方式去定义自己的变量,这样既不会在调用之后被销毁掉,又避免了与用户定义的全局变量重名的危险。

    例如redux里面的connect方法

    function createConnect() {
      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
          _ref$connectHOC = _ref.connectHOC,
          connectHOC = _ref$connectHOC === undefined ? _connectAdvanced2.default : _ref$connectHOC,
          _ref$mapStateToPropsF = _ref.mapStateToPropsFactories,
          mapStateToPropsFactories = _ref$mapStateToPropsF === undefined ? _mapStateToProps2.default : _ref$mapStateToPropsF,
          _ref$mapDispatchToPro = _ref.mapDispatchToPropsFactories,
          mapDispatchToPropsFactories = _ref$mapDispatchToPro === undefined ? _mapDispatchToProps2.default : _ref$mapDispatchToPro,
          _ref$mergePropsFactor = _ref.mergePropsFactories,
          mergePropsFactories = _ref$mergePropsFactor === undefined ? _mergeProps2.default : _ref$mergePropsFactor,
          _ref$selectorFactory = _ref.selectorFactory,
          selectorFactory = _ref$selectorFactory === undefined ? _selectorFactory2.default : _ref$selectorFactory;
    
      return function connect(mapStateToProps, mapDispatchToProps, mergeProps) {
        var _ref2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
            _ref2$pure = _ref2.pure,
            pure = _ref2$pure === undefined ? true : _ref2$pure,
            _ref2$areStatesEqual = _ref2.areStatesEqual,
            areStatesEqual = _ref2$areStatesEqual === undefined ? strictEqual : _ref2$areStatesEqual,
            _ref2$areOwnPropsEqua = _ref2.areOwnPropsEqual,
            areOwnPropsEqual = _ref2$areOwnPropsEqua === undefined ? _shallowEqual2.default : _ref2$areOwnPropsEqua,
            _ref2$areStatePropsEq = _ref2.areStatePropsEqual,
            areStatePropsEqual = _ref2$areStatePropsEq === undefined ? _shallowEqual2.default : _ref2$areStatePropsEq,
            _ref2$areMergedPropsE = _ref2.areMergedPropsEqual,
            areMergedPropsEqual = _ref2$areMergedPropsE === undefined ? _shallowEqual2.default : _ref2$areMergedPropsE,
            extraOptions = _objectWithoutProperties(_ref2, ['pure', 'areStatesEqual', 'areOwnPropsEqual', 'areStatePropsEqual', 'areMergedPropsEqual']);
    
        var initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
        var initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
        var initMergeProps = match(mergeProps, mergePropsFactories, 'mergeProps');
    
        return connectHOC(selectorFactory, _extends({
          // used in error messages
          methodName: 'connect',
    
          // used to compute Connect's displayName from the wrapped component's displayName.
          getDisplayName: function getDisplayName(name) {
            return 'Connect(' + name + ')';
          },
    
          // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
          shouldHandleStateChanges: Boolean(mapStateToProps),
    
          // passed through to selectorFactory
          initMapStateToProps: initMapStateToProps,
          initMapDispatchToProps: initMapDispatchToProps,
          initMergeProps: initMergeProps,
          pure: pure,
          areStatesEqual: areStatesEqual,
          areOwnPropsEqual: areOwnPropsEqual,
          areStatePropsEqual: areStatePropsEqual,
          areMergedPropsEqual: areMergedPropsEqual
    
        }, extraOptions));
      };
    }
    

    相关文章

      网友评论

          本文标题:闭包

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