你可能不熟悉的JS總結

五月花開發表於2019-02-16

暫時性死區

只要塊級作用域存在let命令,它所宣告的變數就“繫結”這個區域,不再受外部的影響。這麼說可能有些抽象,舉個例子:

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

結果:
> ReferenceError: temp is not defined

在程式碼塊內,使用let宣告變數之前,該變數都是不可用的。在語法上,稱為“暫時性死區”。(temporal dead zone)

ES6規定暫時性死區和letconst語句不出現變數提升,主要是為了減少執行時錯誤,防止在變數宣告前就使用這個變數,從而導致意料之外的行為。

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)

基本上到這一步已經沒必要去解釋了。

那麼你有沒有試過將callapply互換位置呢?

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是可選的,如果propertyKeygetter函式裡面有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.setPrototypeOfObject.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");
})

相關文章