3、$JavaScript（1）

一、閉包

• 閉包就是可以讀取其餘函數內部變量的函數

• 閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見的方式就是在一個函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量,利用閉包能夠突破做用鏈域

• 閉包的特性：

  • 函數內再嵌套函數
  • 內部函數能夠引用外層的參數和變量
  • 參數和變量不會被垃圾回收機制回收

說說你對閉包的理解

• 使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。在js中，函數即閉包，只有函數纔會產生做用域的概念

• 閉包 的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量始終保持在內存中

• 閉包的另外一個用處，是封裝對象的私有屬性和私有方法

• 好處：可以實現封裝和緩存等；

• 壞處：就是消耗內存、不正當使用會形成內存溢出的問題

使用閉包的注意點

• 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露

• 解決方法是，在退出函數以前，將不使用的局部變量所有刪除

二、說說你對做用域鏈的理解

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

• 簡單的說，做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期

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

• 每一個對象都會在其內部初始化一個屬性，就是prototype(原型)，當咱們訪問一個對象的屬性時

• 若是這個對象內部不存在這個屬性，那麼他就會去prototype裏找這個屬性，這個prototype又會有本身的prototype，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念

• 關係：instance.constructor.prototype = instance.__proto__

• 特色：

  • JavaScript對象是經過引用來傳遞的，咱們建立的每一個新對象實體中並無一份屬於本身的原型副本。當咱們修改原型時，與之相關的對象也會繼承這一改變

• 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的

• 就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象

四、請解釋什麼是事件代理

• 事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能

• 能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒

• 能夠實現當新增子對象時無需再次對其綁定

五、Javascript如何實現繼承？

• 構造繼承

• 原型繼承

• 實例繼承

• 拷貝繼承

• 原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式

 function Parent(){
        this.name = 'wang';
    }

    function Child(){
        this.age = 28;
    }
    Child.prototype = new Parent();//繼承了Parent，經過原型

    var demo = new Child();
    alert(demo.age);
    alert(demo.name);//獲得被繼承的屬性
  }

六、談談This對象的理解

• this老是指向函數的直接調用者（而非間接調用者）
• 若是有new關鍵字，this指向new出來的那個對象
• 在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this老是指向全局對象Window

七、事件

• 冒泡型事件：當你使用事件冒泡時，子級元素先觸發，父級元素後觸發

• 捕獲型事件：當你使用事件捕獲時，父級元素先觸發，子級元素後觸發

• DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件

• 阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下設置cancelBubble = true

• 阻止捕獲：阻止事件的默認行爲，例如click - <a>後的跳轉。在W3c中，使用preventDefault（）方法，在IE下設置window.event.returnValue = false

八、new操做符具體幹了什麼呢?

• 建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型

• 屬性和方法被加入到 this 引用的對象中

• 新建立的對象由 this 所引用，而且最後隱式的返回 this

九、Ajax原理

• Ajax的原理簡單來講是在用戶和服務器之間加了—箇中間層(AJAX引擎)，經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。使用戶操做與服務器響應異步化。這其中最關鍵的一步就是從服務器得到請求數據

• Ajax的過程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心機制

// 1. 建立鏈接
    var xhr = null;
    xhr = new XMLHttpRequest()
    // 2. 鏈接服務器
    xhr.open('get', url, true)
    // 3. 發送請求
    xhr.send(null);
    // 4. 接受請求
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText);
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }

ajax 有那些優缺點?

• 優勢：

  • 經過異步模式，提高了用戶體驗.
  • 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用.
  • Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。
  • Ajax能夠實現動態不刷新（局部刷新）

• 缺點：

  • 安全問題 AJAX暴露了與服務器交互的細節。
  • 對搜索引擎的支持比較弱。
  • 不容易調試。

十、如何解決跨域問題?

• jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

 

十一、模塊化開發怎麼作？

• 當即執行函數,不暴露私有成員

var module1 = (function(){
　　　　var _count = 0;
　　　　var m1 = function(){
　　　　　　//...
　　　　};
　　　　var m2 = function(){
　　　　　　//...
　　　　};
　　　　return {
　　　　　　m1 : m1,
　　　　　　m2 : m2
　　　　};
　　})();

十二、異步加載JS的方式有哪些？

• defer，只支持IE

• async：

• 建立script，插入到DOM中，加載完畢後callBack

1三、那些操做會形成內存泄漏？

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

• setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏

• 閉包使用不當

1四、XML和JSON的區別？

• 數據體積方面

  • JSON相對於XML來說，數據的體積小，傳遞的速度更快些。

• 數據交互方面

  • JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互

• 數據描述方面

  • JSON對數據的描述性比XML較差

• 傳輸速度方面

  • JSON的速度要遠遠快於XML

1五、談談你對webpack的見解

• WebPack 是一個模塊打包工具，你可使用WebPack管理你的模塊依賴，並編繹輸出模塊們所需的靜態文件。它可以很好地管理、打包Web開發中所用到的HTML、Javascript、CSS以及各類靜態文件（圖片、字體等），讓開發過程更加高效。對於不一樣類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後 生成了優化且合併後的靜態資源

1六、說說你對AMD和Commonjs的理解

• CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操做。AMD規範則是非同步加載模塊，容許指定回調函數

• AMD推薦的風格經過返回一個對象作爲模塊對象，CommonJS的風格經過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的

1七、常見web安全及防禦原理

• sql注入原理

  • 就是經過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令

• 總的來講有如下幾點

  • 永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等
  • 永遠不要使用動態拼裝SQL，可使用參數化的SQL或者直接使用存儲過程進行數據查詢存取
  • 永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接
  • 不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息

XSS原理及防範

• Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裏插入惡意html標籤或者javascript代碼。好比：攻擊者在論壇中放一個看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單，當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點

XSS防範方法

• 首先代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對」<」,」>」,」;」,」’」等字符作過濾；其次任何內容寫到頁面以前都必須加以encode，避免不當心把html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的XSS 攻擊

XSS與CSRF有什麼區別嗎？

• XSS是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。CSRF是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。要完成一次CSRF攻擊，受害者必須依次完成兩個步驟

• 登陸受信任網站A，並在本地生成Cookie

• 在不登出A的狀況下，訪問危險網站B

CSRF的防護

• 服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數
• 經過驗證碼的方法

1八、用過哪些設計模式？

• 工廠模式：

  • 工廠模式解決了重複實例化的問題，但還有一個問題,那就是識別問題，由於根本沒法
  • 主要好處就是能夠消除對象間的耦合，經過使用工程方法而不是new關鍵字

• 構造函數模式

  • 使用構造函數的方法，即解決了重複實例化的問題，又解決了對象識別的問題，該模式與工廠模式的不一樣之處在於
  • 直接將屬性和方法賦值給 this對象;

1九、爲何要有同源限制？

• 同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議

• 舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

20、offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別

• offsetWidth/offsetHeight返回值包含content + padding + border，效果與e.getBoundingClientRect()相同

• clientWidth/clientHeight返回值只包含content + padding，若是有滾動條，也不包含滾動條

• scrollWidth/scrollHeight返回值包含content + padding + 溢出內容的尺寸