前端面試題總結（三）JavaScript篇

前端面試題總結（三）JavaScript篇

1、談談對this的理解？

1. this是一個關鍵字。
2. this老是指向函數的直接調用者（而非間接調用者）。
3. 若是有new關鍵字，this指向new出來的那個對象。
4. 在計時器當中，this會指向window。
5. 在事件中，this指向觸發這個事件的對象，特殊的是，IE中的事件監聽中的this指向全局對象window。

2、eval是作什麼的？

1. eval()函數能夠把一個字符串當作一個JavaScript表達式同樣去執行它。
2. 它的功能是把對應的字符串解析成js代碼並運行。
3. 應該避免使用eval。不安全且很是耗性能（2次，一次解析成js語句，一次執行）

3、null和undefined的區別？

1. null是表示「無」的對象，轉爲數值時爲0，undefined是一個表示「無」的原始值，轉爲數值時爲NaN。
2. undefined出如今，變量被申明但沒賦值、調用函數時，應該提供的參數沒有提供、對象沒有賦值的屬性、函數沒有返回值時。
3. null做爲函數的參數時，表示該函數的參數不是對象。null也是原型鏈的終點。

4、call()和apply()的區別？
　　做用：動態改變某個類的某個方法的運行環境（執行上下文）。
　　區別：

1. 1. apply括號裏只能寫兩個參數，通常用於數組的操做中改變this的指向，call括號裏能夠寫多個參數。
   2. apply()函數有兩個參數：第一個是上下文，第二個是參數組成的數組。若是第一個參數是null，則使用全局對象代替。
   3. call()的第一個參數是上下文，後續是實例傳入的參數序列。
   4. 均可以改變this指向。apply優於call。

5、new操做符具體幹了什麼？

1. 建立一個空對象，而且this變量引用該對象，同時還繼承了該函數的原型。
2. 屬性和方法被加入到this引用的對象中。
3. 新建立的對象由this所引用，而且最後隱式的返回this。

6、性能優化的方式？

1. 減小http請求次數。
2. 用innerHTML代替dom操做，減小dom操做次數，優化JavaScript性能。
3. 當須要設置的樣式比較多時設置className而不是直接操做style。
4. 減小全局變量、緩存dom節點查找的結構，減小IO讀取操做。
5. 避免使用css表達式。（CSS Expression又稱Dynamic properties動態屬性）。
6. 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。
7. 前端模板 JS+數據，減小因爲HTML標籤致使寬帶浪費。
8. 用變量保存ajax請求結果，每次操做本地變量，不用請求減小請求次數。

7、哪些常見操做會致使內存泄漏？

　　內存泄漏指任何對象在您不在擁有或須要它以後仍然存在。

1. setTimeout的第一個參數使用字符串而非函數的話，會引起內存泄漏。
   • setTimeout能夠有三個參數，當第一個參數的函數括號裏面有形參的時候，後面的參數能夠做爲實參傳入。
2. 閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）。
   • 解決方法：垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲0（沒有其餘對象引用過該對象），或該對象的惟一引用是循環的，那麼該對象的內存便可回收。

8、原型、原型鏈、繼承？

1. 原型（prototype）：構造函數的一個專有屬性。原型是一個對象，其餘對象能夠經過他實現屬性繼承。
2. 繼承：指一個對象直接使用另外一個對象的屬性和方法。
3. 原型鏈：由一些用來繼承和共享屬性的對象組成的有限性的對象鏈（在javaScript中，每一個對象都有一個指向它的原型（prototype）對象的內部連接。這個原型對象又有本身的原型，直到某個對象的原型爲 null 爲止（也就是再也不有原型指向），組成這條鏈的最後一環。這種一級一級的鏈結構就稱爲原型鏈（prototypechain））。

9、什麼是閉包？爲何要用它？

1. 閉包就是一個能夠訪問其餘函數內部變量的函數。
2. 使用閉包主要是爲了設計已有的方法和變量。
3. 在js中，函數即閉包，只有函數纔會產生做用域的概念。
4. 閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄漏。
5. 閉包的的特性：函數內再嵌套函數、內部函數能夠引用外層的參數和變量、參數和變量不會被垃圾回收機制回收。

10、typeof返回哪些數據類型？

　　undefined、object、number、function、Boolean。

11、split和join的區別？

　　前者是切割成數組的形式，後者是將數組轉換成字符串。

12、IE和DOM事件流的區別？

　　執行順序不一樣、參數不同、事件加不加on、this指向問題。

