JavaScript 闭包 - Githubissues

JavasScript 的闭包的原理，分析。都已经很多了。

相关的知识点有:
闭包，作用域，作用域链也会一起参与的有:
原型，原型链，event loop

来两道题热热身

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function() { return this.name; };
  }
};
console.log(object.getNameFunc()());

闭包相关的应用与周边

函数式编程

函数式编程是个很大的话题。这里略过。常见的库都能和函数式不多不少扯上点边: lodash, jQuery, react, rxjs

装饰器 ( Decorator )

写 react 应用会经常用到数据流的库，例如 react-redux 和 mobx-react 就跟这能扯上关系了。

// the code is from https://medium.com/fraight/react-redux-decorators-8b38f3b9ef2f
import React from 'react'
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
  return { users: state.users }; 
}

const mapDispatchToProps = (dispatch, ownProps) {
  return {
    getUser(id) {
      dispatch(ownProps.getUser(id)) 
    }
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyFancyComponent extends React.Component {
 // react things in here 
}

至今，Babel7 已经出了自家的 Decorators 的实现。7.1.0 Released: Decorators, Private Static Fields
当然，TypeScript 之前也有它的装饰器实现，未来理论上是会向社区靠拢。

串联知识点

Decorator( 该语法特征与使用场景 )
Object.defineProperty( 社区很多 Vue 的分析与 mini 库 )
Proxy( Vue 3.0 使用了 Proxy 作为底层的方案，为什么这么选型。以及选型前后的优缺 )

JavaScript 实现 Private 的几种方案

社区的#标识符提案
Babel7 实现了 private instance methods 7.2.0 Released: Private Instance Methods

基于约定。例如: _为开头

class Animal {
constructor() {
this._notPublicProperty = 2
}
_notPublicMethod () {
return this._notPublicProperty
}
}

Typescript 的 public, private, and protected ts 的 private 看似没有做有效的操作。应该是为了编译期进行校验操作。

直接放文档:
Typescript - Classes Typescript - 代码编译前后对比

ES5基于闭包
```
function  Animal() {
}
```

Animal.prototype = (function () { var self = this; var _notPublicProperty = 2; function _notPublicMethod() { return _notPublicProperty; }

return { constructor: Animal, getNotPublicProperty: function() { return _notPublicMethod.call(this) } } }())

var dog = new Animal() console.log(dog.getNotPublicProperty()); // 2 console.log(dog._notPublicMethod()); // ReferenceError: _notPublicProperty is not defined


5. Symbol

Symbol是一个全局函数，每调用一次就会产生一个唯一的字符串

const _notPublicMethod = Symbol() const _notPublicProperty = Symbol() class Animal { constructor() { this[_notPublicProperty] = 2; } [_notPublicMethod]() { return this[_notPublicProperty]; // 必须用中括号 } getNotPublicProperty() { return this[_notPublicMethod]() } }

var dog = new Animal()

console.log(dog.getNotPublicProperty()); // 2 console.log(dog._notPublicMethod()); // ReferenceError: _notPublicProperty is not defined

每次都要创建一个Symbol还是不那么完美，但是已经不错了。

6. WeakMap
Map和WeakMap都是ES6新引入的数据结构。  
Map和Object类似，都是hash结构。Object的键只能是字符串，而Map打破了这一限制，键可以是任意数据类型，而WeakMap比Map要弱一点，键只能是对象;且WeakMap的键名所指向的对象，不计入垃圾回收机制。  
主要的思路是，在类的级别上创建一个 WeakMap 容器，用于存储各个实例的私有成员。

const store = new WeakMap()

class Animal { constructor() { var self = this;

function _notPublicMethod() {
  return store.get(this)._notPublicProperty
}

store.set(this,{
  _notPublicProperty: 2,
  _notPublicMethod: _notPublicMethod.bind(self)
})

}

getNotPublicProperty() { return store.get(this)._notPublicMethod } }