那些JS中常見的面試題及知識點

1.什么是閉包

? 當一個函式的回傳值是另一個函式，回傳的那個函式如果呼叫了父函式的內部變數，且在外部被執行就產生了閉包

特性

? 1.函式套函式，

? 2.內部函式訪問外部函式變數，引數

? 3.變數和引數不會被垃圾回識訓制回收

優點

? 1.變數長期住在在記憶體中

? 2.不會造成全域污染

? 3.私有成員的存在

缺點

? 常駐記憶體增大記憶體的使用量，使用不當會造成記憶體的泄露

2.原型和原型鏈

? 原型概念：

? 原型概念：jsvascript都包含了一個proto內部屬性，這個屬性對應的是自身，

? 除了原型proto之外，還有prototype屬性，當函式物件作為建構式創建實體時，prototype屬性值將被作為 實體物件的原型proto

? 原型鏈的概念：原型鏈當一個物件呼叫自身不存在的物件或者方法就會去自己proto關聯的前輩prototype物件上去找，如果沒有找到，就會去prototype原型proto關聯的前輩prototype，依次類推直到undefined，這就是原型鏈，

? 例如：B繼承A的原型上的方法，C繼承B原型上的方法，這時C._proto_指向B的原型，B._proto指向A的原型這就行程了原型鏈

? 隱式原型：用來構成原型鏈，實作基于原型的繼承

? 顯示原型：用來實作原型的繼承與屬性共享

3.組合繼承

? // 父

? function Person(name, age) {

? this.name = name

? this.age = age

? //方法一

? // this.say=function(){

? // console.log(this.name)

? // }

? }

? //方法二

? Person.prototype.say = function () { console.log(this.name) }

? // 子

? function stu(name, age) {

? Person.call(this, name, age)

? }

? //繼承他的方法

? stu.prototype.say = Person.prototype.say

? var s = new stu(“張三”, 33)

? console.log(s)

4.說一下JS原生事件如何系結

? 一、是html事件處理程式

? html事件現在早已不用了，就是在html各種標簽上直接添加事件，類似于css的行內樣式，缺點是不好維護

? 例如：<button οnclick="時間處理函式”>點我

? 二、是DOM0級事件處理程式

? 目前在PC端用的還是比較多的系結事件方式，兼容性也好，主要是先獲取dom元素，然后直接給dom元 素添加事件

		 DOM0事件如何移除呢？很簡單：btn.onclick=null;置為空就行

		優點：兼容性好

		缺點：只支持冒泡，不支持捕獲

? 三、是DOM2級事件處理程式

? 移動端用的比較多，也有很多優點，提供了專門的系結和移除方法

? 優點：支持給個元素系結多個相同事件，支持冒泡和捕獲事件機制

5.說一下JS原生常用dom操作方法？

? 查找：

? getElementByid,

? getElementsByTagName

? querySelector

? querySelectorAll

? 插入：

? appendChild

? insertBefore

? 洗掉：

? removeChild

? 克隆：

? cloneNode

? 設定和獲取屬性：

? setAttribute(“屬性名”,”值”)

? getAttibute(“屬性名”)

6.ES6新增特性

? 1.新增了塊級作用域(let,const)

? 2.提供了定義類的語法糖(class)

? 3.新增了一種基本資料型別(Symbol)

? 4.新增了變數的解構賦值

? 5.函式引數允許設定默認值，引入了rest引數，新增了箭頭函式

? 6.陣列新增了一些API，如 isArray / from / of 方法;陣列實體新增了 entries()，keys() 和 values() 等方法

? 7.物件和陣列新增了擴展運算子

? 8.ES6 新增了模塊化(import/export)

? 9.ES6 新增了 Set 和 Map 資料結構

? 10.ES6 原生提供 Proxy 建構式，用來生成 Proxy 實體

? 11.ES6 新增了生成器(Generator)和遍歷器(Iterator)

7.JS設計模式有哪些（常見的三種）

? 1.單例模式

? 2.工廠模式

? 3.建構式模式

8.說一下你對JS面向物件的理解

JS面向物件主要基于function來實作的，通過function來模擬類，通過prototype來實作類方法的共享

9.說一下JS陣列常用方法

push

pop

unshift

shift

splice

join

concat

forEach

filter

map

sort

some

every

10.說一下JS陣列內置遍歷方法有哪些和區別

? forEach

? 這個方法是為了取代for回圈遍歷陣列的，回傳值為undefined

? filter

? 是一個過濾遍歷的方法，如果回傳條件為true，則回傳滿足條件為true的新陣列

? map

? 這個map方法主要對陣列的復雜邏輯處理時用的多，特別是react中遍歷資料，也經常用到，寫法和forEach 類似

? some

? 這個some方法用于只要陣列中至少存在一個滿足條件的結果回傳值就為true,否則回傳fasel