十3、本地對象、內置對象、宿主對象？

• 本地對象爲array、obj、regexp等能夠new實例化。
• 內置對象爲gload Math等不能夠實例化的。
• 宿主對象爲瀏覽器自帶的document，window等。

十4、對做用域鏈的理解？

　　做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

十5、同步和異步的區別？

• 同步是阻塞模式，異步是非阻塞模式。
• 同步：腳本會停留並等待服務器發送回覆而後再繼續。
• 異步：腳本容許頁面繼續其進程並處理可能的回覆，能夠提升執行效率。

十6、什麼叫僞數組？怎麼轉化爲標準數組？

　　僞數組：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍可使用真正數組遍歷的方法來遍歷。
　　典型的是argument參數（實參對象），getElementsByTagName，childNodes之類的，返回nodeList對象都屬於僞數組。
　　轉換：使用Array.prototype.slice.call(僞數組)。

十7、js繼承方式的優缺點？

1. 原型鏈繼承：字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。
2. 借用構造函數繼承（類式繼承）：沒有原型，不能複用。可是解決了字面量重寫原型會中段關係問題和子類型給超類型傳參問題。
3. 組合繼承（原型鏈+構造函數）：使用原型鏈實現對原型屬性和方法的繼承，從而經過借用構造函數實現對實例屬性的繼承。既經過在原型上定義方法實現了函數複用，又保證每一個實例都有本身的屬性。

十8、減小頁面加載時間的方法？

1. 優化圖片。
2. 圖形格式選擇。
3. 優化css（壓縮合並css）。
4. 網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄）。
5. 標明高度和寬度。
6. 減小http請求。

十9、cookie的弊端？

　　cookie在持久保存客戶端數據提供了方便，分擔了服務器存儲壓力。

1. 每一個特定域名下最多生成20個cookie（IE6<=20,IE7+<=50,火狐<=50,谷歌和Safari無限制）。
2. IE和Opera會清理近期最少使用的cookie，火狐會隨機清理。
3. cookie最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。
4. 安全性問題。
5. 有些狀態不能保存在客戶端（表單）。

　　優勢：極高的擴展性和可用性。
　　缺點：cookie數量和長度有限制，安全性問題，有些狀態不能保存在客戶端。

二10、document.write和innerHTML的區別？

• 前者只能重繪整個頁面，後者能夠重繪頁面的一部分。
• document.write()能夠用在兩個方面：頁面載入過程當中實時腳本建立頁面內容，以及用延時腳本建立本窗口或新窗口的內容。
• document.write只能繪製整個頁面。innerHTML能夠重繪頁面的一部分。

二11、js建立對象的方式？

1. 工程模式。
2. 構造函數模式。
3. 原型模式。
4. 混合構造函數和原型模式（組合模式）。
5. 動態原型模式。
6. 寄生構造函數模式。
7. 穩妥構造函數模式。

二11、繼承的幾種方式？

1. 原型鏈繼承。（字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。）
2. 借用構造函數繼承（類式繼承）。（沒有原型，不能複用。可是解決了字面量重寫原型會中段關係問題和子類型給超類型傳參問題。）
3. 組合繼承（原型+借用構造）。（使用原型鏈實現對原型屬性和方法的繼承，從而經過借用構造函數實現對實例屬性的繼承。既經過在原型上定義方法實現了函數複用，又保證每一個實例都 有本身的屬性。）
4. 原型式繼承。
5. 寄生式繼承。
6. 寄生組合式繼承。

二12、異步加載和延遲加載？

• 異步加載：動態建立script標籤，經過ajax區獲取js代碼，經過eval執行，script標籤上添加的defer或async屬性。
• 延遲加載：有些js代碼並非頁面初始化的時候就馬上須要的，而是稍後的某些狀況才須要的。
• js延遲加載的方式有哪些？
• defer和async、動態建立DOM方式（經常使用）、按需異步載入js。

二十3、get和post的區別？使用場景？

• get：通常用於信息獲取，使用url傳遞參數，對所發送信息的數量也有限制，通常在2000個字符。
• post：通常用於修改服務器的資源，對所發送的信息沒有限制。
• get方式須要使用Request.QueryString來取得變量的值，而post方式經過Request.Form來獲取變量的值，也就是說get是經過地址欄來傳值，而post是經過提交表單來傳值的。
• 使用場景：

