1 閉包

• 閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
• 閉包是指有權訪問另?個函數(shù)作?域中變量的函數(shù)，創(chuàng)建閉包的最常?的?式就是在?個函數(shù)內(nèi)創(chuàng)建另?個函數(shù)，通過另?個函數(shù)訪問這個函數(shù)的局部變量,利?閉包可以突破作?鏈域
• 閉包的特性：
  • 函數(shù)內(nèi)再嵌套函數(shù)
  • 內(nèi)部函數(shù)可以引?外層的參數(shù)和變量
  • 參數(shù)和變量不會被垃圾回收機制回收

說說你對閉包的理解

• 使?閉包主要是為了設計私有的?法和變量。閉包的優(yōu)點是可以避免全局變量的污染，缺點是閉包會常駐內(nèi)存，會增?內(nèi)存使?量，使?不當很容易造成內(nèi)存泄露。在js中，函數(shù)即閉包，只有函數(shù)才會產(chǎn)?作?域的概念
• 閉包 的最??處有兩個，?個是可以讀取函數(shù)內(nèi)部的變量，另?個就是讓這些變量始終保持在內(nèi)存中
• 閉包的另?個?處，是封裝對象的私有屬性和私有?法
• 好處：能夠?qū)崿F(xiàn)封裝和緩存等；
• 壞處：就是消耗內(nèi)存、不正當使?會造成內(nèi)存溢出的問題

使?閉包的注意點

• 由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很?，所以不能濫?閉包，否則會造成??的性能問題，在IE中可能導致內(nèi)存泄露
• 解決?法是，在退出函數(shù)之前，將不使?的局部變量全部刪除

2 說說你對作?域鏈的理解

• 作?域鏈的作?是保證執(zhí)?環(huán)境?有權訪問的變量和函數(shù)是有序的，作?域鏈的變量只能向上訪問，變量訪問到 window 對象即被終?，作?域鏈向下訪問變量是不被允許的
• 簡單的說，作?域就是變量與函數(shù)的可訪問范圍，即作?域控制著變量與函數(shù)的可?性和?命周期

3 JavaScript原型，原型鏈 ? 有什么特點？

• 每個對象都會在其內(nèi)部初始化?個屬性，就是 prototype (原型)，當我們訪問?個對象的屬性時
• 如果這個對象內(nèi)部不存在這個屬性，那么他就會去 prototype ?找這個屬性，這個prototype ?會有??的 prototype ，于是就這樣?直找下去，也就是我們平時所說的原型鏈的概念
• 關系： instance.constructor.prototype = instance.proto
• 特點：
  • JavaScript 對象是通過引?來傳遞的，我們創(chuàng)建的每個新對象實體中并沒有?份屬于??的原型副本。當我們修改原型時，與之相關的對象也會繼承這?改變
• 當我們需要?個屬性的時， Javascript 引擎會先看當前對象中是否有這個屬性， 如果沒有的
• 就會查找他的 Prototype 對象是否有這個屬性，如此遞推下去，?直檢索到 Object 內(nèi)建對象

4 請解釋什么是事件代理

• 事件代理（ Event Delegation ），?稱之為事件委托。是 JavaScript 中常?綁定事件的常?技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委托給?元素，讓?元素擔當事件監(jiān)聽的職務。事件代理的原理是DOM元素的事件冒泡。使?事件代理的好處是可以提?性能
• 可以?量節(jié)省內(nèi)存占?，減少事件注冊，?如在 table 上代理所有 td 的 click 事件就?常棒
• 可以實現(xiàn)當新增?對象時?需再次對其綁定

5 Javascript如何實現(xiàn)繼承？

• 構(gòu)造繼承
• 原型繼承
• 實例繼承
• 拷?繼承
• 原型 prototype 機制或 apply 和 call ?法去實現(xiàn)較簡單，建議使?構(gòu)造函數(shù)與原型混合?式

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);//得到被繼承的屬性

6 談談This對象的理解

• this 總是指向函數(shù)的直接調(diào)?者（??間接調(diào)?者）
• 如果有 new 關鍵字， this 指向 new 出來的那個對象
• 在事件中， this 指向觸發(fā)這個事件的對象，特殊的是， IE 中的 attachEvent 中的this 總是指向全局對象 Window

7 事件模型

W3C 中定義事件的發(fā)?經(jīng)歷三個階段：捕獲階段（ capturing ）、?標階段（ targetin ）、冒泡階段（ bubbling ）

