暂时性死区

只需块级作用域存在let敕令，它所声明的变量就“绑定”这个地区，不再受外部的影响。这么说可以有些笼统，举个例子：

var temp = 123;
if(true) {
    console.log(temp);
    let temp;
}

效果：
> ReferenceError: temp is not defined

在代码块内，运用let声明变量之前，该变量都是不可用的。在语法上，称为“暂时性死区”。（temporal dead zone）

ES6划定暂时性死区和let、const语句不涌现变量提拔，重要是为了削减运行时毛病，防备在变量声明前就运用这个变量，从而致使意料之外的行动。

call和apply要领

这两个要领都可以转变一个函数的上下文对象，只是吸收参数的体式格局不一样。
call吸收的是逗号分开的参数。
apply吸收的是参数列表。

置信你一定看到过如许的代码：

var arr = [1, 2, 3];
var max = Function.prototype.apply.call(Math.max, null, arr);
console.log(max); // 3

那末对这段代码怎样明白呢？

• 1.将Function.prototype.apply算作一个团体

(Function.prototype.apply).call(Math.max, null, arr)

• 2.func.call(context, args)可以转化为context.func(args)

所以代码被转换为：

Math.max.apply(undefined, arr)

基础上到这一步已没必要去诠释了。

那末你有无试过将call和apply交换位置呢？

var arr = [1, 2, 3];
var max = Function.prototype.call.apply(Math.max, null, arr);
console.log(max); // -Infinity

为何的它的输出效果为-Infinity呢？

由于apply的第二参数必需为数组，这里并非，所以参数不能准确的通报给call函数。
依据func.apply(context, args)可以转化为context.func(args)。所以被转化成了Math.max.call()， 直接挪用则会输出-Infinity。

假如想要准确挪用，则应如许誊写：

var arr = [1, 2, 3];
var max = Function.prototype.call.apply(Math.max, arr);
console.log(max); // 3

为了稳固以上内容，且看一个面试题：

var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);
alert(a); 

剖析弹出的a值为若干？

// 将call要领算作一个团体
(Function.prototype.call).apply(function(a){return a;}, [0,4,3]);

// func.apply(context, args)可以转化为context.func(...args)
(function(a){return a;}).call(0, 4, 3);

// 所以效果很明显，输出4

Proxy对象

作用：用来自定义对象中的操纵。

let p = new Proxy(target, handler)

target 代表须要增加代办的对象，handler 用来自定义对象中的操纵，比方可以用来自定义 set 或许 get 函数。

且看一个的小栗子：

// onChange 即要举行的监听操纵
var watch = (object, onChange) => {
    const handler = {
        // 假如属性对应的值为对象，则返回一个新的Proxy对象
        get(target, property, receiver) {
            try {
                return new Proxy(target[property], handler);
            } catch (err) {
                return Reflect.get(target, property, receiver);
            }
        },
        // 定义或修正对象属性
        defineProperty(target, property, descriptor) {
            onChange('define',property);
            return Reflect.defineProperty(target, property, descriptor);
        },
        // 删除对象属性
        deleteProperty(target, property) {
            onChange('delete',property);
            return Reflect.deleteProperty(target, property);
        }
    };

    return new Proxy(object, handler);
};


// 测试对象
var obj = {
    name: 'bjw',
    age: 22,
    child: [1, 2, 3]
}

// 对象代办
var p = watch(obj1, (type, property) => { 
    console.log(`范例：${type}, 修正的属性：${property}`)
});

p.name = 'qwe'
  范例：define, 修正的属性：name
  "qwe"

p.child
  Proxy {0: 1, 1: 2, 2: 3, length: 3}
 
p.child.push(4)
  范例：define, 修正的属性：3
  范例：define, 修正的属性：length
  4

p.child.length = 2
  范例：define, 修正的属性：length
  2

p.child
  Proxy {0: 1, 1: 2, length: 2}

假如关注Vue希望的话，可以已晓得Vue3.0中将经由过程Proxy来替代本来的Object.defineProperty来完成数据相应式。之所以要用Proxy替代本来的API缘由在于Proxy无需一层层递归为每一个属性增加代办，一次即可完成以上操纵。性能上更好，而且底本的完成有一些数据更新不能监听到，但Proxy可以圆满监听就任何体式格局的数据转变，置信经由过程上面的例子已可以感受到Proxy带来的上风了。唯一的瑕玷可以就是浏览器兼容性不太好了。

