本文主要是對(duì)自己前端知識(shí)遺漏點(diǎn)的總結(jié)和歸納，希望對(duì)大家有用，會(huì)持續(xù)更新的~

解釋語(yǔ)言和編譯型語(yǔ)言

解釋型語(yǔ)言與編譯型語(yǔ)言的區(qū)別翻譯時(shí)間的不同。 編譯型語(yǔ)言在程序執(zhí)行之前，有一個(gè)單獨(dú)的編譯過(guò)程，將程序翻譯成機(jī)器語(yǔ)言，以后執(zhí)行這個(gè)程序的時(shí)候，就不用再進(jìn)行翻譯了。 解釋型語(yǔ)言，是在運(yùn)行的時(shí)候?qū)⒊绦蚍g成機(jī)器語(yǔ)言，所以運(yùn)行速度相對(duì)于編譯型語(yǔ)言要慢。 C/C++ 等都是編譯型語(yǔ)言，而Java，C#等都是解釋型語(yǔ)言。而JS是與編譯型語(yǔ)言類似，一樣要經(jīng)過(guò)，詞法分析，語(yǔ)法分析，AST生成三個(gè)步驟。

模塊

詳細(xì)解釋請(qǐng)參考參考

commonJS

CommonJS 模塊中，如果你 require 了一個(gè)模塊，那就相當(dāng)于你執(zhí)行了該文件的代碼并最終獲取到模塊輸出的module.exports 對(duì)象的一份拷貝。

CommonJS 模塊中 require 引入模塊的位置不同會(huì)對(duì)輸出結(jié)果產(chǎn)生影響，并且會(huì)生成值的拷貝

CommonJS 模塊重復(fù)引入的模塊并不會(huì)重復(fù)執(zhí)行，再次獲取模塊只會(huì)獲得之前獲取到的模塊的拷貝

ES6 輸出值的引用

ES6 模塊中就不再是生成輸出對(duì)象的拷貝，而是動(dòng)態(tài)關(guān)聯(lián)模塊中的值。

import 命令會(huì)被 JavaScript 引擎靜態(tài)分析，優(yōu)先于模塊內(nèi)的其他內(nèi)容執(zhí)行。

export 命令會(huì)有變量聲明提前的效果。

空對(duì)象

Object.create(null)的結(jié)果和{}很像，但是它不會(huì)創(chuàng)建Object.prototype這個(gè)委托，所以它要比{}更空。 復(fù)制代碼

null和undefined的區(qū)別

null表示真正的“無(wú)”，代表一個(gè)空對(duì)象指針，即變量未指向任何對(duì)象。 Undefined 表示缺省值，即此處應(yīng)該有一個(gè)值但是還沒有定義。 在轉(zhuǎn)換為數(shù)值類型時(shí)，而知區(qū)別很大

Number(undefined) // NaN5 + undefined // NaNNumber(null) // 0 復(fù)制代碼

理解js中的構(gòu)造函數(shù)

function MyFunction() {} var obj1 = new MyFunction() var obj2 = new MyFunction() 復(fù)制代碼

其實(shí)可以將上面的代碼等價(jià)為

funtion MyFunction(){} var obj1 = {} MyFunction.call(obj1) 復(fù)制代碼

js內(nèi)部先用new操作符創(chuàng)建一個(gè)對(duì)象，緊接著就將函數(shù)的this綁定到這個(gè)對(duì)象上來(lái)執(zhí)行這個(gè)函數(shù)。

硬綁定bind

參考 不同： bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。

實(shí)現(xiàn)

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; } 復(fù)制代碼

箭頭函數(shù)

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 ! 復(fù)制代碼

foo() 內(nèi)部創(chuàng)建的箭頭函數(shù)會(huì)捕獲調(diào)用時(shí) foo() 的 this。由于 foo() 的 this 綁定到 obj1， bar(引用箭頭函數(shù))的 this 也會(huì)綁定到 obj1，箭頭函數(shù)的綁定無(wú)法被修改。(new 也不 行!)

安全

xss（跨站腳本攻擊）

其原理是攻擊者向有XSS漏洞的網(wǎng)站中輸入(傳入)惡意的HTML代碼，當(dāng)其它用戶瀏覽該網(wǎng)站時(shí)，這段HTML代碼會(huì)自動(dòng)執(zhí)行，從而達(dá)到攻擊的目的。如，盜取用戶Cookie、破壞頁(yè)面結(jié)構(gòu)、重定向到其它網(wǎng)站等。 詳細(xì)內(nèi)容可參考這里

csrf(跨站請(qǐng)求偽造)

macrotask和microtask

請(qǐng)參考

HTTP

keep-alive

請(qǐng)參考

為什么要進(jìn)行三次握手

詳細(xì)內(nèi)容請(qǐng)參考

AJAX

React

react-router實(shí)現(xiàn)原理

請(qǐng)參考 請(qǐng)參考2

總結(jié)

以上是生活随笔為你收集整理的前端技能拾遗的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。