• 冒泡型事件：當你使?事件冒泡時，?級元素先觸發(fā)，?級元素后觸發(fā)
• 捕獲型事件：當你使?事件捕獲時，?級元素先觸發(fā)，?級元素后觸發(fā)
• DOM 事件流：同時?持兩種事件模型：捕獲型事件和冒泡型事件
• 阻?冒泡：在 W3c 中，使? stopPropagation() ?法；在IE下設置 cancelBubble =true
• 阻?捕獲：阻?事件的默認?為，例如 click - 后的跳轉(zhuǎn)。在 W3c 中，使?preventDefault() ?法，在 IE 下設置 window.event.returnValue = false

8 new操作符具體?了什么呢?

• 創(chuàng)建?個空對象，并且 this 變量引?該對象，同時還繼承了該函數(shù)的原型
• 屬性和?法被加?到 this 引?的對象中
• 新創(chuàng)建的對象由 this 所引?，并且最后隱式的返回 this

9 Ajax原理

• Ajax 的原理簡單來說是在?戶和服務器之間加了—個中間層( AJAX 引擎)，通過XmlHttpRequest 對象來向服務器發(fā)異步請求，從服務器獲得數(shù)據(jù)，然后? javascrip t來操作 DOM ?更新??。使?戶操作與服務器響應異步化。這其中最關鍵的?步就是從服務器獲得請求數(shù)據(jù)
• Ajax 的過程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核?機制

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

ajax 有那些優(yōu)缺點?

• 優(yōu)點：
  • 通過異步模式，提升了?戶體驗.
  • 優(yōu)化了瀏覽器和服務器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占?.
  • Ajax 在客戶端運?，承擔了?部分本來由服務器承擔的?作，減少了??戶量下的服務器負載。
  • Ajax 可以實現(xiàn)動態(tài)不刷新（局部刷新）
• 缺點：
  • 安全問題 AJAX 暴露了與服務器交互的細節(jié)。
  • 對搜索引擎的?持?較弱。
  • 不容易調(diào)試。

10 如何解決跨域問題?

?先了解下瀏覽器的同源策略 同源策略 /SOP（Same origin policy） 是?種約定，由Netscape公司1995年引?瀏覽器，它是瀏
覽器最核?也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 XSS 、 CSFR 等攻擊。所謂同源是指"協(xié)議+域名+端?
"三者相同，即便兩個不同的域名指向同?個ip地址，也?同源

那么怎樣解決跨域問題的呢？

• 通過jsonp跨域

document.domain + iframe跨域
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參并指定回調(diào)執(zhí)?函數(shù)為onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回調(diào)執(zhí)?函數(shù)
function onBack(res) {
alert(JSON.stringify(res));
}

• document.domain + iframe跨域

  此?案僅限主域相同，?域不同的跨域應?場景
  

1.）?窗?：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>

2.）?窗?：(http://child.domain.com/b.html)文章來源地址http://www.zghlxwxcb.cn/news/detail-557605.html

document.domain = 'domain.com';
// 獲取?窗?中變量
alert('get js data from parent ---> ' + window.parent.user);

• nginx代理跨域
• nodejs中間件代理跨域
• 后端在頭部信息??設置安全域名

11 模塊化開發(fā)怎么做？

• ?即執(zhí)?函數(shù),不暴露私有成員

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

12 異步加載JS的?式有哪些？

• defer，只?持 IE
• async ：
• 創(chuàng)建 script ，插?到 DOM 中，加載完畢后 callBack

13 那些操作會造成內(nèi)存泄漏？

• 內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在
• setTimeout 的第?個參數(shù)使?字符串??函數(shù)的話，會引發(fā)內(nèi)存泄漏
• 閉包使?不當

14 XML和JSON的區(qū)別？

• 數(shù)據(jù)體積??
  • JSON 相對 于XML 來講，數(shù)據(jù)的體積?，傳遞的速度更快些。
• 數(shù)據(jù)交互??
  • JSON 與 JavaScript 的交互更加?便，更容易解析處理，更好的數(shù)據(jù)交互
• 數(shù)據(jù)描述??
  • JSON 對數(shù)據(jù)的描述性? XML 較差
• 傳輸速度??
  • JSON 的速度要遠遠快于 XML

15 談談你對webpack的看法

• WebPack 是?個模塊打包?具，你可以使? WebPack 管理你的模塊依賴，并編繹輸出模塊們所需的靜態(tài)?件。它能夠很好地管理、打包 Web 開發(fā)中所?到的 HTML 、Javascript 、 CSS 以及各種靜態(tài)?件（圖?、字體等），讓開發(fā)過程更加?效。對于不同類型的資源， webpack 有對應的模塊加載器。 webpack 模塊打包器會分析模塊間的依賴關系，最后 ?成了優(yōu)化且合并后的靜態(tài)資源

到了這里，關于前端面試問題-JavaScript的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！