1. 1. 接口規定用哪一個就用哪一個。
   2. 接口兩個都容許，首選get。
   3. 發送包含未知字符的用戶輸入時，post比get更穩定也更可靠。
   4. 沒法使用緩存文件（更新服務器上的文件或數據庫）使用post。
   5. 向服務器發送大量數據使用post。

二十4、哪些地方會出現css阻塞，哪些地方會出現js阻塞？

• js的阻塞特性：全部瀏覽器在下載js的時候，會阻止一切其餘活動（好比其餘資源下載、內容呈現等），直到js下載、解析、執行完成後才繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代的瀏覽器都支持並行下載js，可是js下載仍然會阻塞其餘資源的下載（好比圖片、css文件等）。
• 因爲瀏覽器爲了防止出現js修改dom樹，須要從新構建dom樹的狀況，因此就會阻塞其餘的下載和呈現。
• 嵌入js會阻塞全部內容的呈現，而外部js只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻止外部腳本的執行。
• css怎麼會阻塞加載了？

1. 1. css原本是能夠並行下載的，可是在IE6下css是會阻塞加載的。
   2. 當css後面跟着嵌入js的時間，該css就會出現阻塞後面資源下載的狀況。而把嵌入js放到css前面，就不會出現阻塞狀況了。
   3. 根本緣由：由於瀏覽器會維持HTML中css和js的順序，樣式表必須在嵌入的js執行前先加載、解析完。而嵌入的js會阻塞後面的資源加載，因此就會出現css阻塞下載的狀況。

• 嵌入js應該放在什麼位置？

1. 1. 放在底部，雖然仍然會阻塞全部呈現，但不會阻塞資源下載。
   2. 若是放在head中，請放在css頭部。
   3. 使用defer（只支持IE）。
   4. 不要在嵌入的js中運行時間較長的函數，若是必定要用，能夠用setTimeout來調用。

• js無阻塞加載具體方式？
  • 將腳本放在底部。link仍是放在head中，能夠保證在js加載前，能加載出正常顯示的頁面。script放在body底部。
  • 成組腳本：因爲每一個script標籤下載時阻塞頁面解析過程，因此如今頁面的script總數也能夠改善性能。適用於內聯腳本和外部腳本。
  • 非阻塞腳本：等頁面加載完成後，再加載js代碼。也就是，在window.onload事件發出後開始下載代碼。
  1. 1. defer屬性：支持IE4和fierfox3.5更高版本瀏覽器。
     2. 動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔（不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。）。

二十5、事件、IE與火狐的事件機制有什麼區別？怎麼阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件），也就是能夠被JavaScript偵測到的行爲。
2. 事件處理機制：IE是事件冒泡、Firefox同時指出兩種事件模型（捕獲與冒泡）。
3. ev.stopPropagation();舊IE爲：ev.cancelBubble=true;

JavaScript垃圾回收的方法？

 

1. 標記清除：（常見）
   • 原理:當變量進入執行環境的時候，好比函數中申明一個變量，垃圾回收期將其標記爲「進入環境」，當變量離開執行環境的時候（函數執行結束），將其標記爲「離開環境」。
   • 垃圾回收器會在運行的時候給存儲在內存中的全部變量加一個標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量。
2. 引用計數：

• • 原理：跟蹤記錄每一個值被使用的次數，當申明瞭一個變量並將一個引用類型的值賦值給該變量時，這個值的引用次數+1，若是該變量的值變成另外一個，則其引用次數-1，當這個值的引用次數爲0時，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

 

　　在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收，但BOM與DOM對象倒是經過引用計數回收垃圾的， 也就是說只要涉及BOM及DOM就會出現循環引用問題。

 

attribute和property的區別？

• attribute是dom元素在文檔中做爲HTML標籤擁有的屬性；
• property就是dom元素在js中做爲對象擁有的屬性；
• 對於HTML的標準屬性來講，二者是同步的，會自動更新，可是對於自定義的屬性來講，他們是不一樣步的。

 

 

二十8、什麼是事件代理？

• 事件代理又稱爲事件委託。是JavaScript中綁定事件的經常使用技巧。「事件委託」就是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。
• 事件代理的原理就是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能。
• 優勢：
  1. 能夠大量節省內存佔用，減小事件註冊。
  2. 能夠實現黨新增子對象時無需再次對其綁定事件，對於動態內容部分尤其合適。

 

 

 

二十9、Web Worker和webSocket？