? 寫法和forEach類似

? every

? 這個every方法用于陣列中每一項都得滿足條件時，才回傳true，否則回傳false, 寫法和forEach類似

11.說一下JS作用域

在 JavaScript 中, 作用域為可訪問變數，物件，函式的集合，

1.JavaScript 區域作用域

? 變數在函式內宣告，變數為區域作用域，

? 區域變數：只能在函式內部訪問

2.JavaScript全域作用域

? 也就是定義在window下的變數范圍，在任何地方都可以訪問，

3.JavaScript塊級作用域

? 塊級作用域：簡單來說用let和const在任意的代碼塊中定義的變數都認為是塊級作用域中的變數

注：

? 1. 盡量不要使用全域變數，因為容易導致全域的污染，命名沖突，對bug查找不利，

  2. 而所謂的作用域鏈就是由最內部的作用域往最外部,查找變量的程序.形成的鏈條就是作用域鏈

12. 從輸入URL到頁面加載完中間發生了什么

? 1.DNS決議（決議URL對應的IP

? 2.TCP 連接（三次握手）

? 3.發送 HTTP 請求

? 4.服務器處理請求并回傳需要的資料

? 5.瀏覽器決議渲染頁面

? 6.連接結束（四次揮手）

? 三次握手

? 三次握手是連接協議

? 四次揮手

? 關閉連接是四次協議

13.JS事件代理（也稱事件委托）是什么，及實作原理

JS事件代理就是通過給父級元素系結事件，不給子級元素系結事件，然后當點擊子級元素時，通過事件冒泡機制在其系結的父元素上觸發事件處理函式主要目的是為了提升性能

? 特別是給動態添加的元素系結事件，這個特別起作用

14.說一下js資料型別有哪些

js資料型別有：

? 1.基本資料型別：

? number

? string

? Boolean

? null

? undefined

? symbol（ES6新增）

? 2.復合型別

? Object

? function

15.說一下 call,apply,bind區別

? call,apply,bind主要作用都是改變this指向的，但使用上略有區別

? call和apply的主要區別是在傳遞引數上不同

? 1.call后面傳遞的引數是以逗號的形式分開的

? 2.apply傳遞的引數是陣列形式

? bind回傳的是一個函式形式如果要執行，則后面要再加一個小括號

16.JavaScript的作用域鏈理解

? 其本質是JavaScript在執行程序中會創造可執行背景關系，可執行背景關系中的詞法環境中含有外部詞法環境的參考，我們可以通過這個參考獲取外部詞法環境的變數、宣告等，這些參考串聯起來一直指向全域的詞法環境，因此形成了作用域鏈，

17.ES6模塊與CommonJS模塊有什么區別

ES6 Module和CommonJS模塊的區別：
CommonJS是對模塊的淺拷貝，ES6 Module是對模塊的參考,即ES6 Module只存只讀，不能改變其值，具體點就是指標指向不能變，類似const
import的介面是read-only（只讀狀態），不能修改其變數值， 即不能修改其變數的指標指向，但可以改變變數內部指標指向,可以對commonJS對重新賦值（改變指標指向），

ES6 Module和CommonJS模塊的共同點：
CommonJS和ES6 Module都不可以對引入的物件進行賦值，即對物件內部屬性的值進行改變，

18.null與undefined的區別是什么

? null表示為空，代表此處不應該有值的存在，一個物件可以是null，代表是個空物件，而null本身也是物件，

? undefined表示『不存在』，JavaScript是一門動態型別語言，成員除了表示存在的空值外，還有可能根本就不 存在（因為存不存在只在運行期才知道），這就是undefined的意義所在

19.箭頭函式的this指向

? 箭頭函式并沒有屬于自己的this，它的所謂的this是捕獲其所在背景關系的 this 值，作為自己的 this 值,并且由于 沒有屬于自己的this,而箭頭函式是不會被new呼叫的，這個所謂的this也不會被改變.

20.async/await

是一套關于異步解決的方案

兩個作用1.求值關鍵字2.異步操作變為同步操作

1. async會回傳一個promise物件，執行時遇到await就會先回傳，觸發異步操作完成后，再接著執行函式后面的陳述句
2. 優勢就在于改善pramise的.then鏈
3. await必須在async的函式內部使用
4. awati后面必須要跟一個promise（不是的話用reslove轉換他）
5. await的回傳結果就是后面promise執行的結果

21.async/await相比于Promise的優勢

1.代碼讀起來更加同步，改善Promise.then鏈

2.Promise傳遞中間值非常麻煩，async/await幾乎是同步的寫法，看著簡潔明了

3.錯誤處理友好，async/await可以用成熟的try/catch，Promise的錯誤捕獲非常冗余

4.除錯友好，Promise的除錯很差，

22.JavaScript的基本型別和復雜型別是儲存在哪里的

