前端技能拾遺

lyning 發布于2019-08-30 15:54 / 1070人閱讀

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。

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

解釋語言和編譯型語言

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

模塊

詳細解釋請參考參考

commonJS

CommonJS 模塊中，如果你 require 了一個模塊，那就相當于你執行了該文件的代碼并最終獲取到模塊輸出的module.exports 對象的一份拷貝。

CommonJS 模塊中 require 引入模塊的位置不同會對輸出結果產生影響，并且會生成值的拷貝

CommonJS 模塊重復引入的模塊并不會重復執行，再次獲取模塊只會獲得之前獲取到的模塊的拷貝

ES6 輸出值的引用

ES6 模塊中就不再是生成輸出對象的拷貝，而是動態關聯模塊中的值。

import 命令會被 JavaScript 引擎靜態分析，優先于模塊內的其他內容執行。

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

云服務器 GPU云服務器前端技能前端技能樹前端開發技能前端工程師技能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117115.html

前端技能拾遺

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~ 解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。編譯型語言在程序執行之前...

Vultr 2019-08-02 13:56 評論0 收藏0
前端技能拾遺

摘要：本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。命令會有變量聲明提前的效果。硬綁定參考不同是返回對應函數，便于稍后調用則是立即調用。本文主要是對自己前端知識遺漏點的總結和歸納，希望對大家有用，會持續更新的~ 解釋語言和編譯型語言解釋型語言與編譯型語言的區別翻譯時間的不同。編譯型語言在程序執行之前...

kevin 2019-08-23 14:13 評論0 收藏0
【前端工程師手冊】JavaScript作用域拾遺

摘要：昨天總結了一些作用域的知識前端工程師手冊之作用域，但是發表完發現忘記了一些東西，今天拾個遺。循環完畢之后，，且此時生成了個匿名函數，由于這個匿名函數處在同一個詞法作用域中，所以他們引用同一個，所以當他們執行時，自然而然就會打出。昨天總結了一些作用域的知識【前端工程師手冊】JavaScript之作用域，但是發表完發現忘記了一些東西，今天拾個遺。昨天說到了JavaScript中沒有塊級作...

flyer_dev 2019-08-22 17:08 評論0 收藏0
【前端工程師手冊】this拾遺之關于箭頭函數的種種

摘要：之前總結了的一些常見綁定情況前端工程師手冊之的筆記，但是還有一些沒有說到，今天繼續學習一下。參考資料箭頭函數你不知道的上卷之前總結了this的一些常見綁定情況（【前端工程師手冊】JavaScript之this的筆記），但是還有一些沒有說到，今天繼續學習一下。 es6箭頭函數先說結論：箭頭函數沒有自己的this，它是根據外層(函數或者全局，后面會說到箭頭函數作為某個對象的方法時的情況...

oogh 2019-08-26 11:55 評論0 收藏0