前端技能拾遺

wupengyu發表於2018-12-21
前端

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

解釋語言和編譯型語言

解釋型語言與編譯型語言的區別翻譯時間的不同。 編譯型語言在程式執行之前，有一個單獨的編譯過程，將程式翻譯成機器語言，以後執行這個程式的時候，就不用再進行翻譯了。 解釋型語言，是在執行的時候將程式翻譯成機器語言，所以執行速度相對於編譯型語言要慢。 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

相關文章