Reflect对象

为何要有如许一个对象？

• 用一个单一的全局对象去存储这些要领，可以坚持其他的JavaScript代码整齐、清洁。（不然的话得经由过程原型链挪用）
• 将一些敕令式的操纵delete、in运用函数替代，目的是为了让代码更好保护，防止涌现更多的保留字。

Reflect对象具有以下静态要领：

Reflect.apply
Reflect.construct
Reflect.defineProperty
Reflect.deleteProperty
Reflect.enumerate // 烧毁的
Reflect.get
Reflect.getOwnPropertyDescriptor
Reflect.getPrototypeOf
Reflect.has
Reflect.isExtensible
Reflect.ownKeys
Reflect.preventExtensions
Reflect.set
Reflect.setPrototypeOf

详细函数细节：

Reflect.apply(target, this, arguments)

// target：目的函数
// this：绑定的上下文对象
// arguments：函数的参数列表
Reflect.apply(target, this, arguments)

const arr = [2, 3, 4, 5, 6];
let max;
// ES6
max = Reflect.apply(Math.max, null, arr)

// ES5  
max = Math.max.apply(null, arr);
max = Function.prototype.apply.call(Math.max, null, arr);

Reflect.construct(target, argumentsList[, newTarget])

// 这个要领，供应了一种新的不运用new来挪用组织函数的要领
function A(name) {
    console.log('Function A is invoked!');
    this.name = name;
}
A.prototype.getName = function() {
    return this.name;
};

function B(age) {
    console.log('Function B is invoked!');
    this.age = age;
}
B.prototype.getAge = function() {
    return this.age;
};


// 测试 (这两种是一致的)
var tom = new A('tom');
var tom = Reflect.construct(A, ['tom']);


// jnney继承了A的实例属性，同时继承了B的同享属性
// 简朴来讲，A组织函数被挪用，然则 jnney.__proto__ === B.prototype
var jnney = Reflect.construct(A, ['jnney'], B);

Reflect.defineProperty(target, propertyKey, attributes)

这个要领和Object.definePropperty（属性定义失利，会抛出一个毛病，胜利则返回该对象）相似，不过Reflect.defineProperty（属性定义失利，返回false，胜利则返回true）返回的是一个Boolean值。

let obj = {};

let obj1 = Object.defineProperty(obj, 'name', {
    enumerable: true,
    value: 'bjw'    
});

// 这里会返回false 由于我们上面定义name这个属性是不可修正的,
// 然后我们又在这里修正了name属性,所以修正失利返回值为false
let result1 = Reflect.defineProperty(obj, 'name', {
    configurable: true,
    enumerable: true,
    value: 'happy'
});
console.log(result1); // false

Reflect.deleteProperty(target, propertyKey)

let obj = {
    name: 'dreamapple',
    age: 22
};

let r1 = Reflect.deleteProperty(obj, 'name');
console.log(r1); // true
let r2 = Reflect.deleteProperty(obj, 'name');
console.log(r2); // true
let r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');
console.log(r3); // false

Reflect.get(target, propertyKey[, receiver])

Reflect.set(target, propertyKey, value[, receiver])

这个要领用来读取/设置一个对象的属性，target是目的对象，propertyKey是我们要读取的属性，receiver是可选的，假如propertyKey的getter函数内里有this值，那末receiver就是这个this所代表的上下文。

Reflect.getOwnPropertyDescriptor(target, propertyKey)

这个要领与Object.getOwnPropertyDescriptor要领相似，个中target是目的对象，propertyKey是对象的属性，假如这个属性存在属性描述符的话就返回这个属性描述符；假如不存在的话，就返回undefined。(假如第一个参数不是对象的话，那末Object.getOwnPropertyDescriptor会将这个参数强迫转换为对象，而要领 Reflect.getOwnPropertyDescriptor会抛出一个毛病。)

var obj = {age: 22}
Reflect.getOwnPropertyDescriptor(obj, 'age')
{value: 22, writable: true, enumerable: true, configurable: true}

Reflect.getPrototypeOf(target)

Reflect.setPrototypeOf(target, prototype)

这个要领与Object.getPrototypeOf要领是一样的，都是返回一个对象的原型，也就是内部的[[Prototype]]属性的值。

Reflect.setPrototypeOf与Object.setPrototypeOf要领的作用是相似的，设置一个对象的原型，假如设置胜利的话，这个对象会返回一个true；假如设置失利，这个对象会返回一个false。

