JavaScript部分

1.引起內存泄漏的操作有哪些

1.全局變量引起

2.閉包引起

3.dom清空，事件未清除

4.子元素存在引用

5.被遺忘的計時器

2.如何實現ajax請求

通過實例化一個XMLHttpRequest對象得到一個實例，

調用實例的open方法為這次 ajax請求設定相應的http方法、相應的地址和以及是否異步，當然大多數情況下我們都是選異步，

以異步為例，之後調用send方法ajax請求，這個方法可以設定需要發送的報文主體，

然後通過 監聽readystatechange事件，通過這個實例的readyState屬性來判斷這個ajax請求的狀態，其中分為0,1,2,3,4這四種 狀態，

當狀態為4的時候也就是接收數據完成的時候，這時候可以通過實例的status屬性判斷這個請求是否成功。

var xhr = new XMLHttpRequest();
xhr.open(‘get‘, ‘aabb.php‘, true);
xhr.send(null);
xhr.onreadystatechange = function() {
  if(xhr.readyState==4) {
    if(xhr.status==200) {
      console.log(xhr.responseText);
    }
  }
}

3.簡要介紹ES6

ES6在變量的聲明和定義方面增加了let、const聲明變量，有局部變量的概念，賦值中有比較吸引人的結構賦值，同時ES6對字符串、 數組、正則、對象、函數等拓展了一些方法，如字符串方面的模板字符串、函數方面的默認參數、對象方面屬性的簡潔表達方式，ES6也 引入了新的數據類型symbol，新的數據結構set和map,symbol可以通過typeof檢測出來，為解決異步回調問題，引入了promise和 generator，還有最為吸引人了實現Class和模塊，通過Class可以更好的面向對象編程，使用模塊加載方便模塊化編程，當然考慮到 瀏覽器兼容性，我們在實際開發中需要使用babel進行編譯。

4.對js原型的理解

我們知道在es6之前，js沒有類和繼承的概念，js是通過原型來實現繼承的。在js中一個構造函數默認自帶有一個prototype屬性， 這個的屬性值是一個對象，同時這個prototype對象自帶有一個constructor屬性，這個屬性指向這個構造函數，同時每一個實例 都有一個__proto__屬性指向這個prototype對象，我們可以將這個叫做隱式原型，我們在使用一個實例的方法的時候，會先檢查 這個實例中是否有這個方法，沒有則會繼續向上查找這個prototype對象是否有這個方法，剛剛我們說到prototype是一個對象， 那麽也即是說這個是一個對象的實例，那麽這個對象同樣也會有一個__proto__屬性指向對象的prototype對象。

5.對js模塊化的理解

在ES6出現之前，js沒有標準的模塊化概念，這也就造成了js多人寫作開發容易造成全局汙染的情況，以前我們可能會采用立即執行 函數、對象等方式來盡量減少變量這種情況，後面社區為了解決這個問題陸續提出了AMD規範和CMD規範，這裏不同於Node.js的 CommonJS的原因在於服務端所有的模塊都是存在於硬盤中的，加載和讀取幾乎是不需要時間的，而瀏覽器端因為加載速度取決於網速， 因此需要采用異步加載，AMD規範中使用define來定義一個模塊，使用require方法來加載一個模塊，現在ES6也推出了標準的模塊 加載方案，通過exports和require來導出和導入模塊。

6.簡要介紹事件代理，以及什麽時候使用，事件代理發生在事件處理流程的哪個階段，有什麽好處？

事件代理就是說我們將事件添加到本來要添加事件的父節點，將事件委托給父節點來觸發處理函數，這通常會在 這通常會使用在大量的同級元素需要添加同一類事件的時候，比如一個動態的非常多的列表，需要為每個列表項都添加 點擊事件，這時可以使用事件代理，通過判斷e.target.nodeName來判斷發生的具體元素，從而判斷是否是在 列表項中觸發，這樣的好處是可以減少事件綁定，同時動態的DOM結構仍然可以監聽。事件代理發生在冒泡階段。

7.使用new操作符實例化一個對象的具體步驟

1.構造一個新的對象

2.將構造函數的作用域賦給新對象（也就是說this指向了新的對象）

3.執行構造函數中的代碼

4.返回新對象

8.遞歸和叠代的區別是什麽，各有什麽優缺點？

程序調用自身稱為遞歸，利用變量的原值推出新值稱為叠代，遞歸的優點 大問題轉化為小問題，可以減少代碼量，同時應為代碼精簡，可讀性好， 缺點就是，遞歸調用浪費了空間，而且遞歸太深容易造成堆棧的溢出。叠代的好處 就是代碼運行效率好，因為時間只因循環次數增加而增加，而且沒有額外的空間開銷， 缺點就是代碼不如遞歸簡潔

9.策略模式是什麽，說一下你的理解？

策略模式就是說我們將一系列的算法封裝起來，使其相互之間可以替換，封裝的算法具有一定的獨立性，不會隨客戶端的變化而變化，比較常見的使用常見就是類似於 表單驗證這種多場景的情況，我們使用策略模式就可以避免使用一堆的if...else。