• Web worker主線程：
  • 咱們整個程序在建立一個新程序的時候，是存在着一個線程的，咱們稱做主線程。而後再支持咱們程序的運行。它的任務是響應用戶操做的。
  • 做用：若是讓主線程執行一個複雜的操做會很卡，咱們能夠吧複雜的任務經過webworkers來處理，而後把處理的結果返回給主UI，處理主UI，這樣就不會影響主UI了。

1. 1. 經過worker = new Worker(url)加載一個js文件來建立一個worker，同時返回一個worker實例。
   2. 經過worker.postMessage(data)方法向我worker發送數據。
   3. 綁定worker.onmessage方法來接收worker發送過來的數據。
   4. 可使用worker.terminate()來終止一個worker的執行。

• webSocket是web應用程序的傳輸協議，它提供了雙向的，按需到達的數據流。他是一個HTML5協議，websocket的連接是持久的，它經過在客戶端和服務器之間保持雙工連接，服務器的更新能夠被計時推送給客戶端，二不須要客戶端以必定時間間隔區輪詢。

 

如何刪除一個cookie？

1. 將時間設爲當前時間往前一點。
2. expires設置爲new Date(0);

 

 

三11、求一個字符串的字節長度？
　　假設一個英文字符佔一個字節，一個漢字佔兩個字節。

1 2 3 4 5 6 7 8 9

function  GetBytes(str){      var  len = str.length;      var  bytes = len;      for ( var  i=0; i<len; i++){          if  (str.charCodeAt(i) > 255) bytes++;      }      return  bytes; } alert(GetBytes( "你好,as" ));

三12、js對象、瀏覽器對象？

• js內置對象 ——Array、Boolean、Date、Math、Number、String、ReqExp、Global
• 瀏覽器內置對象 ——Window、Nacigator、Screen、History、Location

三十3、事件綁定和普通事件有什麼區別？（傳統事件綁定和符合W3C標準的事件綁定有什麼區別？）

 

1 2	div1.onclick= function (){}; <button onmouseover=」」></button>

 

1. 若是說給同一個元素綁定了兩次或者屢次相同類型的事件，那麼後面的綁定會覆蓋前面的綁定
2. 不支持DOM事件流 事件捕獲階段è目標元素階段=>事件冒泡階段
3. addEventListener
   • 若是說給同一個元素綁定了兩次或者屢次相同類型的事件，因此的綁定將會依次觸發
   • 支持DOM事件流的
   • 進行事件綁定傳參不須要on前端
4. addEventListener(「click」,function(){},true);//此時的事件就是在事件冒泡階段執行
5. ie9開始，ie11 edge：addEventListener
6. ie9之前：attachEvent/detachEvent
   1. 進行事件類型傳參須要帶上on前綴
   2. 這種方式只支持事件冒泡，不支持事件捕獲
7. 事件綁定是指把事件註冊到具體的元素之上，普通事件指的是能夠用來註冊的事件

三十3、當一個DOM節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？

1. 直接在DOM裏綁定事件：<div onclick=」test()」></div>
2. 在JS裏經過onclick綁定：xxx.onclick = test
3. 經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
4. 那麼問題來了，Javascript的事件流模型都有什麼？
   1. 「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
   2. 「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
   3. 「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡

三十4、列舉瀏覽器對象模型BOM裏經常使用的至少4個對象，並列舉window對象的經常使用方法至少5個

• 對象：Window document location screen history navigator
• 方法：Alert() confirm() prompt() open() close()

三十5、把 Script 標籤 放在頁面的最底部的body封閉以前 和封閉以後有什麼區別？瀏覽器會如何解析它們？

• 若是說放在body的封閉以前，將會阻塞其餘資源的加載
• 若是放在body封閉以後，不會影響body內元素的加載

三十6、BOM對象有哪些，列舉window對象？

1. window對象 ，是JS的最頂層對象，其餘的BOM對象都是window對象的屬性；
2. document對象，文檔對象；
3. location對象，瀏覽器當前URL信息；
4. navigator對象，瀏覽器自己信息；
5. screen對象，客戶端屏幕信息；
6. history對象，瀏覽器訪問歷史信息；

三十7、window.onload 和 document.ready的區別？

• load要等到圖片和包含的文件都加在進來以後執行；
• ready是不包含圖片和非文字文件的文檔結構準備好就執行；

三十8、爲何擴展javascript內置對象不是好的作法？
　　由於擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性

三十9、JavaScript原型，原型鏈 ? 有什麼特色？

• 原型對象也是普通的對象，是對象一個自帶隱式的__proto__屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
• 原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。