ES6相关

关于变量提升

• var 创建、初始化 被提升
• let、const 创建 被提升
• function 创建、初始化、赋值 都被提升
• const 如果是引用类型，貌似（常量功能）无效

function aa () {
    console.info('a', a)  // undefined
    var a = 1
    console.info('c', c)  // function c
    function c () {}
    console.info('b', b)  // 报错
    let b = 2
}

WeakMap、Map、Set

• Set：不可重复的数组
• Map：Dictionary<>
• WeakMap: key必须是对象（的弱引用），key不可枚举（没有keys方法）。官方文档的说法是：

原生的 WeakMap 持有的是每个键或值对象的“弱引用”，这意味着在没有其他引用存在时垃圾回收能正确进行。 　　　　　　　　　　　　　　-- WeakMap

关于Symbol

Symbol 基本数据类型 string number boolean null undefined object
Symbol 用来定义（标识）唯一常量，比如 Symbol('deleted')
且Symbol('deleted') != Symbol('deleted')
但Symbol.for('passed') == Symbol.for('passed') passed有取值，没有创建
他们说定义一个let sb = Symbol('deleted') 用来当作对象属性的Key，且这个key不可被便利，so，有什么用呢

proxy reflect 代理和反射

// 对象深度监控
function objectWatcher (obj) {
    for (let key in obj) {
        let val = obj[key]
        Object.defineProperty(obj, key, {
            enumerable:true,        // 是否可枚举的
            configurable:true,  // 是否可删除
            // writable:true,       // 是否可修改
            // value:'1'
            get () { return val },
            set (value) { val = value; console.log('change', key, val) }
        });
        if (typeof val == 'object') { 
            objectWatcher(obj[key])
        }
    }
}
var json = { obj: { name: 'json'}, arr: [1,[2,3],5,[6]] }
objectWatcher(json)
json.obj.name = 'haha'
json.arr[1] = 99

使用proxy可以轻松实现上功能。兼容性的话，一般吧

let handler = {
    get (target,key) { 
        if (typeof target[key] == 'object') { 
          return    new Proxy(target[key], handler)
        }
        return Reflect.get(target,key); 
    },
    set (target,key,value) {
        console.log('change', key, value)
        return Reflect.set(target,key,value); // proxy reflect 都是es6
    },
}
var json = { obj: { name: 'json'}, arr: [1,[2,3],5,[6]] }
var prox = new Proxy(json, handler)
prox.obj.name = 'proxy'

ES6静态模块

执行前检查

• export 可以写多个，只能导出变量
• export.default 可以导出常量
• import 进来不可再赋值，会根据源文件值的改变而改变
• import xxx 不包含default
• import * 包含default
• import _ 即default

Class

• 可以使用 get xx () {} set xx () {} 实现实体类；
• 实体属性是原型上的
• 实体属性不可枚举
• 抽象类判断：if (new.target == 本类) throw new Error('抽象类不可创建实例')
• 实例._proto_ == 父.prototype
• extends原理基于_proto_ => 对象._proto_ == 父
• 继承必须super() => father.call(this)
• 有装饰器概念 @装饰器名
  es7提案，chrome74 on mac还不支持
  有多个装饰器，以驼峰式执行 => 外层先于class执行，内层从下向上执行
• 可以有私有属性 #xxx；也是提案

class SuperClass {
    constructor () {
        this.name = 'SuperClass'
    }
}
let father = new SuperClass()
// console.info(Object.setPrototypeOf(father.prototype, SuperClass.prototype))
console.log(father.__proto__ === SuperClass.prototype)  // true
console.log(
    father.hasOwnProperty('prototype'), // false
    father.hasOwnProperty('constructor'), // false
    father.__proto__.hasOwnProperty('constructor') // true
)
console.log(father.__proto__.constructor == SuperClass.prototype.constructor) // true

class SubClass extends SuperClass {
    constructor () {
        super()
        this.age = 'so rude'
    }
}
let son = new SubClass()
console.log(SubClass.__proto__ === SuperClass) // true
console.log(son.hasOwnProperty('name')) // true

Event Loop

• 作用域是声明时创建的

let a = 10
{
  console.log(a)  // undefined
  let a = 4
}

• 宏任务：setTimeout、MessageChannel
• 微任务：then、mutationObserver

数组

组合函数 compose reduceRight

let fn1 = msg => { console.log('fun1 from', msg); return 'fun1'; }
let fn2 = msg => { console.log('fun2 from', msg); return 'fun2'; }
let fn3 = msg => { console.log('fun3 from', msg); return 'fun3'; }
let zuheFn = (...fns) => (msg) => fns.reduceRight((msg, fn) => fn(msg), msg)
zuheFn(fn3, fn2, fn1)('haha')

模板引擎 ejs 的实现 with new Function

ejs使用方法

var people = ['geddy', 'neil', 'alex'],
    html = ejs.render('<%= people.join(", ") %>', {people: people});

逻辑：

1. 将ejs模板中的<%等标识改为`，以组成字符串
2. 使用with包裹字符串，以便ejs中的变量调用
3. 使用new Function 将字符串执行

let fs = require('fs')
fs.readFile('./helper.ejs', 'utf8', function (error, res) {
    let html = render(res, { title: '假的ejs', list: ['第一项', '第二项'] })
    console.info(html)
})
 
let render = function (htmlstr, data) {
    htmlstr = "`" + htmlstr
        .replace(/\<\%\=([^%]+)\%\>/g, "` + $1 + `")
        .replace(/\<\%([^%]+)\%\>/g, "`; $1 html+= `")
        + "`";                           // `` + people.join(", ") + ``
    htmlstr = `with (data) {
        var html = ${htmlstr}
        return html
    }`                                    // var html = `` + people.join(", ") + ``
    let handlerStrFn = new Function('data', htmlstr)
    return handlerStrFn(data)
}

.
.
.
.
left knowledge points for me
MessageChannel、mutationObserver、serviceWork、workBox
VO（全局）AO（函数执行时 VO -> AO，并且将上级作用域链和AO对象进行拼接）
.