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));
};
}
网友评论