js代碼暫時性死區 只要塊級作用域存在let命令，它所聲明的變數就“綁定”這個區域，不再受外部的影響。這麼說可能有些抽象，舉個例子： ? 1 2 3 4 5 var temp = 123; if(true) { console.log(temp); let temp; } ? 1 2 3 4 5 v ...
js代碼暫時性死區
只要塊級作用域存在let命令，它所聲明的變數就“綁定”這個區域，不再受外部的影響。這麼說可能有些抽象，舉個例子：
?| 1 2 3 4 5 |
var temp = 123;
if(true) {
console.log(temp);
let temp;
}
|
結果：
> ReferenceError: temp is not defined
在代碼塊內，使用let聲明變數之前，該變數都是不可用的。在語法上，稱為“暫時性死區”。（temporal dead zone）
ES6規定暫時性死區和let、const語句不出現變數提升，主要是為了減少運行時錯誤，防止在變數聲明前就使用這個變數，從而導致意料之外的行為。
vue插件 call和apply方法
這兩個方法都可以改變一個函數的上下文對象，只是接受參數的方式不一樣。
call接收的是逗號分隔的參數。
apply接收的是參數列表。
相信你肯定看到過這樣的代碼：
?| 1 2 3 |
var arr = [1, 2, 3];
var max = Function.prototype.apply.call(Math.max, null, arr);
console.log(max); // 3
|
那麼對這段代碼怎麼理解呢？
1.將Function.prototype.apply看成一個整體
?| 1 |
(Function.prototype.apply).call(Math.max, null, arr)
|
2.func.call(context, args)可以轉化為context.func(args)
所以代碼被轉換為：
?| 1 |
Math.max.apply(undefined, arr)
|
基本上到這一步已經沒必要去解釋了。
那麼你有沒有試過將call和apply互換位置呢？
?| 1 2 3 |
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。
如果想要正確調用，則應這樣書寫：
?| 1 2 3 |
var arr = [1, 2, 3];
var max = Function.prototype.call.apply(Math.max, arr);
console.log(max); // 3
|
為了鞏固以上內容，且看一個面試題：
?| 1 2 |
var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);
alert(a);
|
分析彈出的a值為多少？
?| 1 2 3 4 5 6 7 |
// 將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
|
css3文字 Proxy對象
作用：用來自定義對象中的操作。
let p = new Proxy(target, handler)
target 代表需要添加代理的對象，handler 用來自定義對象中的操作，比如可以用來自定義 set 或者 get 函數。
且看一個的小慄子：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// 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)
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 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])
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 這個方法，提供了一種新的不使用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值。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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)
?| 1 2 3 4 5 6 7 8 9 10 11 |
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會拋出一個錯誤。)
| 1 2 3 |
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操作符，就是檢查一個對象上是否含有特定的屬性；我們繼續來實踐這個方法：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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必須為一個對象，否則會拋出錯誤)
?| 1 2 3 4 5 6 7 |
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
這兩種實現方式已經很少見到，具體的使用方式如下：
?| 1 2 3 4 5 6 7 8 9 10 11 12 |
// 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中見到它。
?| 1 2 3 4 5 6 7 8 9 10 11 |
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1;
// 在b.js中可以引入
var module = require('./a');
module.a // log 1
|
難點解析：
?| 1 2 3 4 5 6 7 8 |
// module 基本實現
var module = {
id: 'xxx',
exports: {}
}
var exports = module.exports;
// 所以，通過對exports重新賦值，不能導出變數
|
ES Module
ES Module 是原生實現模塊化方案。
?| 1 2 3 4 5 6 7 8 9 10 |
// 導入模塊
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
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
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) {
|