基本型別儲存在堆疊中

復雜型別會儲存在記憶體堆中

23.堆疊和堆的區別

堆疊：

1.存盤基本資料型別

2.存盤空間小

3.查找迅速性能高

堆：

1.存多個值得復合型別

2.存盤空間大

3.查找速度慢性能較低

24.深拷貝和淺拷貝的區別

深拷貝和淺拷貝是針對復雜的資料型別來說的淺拷貝只拷貝一層，深拷貝是層層拷貝

深拷貝：

復制變數值，對于非基本型別的變數，遞回到基本型別再復制，與原物件完全隔離互不影響，

最簡單的實作是json.parse（json.stringfy（obj））

淺拷貝：

復制屬性，只拷貝第一層屬性，當前物件的屬性值是參考型別時，實質復制的是參考，參考的值也會發生變化

可以使用for in、object.assign、擴展運算子、遞回等來實作

25.瀏覽器是如何渲染頁面的

渲染的流程如下：

1.決議HTML檔案，創建DOM樹，

自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載），

2.決議CSS，優先級：瀏覽器默認設定<用戶設定<外部樣式<行內樣式<HTML中的style樣式；

3.將CSS與DOM合并，構建渲染樹（Render Tree）

4.布局和繪制，重繪（repaint）和重排（reflow）

26.json和jsonp的區別

? json回傳的是一串json格式資料；而jsonp回傳的是腳本代碼

? jsonp跨域的一種方式

? 原理：

? 因為瀏覽器有同源策略，所有ajax不能請求資料，但script標簽不受同源策略的影響，所以通過動態創建script標簽來加載服務器回傳的資料，資料就是一個函式的呼叫

27.如何阻止冒泡

冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document物件)的順序觸發，

1.w3c的方法是e.stopPropagation()

2.IE則是使用e.cancelBubble = true

28.如何阻止默認事件

1.w3c的方法是e.preventDefault()

2.IE則是使用e.returnValue = false

29.JavaScript事件流模型都有什么

“事件冒泡”:事件開始由最具體的元素接受，然后逐級向上傳播

“事件捕捉”:事件由最不具體的節點先接收，然后逐級向下，一直到最具體的

“DOM 事件流”:三個階段:事件捕捉，目標階段，事件冒泡

30.請你談談cookie的弊端

1.Cookie 數量和長度的限制，每個 domain 最多只能有 20 條 cookie，每個 cookie 長度 不能超過 4KB，否則會被截掉，

2.安全性問題，如果 cookie 被人攔截了，那人就可以取得所有的 session 資訊，即使加密也與事無補，因為攔截者并不需要知道 cookie 的意義，他只要原樣轉發 cookie 就可以達到目的了，

3.有些狀態不可能保存在客戶端，

31.哪些操作會造成記憶體泄漏

1. setTimeout 的第一個引數使用字串而非函式的話，會引發記憶體泄漏，
2. 閉包
3. 控制臺日志
4. 回圈(在兩個物件彼此參考且彼此保留時，就會產生一個回圈)

32.如何優化自己的代碼

1.代碼重用

2.避免全域變數(命名空間，封閉空間，模塊化 mvc…)

3.拆分函式避免函式過于臃腫

33.解釋 JavaScript 中的相等性

JavaScript 中有嚴格比較和型別轉換比較：

• 嚴格比較（例如 ===）在不允許強制轉型的情況下檢查兩個值是否相等；
• 抽象比較（例如 ==）在允許強制轉型的情況下檢查兩個值是否相等，

34. 你能解釋一下 ES5 和 ES6 之間的區別嗎

• ECMAScript 5（ES5）：ECMAScript 的第 5 版，于 2009 年標準化，這個標準已在所有現代瀏覽器中完全實作，
• ECMAScript 6（ES6）或 ECMAScript 2015（ES2015）：第 6 版 ECMAScript，于 2015 年標準化，這個標準已在大多數現代瀏覽器中部分實作，

35.解釋 JavaScript 中“undefined”和“not defined”之間的區別

1. not defined一般會出現在控制臺，提示錯誤：“xxx is not defined”表示xxxx沒有被定義，是未定義的，
2. undefined一般是表示JS中變數宣告了如：var str；但是后續沒有對其進行賦值就直接alert等進行輸出操作，這時會提示undefined，即變數或者物件已經被定義但是沒有被賦值所以不知道該變數用來做什么，此時console.log該變數會是undefined，

36.什么是 JavaScript 中的提升操作

提升（hoisting）是 JavaScript 解釋器將所有變數和函式宣告移動到當前作用域頂部的操作，有兩種型別的提升：

• 變數提升——非常少見
• 函式提升——常見

無論 var（或函式宣告）出現在作用域的什么地方，它都屬于整個作用域，并且可以在該作用域內的任何地方訪問它，