面試題累計--js方面

一、javascript的閉包

　　閉包簡單的說就說一個函數能訪問外部函數的變量，這就是閉包

function a(x){
    var item = 3;
    function b(y){
        console.log(x+y+item);
    }
}

 

a函數中的b函數就是閉包了，b函數可使用a函數的局部變量，參數，最典型的的閉包應該就是下面這樣，將定義在函數中的函數做爲返回值

function a(x){
    var item = 3;
    function b(y){
        console.log(x+y+item);
    }
    return b;
}

 

閉包的缺點是，由於內部閉包函數能夠訪問外部函數的變量，因此外部函數的變量不能被釋放，若是閉包嵌套過多，會致使內存佔用大，要合理使用閉包。

 

二、new操做符到底作了什麼

首先，new操做符爲咱們建立了一個新的空對象，而後this變量指向該對象。

其次，空對象的原型指向構造函數的原型，

最後，改變構造函數內部的this的指向

 

三、改變函數內部this指針的指向函數

call和apply，假設要改變fn函數內部的this指向，指向obj，那麼能夠fn.call(boj)；或者fn.apply(boj)；那麼問題來了，call和apply和區別是什麼，其實call和apply的區別在於參數，他們兩個的第一個參數都是同樣的，表示調用該函數的對象，apply的第二個參數是數組，是[arg1,arg2,arg3]這種形式，而call是 arg1,arg2,arg3這樣的形式。還有一個bind函數。

var bar = fn.bind(obj)；那麼fn中的this就指向obj對象了，bind函數返回新的函數，這個函數內的this指針指向obj對象。

 

四、javascript的做用域和做用域鏈

　　javascript的做用域指的是變量的做用範圍，內部做用域由函數的形參，實參，局部變量，函數構成，內部做用域和外部的做用域一層層的連接起來造成做用域鏈，當在函數內部要訪問一個變量的時候，首先查找本身內部做用域有沒有這個變量，若是沒有就到外部的做用域去查找，仍是沒有的話，就到再外面一層做用域中找，直至window所在的做用域，每一個函數在聲明的時候就默認有一個外部做用域鏈存在了，好比：

var t=4;
function foo(){
       var tem=12;
      function bar(){
       var temo=34;
       console.log(t+" "+tem+" "+temo);
      }
}

 

在bar函數中找t變量的過程就是，先到本身的內部做用域中找，發現沒有找到，而後到bar所在的最近的外部環境中找，也就是foo的內部做用域，仍是沒有找到，再到window的做用域中找，結果找到了。

 

五、javascript的繼承

原型繼承

 

function A(name){ this.name = name; }
A.prototype.sayName = function(){ console.log(this.name); }
function B(age){ this.age = age; }
B.prototype = new A("lhz");
var foo = new B(18);
foo.age;    //18
foo.name;    //lhz
foo.sayName();    //lhz

 

 

 

這種方法的缺點：第一個缺點是全部子類共享父類實例，若是某一個子類修改了父類，其餘的子類在繼承的時候，會形成意想不到的後果。第二個缺點是在構造子類實例的時候，不能給父類傳遞參數。

 

構造函數繼承：

function B(age,name){
    this.age = age;
    A.call(this, name);
}
var foo = new B(18, "lhz");
foo.name;    //lhz
foo.age;    //18
foo.sayName();    //undefined

 

採用這種方式繼承是把A中的屬性加到this上面，這樣name至關於就是B的屬性，sayName不在A的構造函數中，因此訪問不到sayName。這種方法的缺點是父類的prototype中的函數不能複用。

 

原型繼承+構造函數繼承

function B(age, name){
    this.age = age;
    A.all(this,name);
}
B.prototype = new A("mbj");
var foo = new B(18, "lhz");
foo.name;    //lhz
foo.age;    //18
foo.sayName();    //lhz

 

這樣就能夠成功訪問sayName函數了，結合了上述兩種方式的優勢，可是這種方式也有缺點，那就是佔用的空間更大了。

 

六、ajax的優缺點

優勢：

（1）無刷新更新數據

AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減小用戶等待時間，帶來很是好的用戶體驗。

（2）異步與服務器通訊

AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了Browser和Server之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。

（3）前端和後端負載平衡

AJAX能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。

（4）基於標準被普遍支持

AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。隨着Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。一樣，也出現了另外一種輔助程序設計的技術，爲那些不支持JavaScript的用戶提供替代功能。

（5）界面與應用分離

Ajax使WEB中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的WEB應用程序錯誤、提升效率、也更加適用於如今的發佈系統。

 

缺點：

（1）ajax幹掉了back和history功能，即對瀏覽器機制的破壞

在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，由於瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差異很是微妙；用戶一般會但願單擊後退按鈕可以取消他們的前一次操做，可是在Ajax應用程序中，這將沒法實現。
後退按鈕是一個標準的web站點的重要功能，可是它無法和js進行很好的合做。這是Ajax所帶來的一個比較嚴重的問題，由於用戶每每是但願可以經過後退來取消前一次操做的。那麼對於這個問題有沒有辦法？答案是確定的，用過Gmail的知道，Gmail下面採用的Ajax技術解決了這個問題，在Gmail下面是能夠後退的，可是，它也並不能改變Ajax的機制，它只是採用的一個比較笨可是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，經過建立或使用一個隱藏的IFRAME來重現頁面上的變動。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，而後將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）
可是，雖說這個問題是能夠解決的，可是它所帶來的開發成本是很是高的，並與Ajax框架所要求的快速開發是相背離的。這是Ajax所帶來的一個很是嚴重的問題。
一個相關的觀點認爲，使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片段標識符（一般被稱爲錨點，即URL中#後面的部分）來保持跟蹤，容許用戶回到指定的某個應用程序狀態。（許多瀏覽器容許JavaScript動態更新錨點，這使得Ajax應用程序可以在更新顯示內容的同時更新錨點。）這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。

（2）ajax的安全問題

AJAX技術給用戶帶來很好的用戶體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。Ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有Ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於Credentials的安全漏洞等等。

（3）對搜索引擎支持比較弱

對搜索引擎的支持比較弱。若是使用不當，AJAX會增大網絡數據的流量，從而下降整個系統的性能。

（4）破壞程序的異常處理機制

至少從目前看來，像Ajax.dll，Ajaxpro.dll這些Ajax框架是會破壞程序的異常機制的。關於這個問題，曾在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來作了一次試驗，分別採用Ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。

（5）違背url和資源定位的初衷

例如，我給你一個URL地址，若是採用了Ajax技術，也許你在該URL地址下面看到的和我在這個URL地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。

 

七、用代碼實現一個簡易的 jsonp demo

export function jsonp (url , data, callback){

　　url += (url.indexOf("?") < 0 ? "?" : "&") + param(data);

　　return new Promise((resolve, reject) =>{

　　　　const script = document.createElement('script');

　　　　const callBackSymbol = `cb${Math floor( Math.random() * 1000 )}`;

　　　　if(callback){

　　　　　　url += `&${callback}=${callbackSymbol}`;

　　　　}else{

　　　　　　url += `&callback=${callbackSymbol}`;

　　　　}

　　　　window[callbackSymbol] = function(res){

　　　　　　document.querySelector("head").removeChild(script);

　　　　　　delete window.callbackSymbol;

　　　　　　resolve(res);

　　　　}

　　　　script.setAttribute("src", url);

　　　　document.querySelector("head").appendChild(script);

　　})

}