前端技能拾遺

時間 2019-12-07

原文原文鏈接

本文主要是對本身前端知識遺漏點的總結和概括，但願對你們有用，會持續更新的~html

解釋語言和編譯型語言

解釋型語言與編譯型語言的區別翻譯時間的不一樣。
編譯型語言在程序執行以前，有一個單獨的編譯過程，將程序翻譯成機器語言，之後執行這個程序的時候，就不用再進行翻譯了。
解釋型語言，是在運行的時候將程序翻譯成機器語言，因此運行速度相對於編譯型語言要慢。
C/C++ 等都是編譯型語言，而Java，C#等都是解釋型語言。而JS是與編譯型語言相似，同樣要通過，詞法分析，語法分析，AST生成三個步驟。前端

模塊

詳細解釋請參考參考react

commonJS

CommonJS 模塊中，若是你 require 了一個模塊，那就至關於你執行了該文件的代碼並最終獲取到模塊輸出的module.exports 對象的一份拷貝。
CommonJS 模塊中 require 引入模塊的位置不一樣會對輸出結果產生影響，而且會生成值的拷貝
CommonJS 模塊重複引入的模塊並不會重複執行，再次獲取模塊只會得到以前獲取到的模塊的拷貝

ES6 輸出值的引用

ES6 模塊中就再也不是生成輸出對象的拷貝，而是動態關聯模塊中的值。
import 命令會被 JavaScript 引擎靜態分析，優先於模塊內的其餘內容執行。
export 命令會有變量聲明提早的效果。

空對象

Object.create(null)的結果和{}很像，可是它不會建立Object.prototype這個委託，因此它要比{}更空。

null和undefined的區別

null表示真正的「無」，表明一個空對象指針，即變量未指向任何對象。
Undefined 表示缺省值，即此處應該有一個值可是尚未定義。
在轉換爲數值類型時，而知區別很大git

Number(undefined)
// NaN

5 + undefined
// NaN

Number(null)
// 0

理解js中的構造函數

function MyFunction() {}
var obj1 = new MyFunction()
var obj2 = new MyFunction()

其實能夠將上面的代碼等價爲github

funtion MyFunction(){}
var obj1 = {}
MyFunction.call(obj1)

js內部先用new操做符建立一個對象，緊接着就將函數的this綁定到這個對象上來執行這個函數。安全

硬綁定bind

參考
不一樣：
bind 是返回對應函數，便於稍後調用；apply 、call 則是當即調用。react-router

實現

Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

箭頭函數

function foo() {
    return (a) => {
        console.log( this.a ); 
    };
}
var obj1 = { a:2 };
var obj2 = { a:3 };
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 !

foo() 內部建立的箭頭函數會捕獲調用時 foo() 的 this。因爲 foo() 的 this 綁定到 obj1， bar(引用箭頭函數)的 this 也會綁定到 obj1，箭頭函數的綁定沒法被修改。(new 也不行!)app