Reflect.has(target, propertyKey)

这个要领相当于ES5的in操纵符，就是搜检一个对象上是不是含有特定的属性；我们继承来实践这个要领：

function A(name) {
    this.name = name || 'dreamapple';
}
A.prototype.getName = function() {
    return this.name;
};

var a = new A();

console.log('name' in a); // true
console.log('getName' in a); // true

let r1 = Reflect.has(a, 'name');
let r2 = Reflect.has(a, 'getName');
console.log(r1, r2); // true true

Reflect.isExtensible(target)

这个函数搜检一个对象是不是是可以扩大的，也就是是不是可以增加新的属性。(请求target必需为一个对象，否则会抛出毛病)

let obj = {};
let r1 = Reflect.isExtensible(obj);
console.log(r1); // true
// 密封这个对象
Object.seal(obj);
let r2 = Reflect.isExtensible(obj);
console.log(r2); // false

模块化

运用模块化，可认为我们带来以下优点：

• 处理定名争执
• 供应复用性
• 进步代码可保护性

马上实行函数

在初期，运用马上实行函数完成模块化，经由过程函数作用域处理了定名争执、污染全局作用域的题目。

AMD 和 CMD

这两种完成体式格局已很少见到，详细的运用体式格局以下：

// AMD
define(['./a', './b'],function(a, b){
    // 模块加载终了可以运用
    a.do();
    b.do(); 
});

// CMD
define(function(require, exports, module){
    // 加载模块
    var a = require('./a');    
});

CommonJS

CommonJS最早是Node在运用，现在可以在Webpack中见到它。

// a.js
module.exports = {
    a: 1
}

// or 
exports.a = 1;

// 在b.js中可以引入
var module = require('./a');
module.a   // log 1

难点剖析：

// module 基础完成
var module = {
    id: 'xxx',
    exports: {}
}

var exports = module.exports;
// 所以，经由过程对exports从新赋值，不能导出变量

ES Module

ES Module 是原生完成模块化计划。

// 导入模块
import xxx form './a.js';
import { xxx } from './b.js';

// 导出模块
export function a(){}

// 默许导出
export default {};
export default function(){}

ES Module和CommonJS区分

• CommonJS支撑动态导入，也就是require(${path}/xx.js),ES Module不支撑
• CommonJS是同步导入，由于用于服务器端，文件都在当地，同步导入纵然卡住主线程影响也不大。而ES Module是异步导入，由于用于浏览器，须要下载文件，采纳同步导入会对衬着有很大影响
• CommonJS在导出时都是值拷贝，就算导出值变了，导入的值也不会转变。假如想更新值，必需从新导入一次。然则ES Module采纳及时绑定的体式格局，导入导出的值都指向同一个内存地址，所以导入值会跟导出值变化
• ES Module 会编译成 require/exports 来实行的

手写简朴版本的Promise

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(fn) {
    const _this = this;
    _this.state = PENDING;
    _this.value = null;
    _this.resolvedCallbacks = [];
    _this.rejectedCallbacks = [];


    // resolve函数
    function resolve(value) {
        if (_this.state === PENDING) {
            _this.state = RESOLVED;
            _this.value = value;
            _this.resolvedCallbacks.map(cb => cb(_this.value));
        }
    }

    // rejected函数
    function reject(value) {
        if (_this.state === PENDING) {
            _this.state = REJECTED;
            _this.value = value;
            _this.rejectedCallbacks.map(cb => cb(_this.value));
        }
    }

    // 当建立对象的时刻，实行传进来的实行器函数
    // 而且通报resolve和reject函数
    try {
        fn(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

// 为Promise原型链上增加then函数
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    const _this = this;
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
    onRejected = typeof onRejected === 'function' ? onRejected : r => {
        throw r;
    }
    if (_this.state === PENDING) {
        _this.resolvedCallbacks.push(onFulfilled);
        _this.rejectedCallbacks.push(onRejected);
    }
    if (_this.state === RESOLVED) {
        onFulfilled(_this.value);
    }
    if (_this.state === REJECTED) {
        onRejected(_this.value);
    }
    return _this;
}



// 测试
new MyPromise(function (resolve, reject) {
    setTimeout(() => {
        resolve('hello');
    }, 2000);
}).then(v => {
    console.log(v);
}).then(v => {
    console.log(v + "1");
})