你可能不熟悉的JS總結

時間  2019-11-05
標籤 可能 不熟悉 總結 欄目 JavaScript 简体版
原文   原文鏈接

暫時性死區

只要塊級做用域存在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接收的是參數列表。服務器

相信你確定看到過這樣的代碼：app

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");
})
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程