你可能不熟悉的JS總結
暫時性死區
只要塊級作用域存在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區別
require(${path}/xx.js) 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"); })