10.js如何判斷網頁中圖片加載成功或者失敗

使用onload事件運行加載成功，使用onerror事件判斷失敗

11.原生JS操作DOM的方法有哪些？

獲取節點的方法getElementById、getElementsByClassName、getElementsByTagName、 getElementsByName、querySelector、querySelectorAll,對元素屬性進行操作的 getAttribute、 setAttribute、removeAttribute方法，對節點進行增刪改的appendChild、insertBefore、replaceChild、removeChild、 createElement等

12.typeof操作符返回值有哪些，對undefined、null、NaN使用這個操作符分別返回什麽

typeof的返回值有undefined、boolean、string、number、object、function、symbol。對undefined 使用返回undefined、null使用返回object，NaN使用返回number

13.setTimeout和setInterval的區別，包含內存方面的分析？

setTimeout表示間隔一段時間之後執行一次調用，而setInterval則是每間隔一段時間循環調用，直至clearInterval結束。 內存方面，setTimeout只需要進入一次隊列，不會造成內存溢出，setInterval因為不計算代碼執行時間，有可能同時執行多次代碼， 導致內存溢出。

14.同源策略是什麽？

同源策略是指只有具有相同源的頁面才能夠共享數據，比如cookie，同源是指頁面具有相同的協議、域名、端口號，有一項不同就不是同源。 有同源策略能夠保證web網頁的安全性。

15.如何阻止事件冒泡和默認事件？

標準的DOM對象中可以使用事件對象的stopPropagation()方法來阻止事件冒泡，但在IE8以下中IE的事件對象通過設置事件對象的cancelBubble屬性為true來阻止冒泡；

默認事件的話通過事件對象的preventDefault()方法來阻止，而IE通過設置事件對象的returnValue屬性為false來阻止默認事件。

16.如何實現懶加載？

懶加載就是根據用戶的瀏覽需要記載內容，也就是在用戶即將瀏覽完當前的內容時進行繼續加載內容，這種技術常常用來加載圖片的時候使用。我們判斷用戶是否即將瀏覽到底部之後進行在家內容 這時候可能會需要加載大量的內容，可以使用fragment來優化一下，因為大部分是使用滑動和滾輪來觸發的，因此很有可能會不斷觸發，可以使用函數節流做一個優化，防止用戶不斷觸發。

17.函數節流是什麽？

函數節流就是讓一個函數無法在很短的時間間隔內連續調用，而是間隔一段時間執行，這在我們為元素綁定一些事件的時候經常會用到，比如我們 為window綁定了一個resize事件，如果用戶一直改變窗口大小，就會一直觸發這個事件處理函數，這對性能有很大影響。

18.瀏覽器內核有哪些？分別對應哪些瀏覽器？

常見的瀏覽器內核有Trident、Gecko、WebKit、Presto，對應的瀏覽器為Trident對應於IE，Gecko對應於火狐瀏覽器，Webkit有chrome和safari，Presto 有Opera。

19.什麽是深拷貝，什麽是淺拷貝？

淺拷貝是指僅僅復制對象的引用，而不是復制對象本身；深拷貝則是把復制對象所引用的全部對象都復制一遍。

20.請說一下實現jsonp的實現思路？

jsonp的原理是使用script標簽來實現跨域，因為script標簽的的src屬性是不受同源策略的影響的，因此可以使用其來跨域。一個最簡單的jsonp就是創建一個script標簽，設置src為相應的url，在url之後添加相應的callback，格式類似於 url?callback=xxx，服務端根據我們的callback來返回相應的數據，類似於res.send(req.query.callback + ‘(‘+ data + ‘)‘)，這樣就實現了一個最簡單的jsonp

21.原生js字符串方法有哪些？

簡單分為獲取類方法，獲取類方法有charAt方法用來獲取指定位置的字符，獲取指定位置字符的unicode編碼的charCodeAt方法， 與之相反的fromCharCode方法，通過傳入的unicode返回字符串。查找類方法有indexof()、lastIndexOf()、search()、match() 方法。截取類的方法有substring、slice、substr三個方法，其他的還有replace、split、toLowerCase、toUpperCase方法。

22.將靜態資源放在其他域名的目的是什麽？

這樣做的主要目的是在請求這些靜態資源的時候不會發送cookie，節省了流量，需要註意的是cookie是會發送給子域名的（二級域名），所以這些靜態資源是不會放在子域名下的， 而是單獨放在一個單獨的主域名下。同時還有一個原因就是瀏覽器對於一個域名會有請求數的限制，這種方法可以方便做CDN。

23.ajax的readyState有哪幾個狀態，含義分別是什麽？

ajax的readyState共有5個狀態，分別是0-4，其中每個數字的含義分別是0代表還沒調用open方法，1代表的是未調用send方法，也就是還沒發送數據給服務器 2代表的是還沒有接收到響應，3代表的是開始接收到了部分數據，4代表的是接收完成，數據可以在客戶端使用了。

前端面試問題（JavaScript）