只要塊級作用域存在let命令，它所聲明的變量就“綁定”這個區(qū)域，不再受外部的影響。這么說可能有些抽象，舉個例子：
var temp = 123;if(true) { console.log(temp); let temp;}結果：
> ReferenceError: temp is not defined
在代碼塊內(nèi)，使用let聲明變量之前，該變量都是不可用的。在語法上，稱為“暫時性死區(qū)”。（temporal dead zone）
ES6規(guī)定暫時性死區(qū)和let、const語句不出現(xiàn)變量提升，主要是為了減少運行時錯誤，防止在變量聲明前就使用這個變量，從而導致意料之外的行為。
這兩個方法都可以改變一個函數(shù)的上下文對象，只是接受參數(shù)的方式不一樣。
call接收的是逗號分隔的參數(shù)。
apply接收的是參數(shù)列表。
相信你肯定看到過這樣的代碼：
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)
基本上到這一步已經(jīng)沒必要去解釋了。
那么你有沒有試過將call和apply互換位置呢？
var arr = [1, 2, 3];var max = Function.prototype.call.apply(Math.max, null, arr);console.log(max); // -Infinity
為什么的它的輸出結果為-Infinity呢？
因為apply的第二參數(shù)必須為數(shù)組，這里并不是，所以參數(shù)不能正確的傳遞給call函數(shù)。
根據(jù)func.apply(context, args)可以轉化為context.func(args)。所以被轉化成了Math.max.call()， 直接調(diào)用則會輸出-Infinity。
如果想要正確調(diào)用，則應這樣書寫：
var arr = [1, 2, 3];var max = Function.prototype.call.apply(Math.max, arr);console.log(max); // 3
為了鞏固以上內(nèi)容，且看一個面試題：
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作用：用來自定義對象中的操作。
let p = new Proxy(target, handler)
target 代表需要添加代理的對象，handler 用來自定義對象中的操作，比如可以用來自定義 set 或者 get 函數(shù)。
且看一個的小栗子：
// onChange 即要進行的監(jiān)聽操作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 4p.child.length = 2 類型：define, 修改的屬性：length 2p.child Proxy {0: 1, 1: 2, length: 2} 如果關注Vue進展的話，可能已經(jīng)知道Vue3.0中將通過Proxy來替換原來的Object.defineProperty來實現(xiàn)數(shù)據(jù)響應式。之所以要用Proxy替換原來的API原因在于Proxy無需一層層遞歸為每個屬性添加代理，一次即可完成以上操作。性能上更好，并且原本的實現(xiàn)有一些數(shù)據(jù)更新不能監(jiān)聽到，但Proxy可以完美監(jiān)聽到任何方式的數(shù)據(jù)改變，相信通過上面的例子已經(jīng)能夠感受到Proxy帶來的優(yōu)勢了。唯一的缺點可能就是瀏覽器兼容性不太好了。
為什么要有這樣一個對象？
Reflect對象擁有以下靜態(tài)方法：
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
具體函數(shù)細節(jié)：
// target：目標函數(shù)// this：綁定的上下文對象// arguments：函數(shù)的參數(shù)列表Reflect.apply(target, this, arguments)const arr = [2, 3, 4, 5, 6];let max;// ES6max = Reflect.apply(Math.max, null, arr)// ES5 max = Math.max.apply(null, arr);max = Function.prototype.apply.call(Math.max, null, arr);
// 這個方法，提供了一種新的不使用new來調(diào)用構造函數(shù)的方法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構造函數(shù)被調(diào)用，但是 jnney.__proto__ === B.prototypevar jnney = Reflect.construct(A, ['jnney'], B); 這個方法和Object.definePropperty（屬性定義失敗，會拋出一個錯誤，成功則返回該對象）相似，不過Reflect.defineProperty（屬性定義失敗，返回false，成功則返回true）返回的是一個Boolean值。
let obj = {};let obj1 = Object.defineProperty(obj, 'name', { enumerable: true, value: 'bjw' });// 這里會返回false 因為我們上面定義name這個屬性是不可修改的,// 然后我們又在這里修改了name屬性,所以修改失敗返回值為falselet result1 = Reflect.defineProperty(obj, 'name', { configurable: true, enumerable: true, value: 'happy'});console.log(result1); // falselet obj = { name: 'dreamapple', age: 22};let r1 = Reflect.deleteProperty(obj, 'name');console.log(r1); // truelet r2 = Reflect.deleteProperty(obj, 'name');console.log(r2); // truelet r3 = Reflect.deleteProperty(Object.freeze(obj), 'age');console.log(r3); // falseReflect.set(target, propertyKey, value[, receiver])
這個方法用來讀取/設置一個對象的屬性，target是目標對象，propertyKey是我們要讀取的屬性，receiver是可選的，如果propertyKey的getter函數(shù)里面有this值，那么receiver就是這個this所代表的上下文。
Reflect.getOwnPropertyDescriptor(target, propertyKey)
這個方法與Object.getOwnPropertyDescriptor方法類似，其中target是目標對象，propertyKey是對象的屬性，如果這個屬性存在屬性描述符的話就返回這個屬性描述符；如果不存在的話，就返回undefined。(如果第一個參數(shù)不是對象的話，那么Object.getOwnPropertyDescriptor會將這個參數(shù)強制轉換為對象，而方法 Reflect.getOwnPropertyDescriptor會拋出一個錯誤。)
var obj = {age: 22}Reflect.getOwnPropertyDescriptor(obj, 'age'){value: 22, writable: true, enumerable: true, configurable: true}Reflect.setPrototypeOf(target, prototype)
這個方法與Object.getPrototypeOf方法是一樣的，都是返回一個對象的原型，也就是內(nèi)部的[[Prototype]]屬性的值。
Reflect.setPrototypeOf與Object.setPrototypeOf方法的作用是相似的，設置一個對象的原型，如果設置成功的話，這個對象會返回一個true；如果設置失敗，這個對象會返回一個false。
這個方法相當于ES5的in操作符，就是檢查一個對象上是否含有特定的屬性；我們繼續(xù)來實踐這個方法：
function A(name) { this.name = name || 'dreamapple';}A.prototype.getName = function() { return this.name;};var a = new A();console.log('name' in a); // trueconsole.log('getName' in a); // truelet r1 = Reflect.has(a, 'name');let r2 = Reflect.has(a, 'getName');console.log(r1, r2); // true true這個函數(shù)檢查一個對象是否是可以擴展的，也就是是否可以添加新的屬性。(要求target必須為一個對象，否則會拋出錯誤)
let obj = {};let r1 = Reflect.isExtensible(obj);console.log(r1); // true// 密封這個對象Object.seal(obj);let r2 = Reflect.isExtensible(obj);console.log(r2); // false使用模塊化，可以為我們帶來以下好處：
在早期，使用立即執(zhí)行函數(shù)實現(xiàn)模塊化，通過函數(shù)作用域解決了命名沖突、污染全局作用域的問題。
這兩種實現(xiàn)方式已經(jīng)很少見到，具體的使用方式如下：
// AMDdefine(['./a', './b'],function(a, b){ // 模塊加載完畢可以使用 a.do(); b.do(); });// CMDdefine(function(require, exports, module){ // 加載模塊 var a = require('./a'); });CommonJS最早是Node在使用，目前可以在Webpack中見到它。
// a.jsmodule.exports = { a: 1}// or exports.a = 1;// 在b.js中可以引入var module = require('./a');module.a // log 1難點解析：
// module 基本實現(xiàn)var module = { id: 'xxx', exports: {}}var exports = module.exports;// 所以，通過對exports重新賦值，不能導出變量ES Module 是原生實現(xiàn)模塊化方案。
// 導入模塊import xxx form './a.js';import { xxx } from './b.js';// 導出模塊export function a(){}// 默認導出export default {};export default function(){}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函數(shù) function resolve(value) { if (_this.state === PENDING) { _this.state = RESOLVED; _this.value = value; _this.resolvedCallbacks.map(cb => cb(_this.value)); } } // rejected函數(shù) function reject(value) { if (_this.state === PENDING) { _this.state = REJECTED; _this.value = value; _this.rejectedCallbacks.map(cb => cb(_this.value)); } } // 當創(chuàng)建對象的時候，執(zhí)行傳進來的執(zhí)行器函數(shù) // 并且傳遞resolve和reject函數(shù) try { fn(resolve, reject); } catch (e) { reject(e); }}// 為Promise原型鏈上添加then函數(shù)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");})這篇文章就介紹到這了，需要的朋友可以參考一下。
新聞熱點
疑難解答
