前端技能拾遺

本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~

解釋語言和編譯型語言

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

模塊

詳細解釋請參考參考

commonJS

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

ES6 輸出值的引用

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

空對象

Object.create(null)的結果和{}很像，但是它不會創建Object.prototype這個委託，所以它要比{}更空。

null和undefined的區別

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

Number(undefined)
// NaN

5 + undefined
// NaN

Number(null)
// 0

理解js中的構造函數

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

其實可以將上面的代碼等價爲

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

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

硬綁定bind

參考
不同：
bind 是返回對應函數，便於稍後調用；apply 、call 則是立即調用 。

實現

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 也不 行!)

安全

xss（跨站腳本攻擊）

其原理是攻擊者向有XSS漏洞的網站中輸入(傳入)惡意的HTML代碼，當其它用戶瀏覽該網站時，這段HTML代碼會自動執行，從而達到攻擊的目的。如，盜取用戶Cookie、破壞頁面結構、重定向到其它網站等。
詳細內容可參考這裏

csrf(跨站請求僞造)

macrotask和microtask

請參考

HTTP

keep-alive

請參考

爲什麼要進行三次握手

詳細內容請參考

AJAX

React

react-router實現原理

請參考
請參考2