前端知識點-JS相關知識點

一、談談你對Ajax的理解？(概念、特色、做用)

AJAX全稱爲「Asynchronous JavaScript And XML」（異步JavaScript和XML） 是指一種建立交互式網頁應用的開發技術、改善用戶體驗，實現無刷新效果。

優勢

a、不須要插件支持

b、優秀的用戶體驗

c、提升Web程序的性能

d、減輕服務器和帶寬的負擔

缺點

a、瀏覽器對XMLHttpRequest對象的支持度不足，幾乎全部瀏覽器如今都支持

b、破壞瀏覽器「前進」、「後退」按鈕的正常功能，能夠經過簡單的插件彌補

c、對搜索引擎的支持不足

二、說說你對延遲對象deferred的理解?

deferred對象是從jQuery 1.5.0版本開始引入的一個新功能。

a、什麼是deferred對象

開發網站的過程當中，咱們常常遇到某些耗時很長的javascript操做。其中，既有異步的操做（好比ajax讀取服務器數據），也有同步的操做（好比遍歷一個大型數組），它們都不是當即能獲得結果的。

一般的作法是，爲它們指定回調函數（callback）。即事先規定，一旦它們運行結束，應該調用哪些函數。

可是，在回調函數方面，jQuery的功能很是弱。爲了改變這一點，jQuery開發團隊就設計了deferred對象。

簡單說，deferred對象就是jQuery的回調函數解決方案。在英語中，defer的意思是"延遲"，因此deferred對象的含義就是"延遲"到將來某個點再執行。 它解決了如何處理耗時操做的問題，對那些操做提供了更好的控制，以及統一的編程接口。

b、它的主要功能，能夠歸結爲四點：

(1)、實現鏈式操做

(2)、指定同一操做的多個回調函數

(3)、爲多個操做指定回調函數

(4)、普通操做的回調函數接口

三、什麼是跨域，如何實現跨域訪問?

跨域是指不一樣域名之間相互訪問。

JavaScript同源策略的限制，A域名下的JavaScript沒法操做B或是C域名下的對象

實現：

(1)、JSONP跨域：利用script腳本容許引用不一樣域下的js實現的，將回調方法帶入服務器，返回結果時回調。

(2)、跨域資源共享（CORS） 跨域資源共享（CORS）是一種網絡瀏覽器的技術規範，它爲Web服務器定義了一種方式，容許網頁從不一樣的域訪問其資源。

CORS與JSONP相比:

a、 JSONP只能實現GET請求，而CORS支持全部類型的HTTP請求。

b、 使用CORS，開發者能夠使用普通的XMLHttpRequest發起請求和得到數據，比起JSONP有更好的錯誤處理。

c、 JSONP主要被老的瀏覽器支持，它們每每不支持CORS，而絕大多數現代瀏覽器都已經支持了CORS。

四、爲何要使用模板引擎？

a、模板引擎（這裏特指用於Web開發的模板引擎）是爲了使用戶界面與業務數據（內容）分離而產生的，它能夠生成特定格式的文檔，用於網站的模板引擎就會生成一個標準的HTML文檔。

b、在一些示例中javascript有大量的html字符串，html中有一些像onclick樣的javascript，這樣javascript中有html，html中有javascript，代碼的偶合度很高，不便於修改與維護，使用模板引擎能夠解決問題。

五、JavaScript是一門什麼樣的語言，它有哪些特色？

JavaScript 是一種腳本語言，官方名稱爲 ECMAScript（因定義語言的標準爲 ECMA-262）。

JS 的主要特色：

a、語法相似於常見的高級語言，如 C 和 Java；

b、腳本語言，不須要編譯就能夠由解釋器直接運行；

c、 變量鬆散定義，屬於弱類型語言；

d、面向對象的。

JS 最初是爲網頁設計而開發的，如今也是Web 開發的重要語言。它支持對瀏覽器（瀏覽器對象模型，BOM）和HTML 文檔（文檔對象模型，DOM）進行操做而使網頁呈現動態的交互特性。

嚴格的說，JS只是ECMAScript 的一種實現，是ECMAScript和BOM、DOM組成的一種Web 開發技術。

六、JavaScript的數據類型有哪些？

基本數據類型：字符串 String、數字 Number、布爾Boolean

複合數據類型：數組 Array、對象 Object

特殊數據類型：Null 空對象、Undefined 未定義

七、已知ID的Input輸入框，如何獲取這個輸入框的輸入值？(不使用第三方框架)

document.getElementById("ID").value

八、根據你的理解,請簡述JavaScript腳本的執行原理?

JavaScript是一種動態、弱類型、基於原型的語言，經過瀏覽器能夠直接執行。

當瀏覽器遇到<script> 標記的時候，瀏覽器會執行之間的javascript代碼。嵌入的js代碼是順序執行的，每一個腳本定義的全局變量和函數，均可以被後面執行的腳本所調用。 變量的調用，必須是前面已經聲明，不然獲取的變量值是undefined。

九、DOM操做怎樣添加、移除、移動、複製、建立和查找節點?

（1）建立新節點

createDocumentFragment() //建立一個DOM片斷 createElement() //建立一個具體的元素 createTextNode() //建立一個文本節點

（2）添加、移除、替換、插入

appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

getElementsByTagName() //經過標籤名稱 getElementsByName() //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的) getElementById() //經過元素Id，惟一性

十、說說你對json的理解?

回答一：

a、JSON對象：以「{」開始，以「}」結束，裏面則是一系列的鍵（key）值（value）對，鍵和值用「:」分開，每對鍵值對之間用「,」分開。參考如下語法結構：{key1:value1,key2:value2,key3:value3…}其中鍵（key）是字符串，而值（value）能夠是字符串，數值，true,false,null,對象或數組，也就是說某個鍵（key）的值（value）能夠是一個數組，數組裏面又是一些JSON對象，這種表示稍微複雜一些，可是參照這些理解能夠很容易分辨出來。

b、JSON數組：以」[」開始，」]」結束，如同程序語言同樣，例如C#，Button[] btnArray,則BtnArray是一個Button類型的數組，裏面就存放Button類型的對象，那麼JSON數組也同樣，裏面存放的也是JSON對象.

回答二：

a、JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）

b、JSON 是輕量級的文本數據交換格式，並非編程語言

c、JSON 獨立於語言存在

d、JSON 具備自我描述性，更易理解

e、JSON 能夠將 JavaScript 對象中表示的一組數據轉換爲字符串，而後就能夠在函數之間輕鬆地傳遞這個字符串，或者在異步應用程序中將字符串從 Web 客戶機傳遞給服務器端程序。這個字符串看起來有點兒古怪，可是JavaScript很容易解釋它，並且 JSON 能夠表示比"名稱 / 值對"更復雜的結構。例如，能夠表示數組和複雜的對象，而不只僅是鍵和值的簡單列表

回答三： JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小.

json簡單說就是javascript中的對象和數組，因此這兩種結構就是對象和數組兩種結構，經過這兩種結構能夠表示各類複雜的結構。

(1)、對象：對象在js中表示爲「{}」括起來的內容，數據結構爲 {key：value,key：value,...}的鍵值對的結構，在面向對象的語言中，key爲對象的屬性，value爲對應的屬性值，因此很容易理解，取值方法爲 對象.key 獲取屬性值，這個屬性值的類型能夠是 數字、字符串、數組、對象幾種。

(2)、數組：數組在js中是中括號「[]」括起來的內容，數據結構爲 ["java","javascript","vb",...]，取值方式和全部語言中同樣，使用索引獲取，字段值的類型能夠是數字、字符串、數組、對象幾種。

通過對象、數組2種結構就能夠組合成複雜的數據結構了。

十一、ionic和angularjs的區別?

a、ionic是一個用來開發混合手機應用的，開源的，免費的代碼庫。能夠優化html、css和js的性能，構建高效的應用程序，並且還能夠用於構建Sass和AngularJS的優化。

b、AngularJS經過新的屬性和表達式擴展了HTML。AngularJS能夠構建一個單一頁面應用程序（SPAs：Single Page Applications）。

c、Ionic是一個混合APP開發工具，它以AngularJS爲中間腳本工具(稱爲庫，彷佛又不恰當)，因此，你若是要使用Ionic開發APP，就必須瞭解AngularJS。

十二、談談你對閉包的理解?

(1)、使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。

(2)、閉包有三個特性：

a、函數嵌套函數

b、函數內部能夠引用外部的參數和變量

c、參數和變量不會被垃圾回收機制回收

1三、談談你This對象的理解?

回答一：

(1)、js的this指向是不肯定的，也就是說是能夠動態改變的。call/apply 就是用於改變this指向的函數，這樣設計可讓代碼更加靈活，複用性更高

(2)、this 通常狀況下，都是指向函數的擁有者。

(3)、在函數自執行裏，this 指向的是 window 對象。

擴展：關於this，還有一個地方比較讓人模糊的是在dom事件裏，一般有以下3種狀況：

a、使用標籤屬性註冊事件，此時this指向的是window對象。

b、對與a，要讓this指向input，能夠將this做爲參數傳遞。

c、使用addEventListener等註冊事件。此時this也是指向 input。

回答二：

(1)、處於全局做用域下的this：

this;/*window*/ var a = {name: this}/*window*/ var b = [this];/*window*/

在全局做用域下，this默認指向window對象。

(2)、處在函數中的this，又分爲如下幾種狀況：

a、通常定義的函數，而後通常的執行：

var a = function(){ console.log(this); } a();/*window*/

this仍是默認指向window。

b、通常定義，用new調用執行：

var a = function(){ console.log(this); } new a();/*新建的空對象*/

這時候讓this指向新建的空對象，咱們才能夠給空對象初始化自有變量

c、做爲對象屬性的函數，調用時：

var a = { f:function(){ console.log(this) } } a.f();/*a對象*/

這時候this指向調用f函數的a對象。

(3)、經過call()和apply()來改變this的默認引用：

var b = {id: 'b'}; var a = { f:function(){ console.log(this) 　} } a.f.call(b);/*window*/

全部函數對象都有的call方法和apply方法，它們的用法大致類似，f.call(b);的意思 是，執行f函數，並將f函數執行期活動對象裏的this指向b對象，這樣標示符解析時，this就會是b對象了。不過調用函數是要傳參的。因此，f.call(b, x, y); f.apply(b, [x, y]);好吧，以上就是用call方法執行f函數，與用apply方法執行f函數時傳參方式，它們之間的差別，你們一目瞭然：apply經過數組的方式傳遞參數，call經過一個個的形參傳遞參數。

(4)、一些函數特殊執行狀況this的指向問題：

a、setTimeout()和setInverval():

var a = function(){ console.log(this); } setTimeout(a,0);/*window*/

setInterval()相似。

b、dom模型中觸發事件的回調方法執行中活動對象裏的this指向該dom對象。

1四、JavaScript對象的幾種建立方式?

(1) var obj = new Object();

(1) 工廠模式

function Parent(){ var Child = new Object(); Child.name="欲淚成雪"; Child.age="20"; return Child; }; var x = Parent();

引用該對象的時候，這裏使用的是 var x = Parent()而不是 var x = new Parent();由於後者會可能出現不少問題（前者也成爲工廠經典方式,後者稱之爲混合工廠方式），不推薦使用new的方式使用該對象

(2)構造函數方式

function Parent(){ 　　this.name="欲淚成雪"; 　　this.age="20"; }; var x =new Parent();

(3) 原型模式

function Parent(){ }; Parent.prototype.name="欲淚成雪"; Parent.prototype.age="20"; var x =new Parent();

(4)混合的構造函數，原型方式（推薦）

function Parent(){ 　　this.name="欲淚成雪"; 　　this.age=22; }; Parent.prototype.lev=function(){ 　　return this.name; }; var x =new Parent();

(5)動態原型方式

function Parent(){ 　　this.name="欲淚成雪"; 　　this.age=22; ; if(typeof Parent._lev=="undefined"){ Parent.prototype.lev=function(){ 　　return this.name; } Parent._lev=true; } }; var x =new Parent();

1五、get和post的區別,什麼時候使用post?

(1)、get 是從服務器上獲取數據，post 是向服務器傳送數據。 get 請求返回 request - URI 所指出的任意信息。 Post 請求用來發送電子郵件、新聞或發送能由交互用戶填寫的表格。這是惟一須要在請求中發送body的請求。使用Post請求時須要在報文首部 Content - Length 字段中指出body的長度。

(2)、get 是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址，用戶看不到這個過程。

(3)、對於 get 方式，服務器端用Request.QueryString獲取變量的值，對於 post 方式，服務器端用Request.Form獲取提交的數據。

(4)、get 傳送的數據量較小，不能大於2KB。post 傳送的數據量較大，通常被默認爲不受限制。但理論上，IIS4中最大量爲80KB，IIS5中爲100KB。 用IIS過濾器的只接受get參數，因此通常大型搜索引擎都是用get方式。

(5)get安全性很是低，post 安全性相對較高。若是這些數據是中文數據並且是 非敏感數據，那麼使用get；若是用戶輸入的數據不是中文字符並且包含敏感數據，那麼仍是使用 post 爲好。

1六、null和undefined的區別？

(1)、null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。當聲明的變量還未被初始化時，變量的默認值爲undefined。

(2)、null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

(3)、undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

a、變量被聲明瞭，但沒有賦值時，就等於undefined。

b、調用函數時，應該提供的參數沒有提供，該參數等於undefined。

c、對象沒有賦值的屬性，該屬性的值爲undefined。

d、函數沒有返回值時，默認返回undefined。

(4)、null表示"沒有對象"，即該處不該該有值。典型用法是：

a、做爲函數的參數，表示該函數的參數不是對象。

b、做爲對象原型鏈的終點。

1七、請寫出js內存泄漏的問題?

回答一：

(1)、IE7/8 DOM對象或者ActiveX對象循環引用致使內存泄漏

a、多個對象循環引用

b、循環引用本身

(2)、基礎的DOM泄漏 當原有的DOM被移除時，子結點引用沒有被移除則沒法回收。

(3)、timer定時器泄漏 這個時候你沒法回收buggyObject,解決辦法，先中止timer而後再回收

回答二：

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

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

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

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）也會引起內存泄漏問題。

1八、哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js的阻塞特性：全部瀏覽器在下載JS的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載JS，可是JS下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入JS會阻塞全部內容的呈現，而外部JS只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS怎麼會阻塞加載？CSS原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6下CSS都是阻塞加載） 當CSS後面跟着嵌入的JS的時候，該CSS就會出現阻塞後面資源下載的狀況。而當把嵌入JS放到CSS前面，就不會出現阻塞的狀況了。 根本緣由：由於瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞後面的資源加載，因此就會出現上面CSS阻塞下載的狀況。

JS應該放在什麼位置？

(1)、放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。

(2)、若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。

(3)、使用defer（只支持IE）

(4)、不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用`setTimeout`來調用

Javascript無阻塞加載具體方式

將腳本放在底部。<link>仍是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標籤放在</body>前。

成組腳本：因爲每一個<script>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。

非阻塞腳本：等頁面完成加載後，再加載js代碼。也就是，在window.onload事件發出後開始下載代碼。

（1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器

（2）動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔內容。代碼以下：

<script>
var script=document.createElement("script"); script.type="text/javascript"; script.src="file.js"; document.getElementsByTagName("head")[0].appendChild(script); </script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。

1九、對比Flash與ajax哪一個好,在使用中如何取捨？

Ajax的優點：

(1)、可搜索性 普通的文本網頁會更有利於SEO。文本內容是搜索引擎容易檢索的，而繁瑣的swf字節碼倒是搜索引擎不肯觸及的。雖然Google等一些大型的搜索引擎能夠檢索SWF內部的內容，可是仍然有不少麻煩存在。

(2)、開放性 Flash常年以來被Macromedia看的很死。包括Flex、FMS等輔佐技術一直都須要昂貴的安裝、維護費用。而JS則沒有這樣的麻煩。沒有人願意承擔法律和版權的風險。 費用 Flash開發是很昂貴的，由於FlashIDE等環境都是要收費的．而Ajax則不一樣．雖然有一些便宜的生成swf的工具，可是他們的工能實在沒法知足複雜需求。

(3)、易用性 Ajax程序有更好的易用性。因爲中間有一層Flashplayer代理層，所以許多輔助功能沒法被Flash靈活利用。並且Flash在一些方面有着很差的口碑。好比彈出廣告、好比惡意代碼。 （awflasher.com我的認爲這八成是亂上xx網站形成的）

(4)、易於開發 人們開發複雜的Ajax和Flash應用程序時，都會藉助一些高級的開發工具。廣泛來講，Ajax的開發包比Flash簡便、容易。

Flash的優點：

(1)、多媒體處理 Flash在音頻、視頻等多媒體領域相比HTML有絕對的優點。如今幾乎全部的網站都包含有Flash內容。

(2)、兼容性 兼容性好：因爲經過了惟一的FlashPlayer「代理」。人們沒必要像調試JS那樣，在不一樣的瀏覽器中調試程序。

(3)、矢量圖型 這是Flash最大的優點，一樣處在這一領域的SVG、Canvas element以及Direct徹底不能與Flash相比。

(4)、客戶端資源調度 Flash可以更容易的調用瀏覽器之外的外部資源。好比攝像頭、麥克風等。然而這是普通的HTML沒法完成的。可是這也許是一個缺點（爲何呢？）

Ajax的劣勢：

(1)、它可能破壞瀏覽器的後退功能 

(2)、使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中 ，不過這些都有相關方法解決。

Flash的劣勢：

(1)、二進制格式

(2)、格式私有

(3)、flash 文件常常會很大，用戶第一次使用的時候須要忍耐較長的等待時間 

(4)/性能問題

ajax與flash各有利弊，到底哪一個好，這取決於你的需求

20、請你解釋一下事件冒泡機制?

a、在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

b、冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發

c、js冒泡機制是指若是某元素定義了事件A，如click事件，若是觸發了事件以後，沒有阻止冒泡事件，那麼事件將向父級元素傳播，觸發父類的click函數。

//阻止冒泡時間方法，兼容ie(e.cancleBubble)和ff(e.stopProgation) function stopBubble(e){ var evt = e||window.event; evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡 evt.preventDefault

2一、請你說說split()與join() 函數的區別?

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

Join 函數獲取一批字符串，而後用分隔符字符串將它們聯接起來，從而返回一個字符串。Split 函數獲取一個字符串，而後在分隔符處將其斷開，從而返回一批字符串。可是，這兩個函數之間的主要區別在於 Join 能夠使用任何分隔符字符串將多個字符串鏈接起來，而 Split 只能使用一個字符分隔符將字符串斷開。 簡單地說，若是你用split，是把一串字符（根據某個分隔符）分紅若干個元素存放在一個數組裏。而Join是把數組中的字符串連成一個長串，能夠大致上認爲是split的逆操做。

2二、說說你對Promise的理解?

ES6 原生提供了 Promise 對象。

所謂 Promise，就是一個對象，用來傳遞異步操做的消息。它表明了某個將來纔會知道結果的事件（一般是一個異步操做），而且這個事件提供統一的 API，可供進一步處理。

Promise 對象有如下兩個特色。

(1)、對象的狀態不受外界影響。Promise 對象表明一個異步操做，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和 Rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。

(2)、一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變爲 Resolved 和從 Pending 變爲 Rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。

有了 Promise 對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise 對象提供統一的接口，使得控制異步操做更加容易。

Promise 也有一些缺點。首先，沒法取消 Promise，一旦新建它就會當即執行，沒法中途取消。其次，若是不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，沒法得知目前進展到哪個階段（剛剛開始仍是即將完成）。

2三、談談你對Javascript垃圾回收機制的理解？

(1)、標記清除（mark and sweep）

這是`JavaScript`最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。

垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了

(2)、引用計數(reference counting)

在低版本`IE`中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

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

2四、說說你對原型（prototype）理解?

JavaScript是一種經過原型實現繼承的語言與別的高級語言是有區別的，像java，C#是經過類型決定繼承關係的，JavaScript是的動態的弱類型語言，總之能夠認爲JavaScript中全部都是對象，在JavaScript中，原型也是一個對象，經過原型能夠實現對象的屬性繼承，JavaScript的對象中都包含了一個" prototype"內部屬性，這個屬性所對應的就是該對象的原型。

"prototype"做爲對象的內部屬性，是不能被直接訪問的。因此爲了方便查看一個對象的原型，Firefox和Chrome內核的JavaScript引擎中提供了"__proto__"這個非標準的訪問器（ECMA新標準中引入了標準對象原型訪問器"Object.getPrototype(object)"）。

原型的主要做用就是爲了實現繼承與擴展對象。

2五、typeof與instanceof的區別是什麼？

在 JavaScript 中，判斷一個變量的類型能夠用typeof

(1)、數字類型， typeof 返回的值是 number。好比說：typeof(1)，返回值是number

(2)、字符串類型， typeof 返回的值是 string。好比typeof("123")返回值是string。

(3)、布爾類型， typeof 返回的值是 boolean 。好比typeof(true)返回值是boolean。

(4)、對象、數組、null 返回的值是 object 。好比typeof(window)，typeof(document)，typeof(null)返回的值都是object。

(5)、函數類型，返回的值是 function。好比：typeof(eval)，typeof(Date)返回的值都是function。

(6)、不存在的變量、函數或者undefined，將返回undefined。好比：typeof(abc)、typeof(undefined)都返回undefined。

在 JavaScript 中,instanceof用於判斷某個對象是否被另外一個函數構造。

使用 typeof 運算符時採用引用類型存儲值會出現一個問題，不管引用的是什麼類型的對象，它都返回 "object"。ECMAScript 引入了另外一個 Java 運算符 instanceof 來解決這個問題。instanceof 運算符與 typeof 運算符類似，用於識別正在處理的對象的類型。與 typeof 方法不一樣的是，instanceof 方法要求開發者明確地確認對象爲某特定類型。

2六、說說你對node.js的理解?

a、Node.js 是一個基於Google Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

b、能方便地搭建響應速度快、易於擴展的網絡應用，Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，很是適合在分佈式設備上運行的數據密集型的實時應用。

c、簡單說Node.js就是運行在服務器端的JavaScript，是如今流行的語言中能同時運行在前端與後臺的程序語言

2七、NPM(包管理器)做用是什麼?

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

a、容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。

b、容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。

c、容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

2八、請簡要說說你對Javascript面向對象的理解?

爲了說明 JavaScript 是一門完全的面向對象的語言，首先有必要從面向對象的概念着手 , 探討一下面向對象中的幾個概念：

a、一切事物皆對象

b、對象具備封裝和繼承特性

c、對象與對象之間使用消息通訊，各自存在信息隱藏

以這三點作爲依據，C++ 是半面向對象半面向過程語言，由於，雖然他實現了類的封裝、繼承和多態，但存在非對象性質的全局函數和變量。Java、C# 是徹底的面嚮對象語言，它們經過類的形式組織函數和變量，使之不能脫離對象存在。但這裏函數自己是一個過程，只是依附在某個類上。

然而，面向對象僅僅是一個概念或者編程思想而已，它不該該依賴於某個語言存在。好比 Java 採用面向對象思想構造其語言，它實現了類、繼承、派生、多態、接口等機制。可是這些機制，只是實現面向對象編程的一種手段，而非必須。換言之，一門語言能夠根據其自身特性選擇合適的方式來實現面向對象。因此，因爲大多數程序員首先學習或者使用的是相似 Java、C++ 等高級編譯型語言（Java 雖然是半編譯半解釋，但通常作爲編譯型來說解），於是先入爲主地接受了「類」這個面向對象實現方式，從而在學習腳本語言的時候，習慣性地用類式面嚮對象語言中的概念來判斷該語言是不是面嚮對象語言，或者是否具有面向對象特性。這也是阻礙程序員深刻學習並掌握 JavaScript 的重要緣由之一。

實際上，JavaScript 語言是經過一種叫作 原型（prototype）的方式來實現面向對象編程的。下面就來討論 基於類的（class-based）面向對象和 基於原型的 (prototype-based) 面向對象這兩種方式在構造客觀世界的方式上的差異。

基於類的面向對象和基於原型的面向對象方式比較在基於類的面向對象方式中，對象（object）依靠類（class）來產生。而在基於原型的面向對象方式中，對象（object）則是依靠 構造器（constructor）利用 原型（prototype）構造出來的。舉個客觀世界的例子來講明二種方式認知的差別。例如工廠造一輛車，一方面，工人必須參照一張工程圖紙，設計規定這輛車應該如何製造。這裏的工程圖紙就比如是語言中的 類 (class)，而車就是按照這個 類（class）製造出來的；另外一方面，工人和機器 ( 至關於 constructor) 利用各類零部件如發動機，輪胎，方向盤 ( 至關於 prototype 的各個屬性 ) 將汽車構造出來。

事實上關於這兩種方式誰更爲完全地表達了面向對象的思想，目前尚有爭論。但筆者認爲原型式面向對象是一種更爲完全的面向對象方式，理由以下：

(1)、首先，客觀世界中的對象的產生都是其它實物對象構造的結果，而抽象的「圖紙」是不能產生「汽車」的，也就是說，類是一個抽象概念而並不是實體，而對象的產生是一個實體的產生；

(2)、其次，按照一切事物皆對象這個最基本的面向對象的法則來看，類 (class) 自己並非一個對象，然而原型方式中的構造器 (constructor) 和原型 (prototype) 自己也是其餘對象經過原型方式構造出來的對象。

(3)、再次，在類式面嚮對象語言中，對象的狀態 (state) 由對象實例 (instance) 所持有，對象的行爲方法 (method) 則由聲明該對象的類所持有，而且只有對象的結構和方法可以被繼承；而在原型式面嚮對象語言中，對象的行爲、狀態都屬於對象自己，而且可以一塊兒被繼承（參考資源），這也更貼近客觀實際。

(4)、最後，類式面嚮對象語言好比 Java，爲了彌補沒法使用面向過程語言中全局函數和變量的不便，容許在類中聲明靜態 (static) 屬性和靜態方法。而實際上，客觀世界不存在所謂靜態概念，由於一切事物皆對象！而在原型式面嚮對象語言中，除內建對象 (build-in object) 外，不容許全局對象、方法或者屬性的存在，也沒有靜態概念。

全部語言元素 (primitive) 必須依賴對象存在。但因爲函數式語言的特色，語言元 素所依賴的對象是隨着運行時 (runtime) 上下文 context變化而變化的，具體體如今 this指針的變化。正是這種特色更貼近「萬物皆有所屬，宇宙乃萬物生存之根本」的天然 觀點。在 程序清單 1中 window 便相似與宇宙的概念。

2九、你對JavaScript函數的理解是?

javascript中的函數就是對象，對象就是「鍵/值」對的集合並擁有一個鏈接到原型對隱藏鏈接。

(1)、參數對象 （arguments）

第一個函數中有一個默認對象叫arguments，相似數組，但不是數組，該對象是傳遞給函數的參數。

(2)、構造函數

在javascript中對象構造函數能夠建立一個對象。

(3)、函數調用

a、call：調用一個對象的一個方法，以另外一個對象替換當前對象

b、apply：應用某一對象的一個方法，用另外一個對象替換當前對象，與call相似。

c、caller：在一個函數調用另外一個函數時，被調用函數會自動生成一個caller屬性，指向調用它的函數對象。若是該函數當前未被調用，或並不是被其餘函數調用，則caller爲null。

d、Callee：當函數被調用時，它的arguments.callee對象就會指向自身，也就是一個 對本身的引用。

30、簡要說說什麼是IIFE？它有什麼做用?

IIFE即Immediately-Invoked Function Expression，當即執行函數表達式， 當即執行的函數表達式的執行括號應該寫在外包括號內。雖然寫在內仍是寫在外都是有效的，但寫在內使得整個表達式看起來更像一個總體，所以推薦這麼作。

//最經常使用的兩種寫法 (function(){ /* code */ }()); // 老師推薦寫法 (function(){ /* code */ })(); // 固然這種也能夠 // 括號和JS的一些操做符（如 = && || ,等）能夠在函數表達式和函數聲明上消除歧義 // 以下代碼中，解析器已經知道一個是表達式了，因而也會把另外一個默認爲表達式 // 可是二者交換則會報錯 var i = function(){ return 10; }(); true && function(){ /* code */ }(); 0, function(){ /* code */ }(); // 若是你不怕代碼晦澀難讀，也能夠選擇一元運算符 !function(){ /* code */ }(); ~function(){ /* code */ }(); -function(){ /* code */ }(); +function(){ /* code */ }(); // 你也能夠這樣 new function(){ /* code */ } new function(){ /* code */ }() // 帶參

IIFE的做用

(1)、提升性能：減小做用域查找時間。使用IIFE的一個微小的性能優點是經過匿名函數的參數傳遞經常使用全局對象window、document、jQuery，在做用域內引用這些全局對象。JavaScript解釋器首先在做用域內查找屬性，而後一直沿着鏈向上查找，直到全局範圍。將全局對象放在IIFE做用域內提高js解釋器的查找速度和性能。

(2)、壓縮空間：經過參數傳遞全局對象，壓縮時能夠將這些全局對象匿名爲一個更加精簡的變量名

(3)、避免衝突：匿名函數內部能夠造成一個塊級的私有做用域。

(4)、依賴加載：能夠靈活的加載第三方插件，固然使用模塊化加載更好（AMD,CMD）

3一、談談你對Function與Object的理解?

Function

函數就是對象,表明函數的對象就是函數對象。全部的函數對象是被Function這個函數對象構造出來的。Function是最頂層的構造器。它構造了系統中全部的對象，包括用戶自定義對象，系統內置對象，甚至包括它自已。這也代表Function具備自舉性(自已構造本身的能力)。這也間接決定了Function的call和constructor邏輯相同。每一個對象都有一個 constructor 屬性,用於指向建立其的函數對象。

a、函數與對象具備相同的語言地位

b、沒有類,只有對象

c、函數也是一種對象,所謂的函數對象

d、對象是按引用來傳遞的

Object

對於Object它是最頂層的對象，全部的對象都將繼承Object的原型，可是你也要明確的知道Object也是一個函數對象，因此說Object是被Function構造出來的。

JavaScript 原型鏈

3二、$.extend與$.fn.extend區別是什麼?

$.extend

在jQuery根命名空間下直接調用的方法能夠認爲是jQuery的靜態方法或屬性，經常使用方法名來調用，使用.方法名來調用，使用.extend這個靜態方法能夠完成兩個功能:

a、擴展屬性或方法給jQuery

b、擴展對象

$.fn.extend

.fn就是jQuery的原型，.fn等於jQuery.prototype，是jQuery的別名。.fn.extend方法的做用是用於擴展jQuery實例對象，也就是咱們從頁面中得到的jQuery對象。

.fn擴展了jQuery的原型，讓全部的jQuery實例對象都獲得的擴展的方法，其它也能夠直接修改jQuery.prototype來實現，.fn是jQuery.prototype的簡寫

3三、什麼是鏈式編程?

幾乎在全部基於「類型」的語言中若是調用一個方法後將對象做爲方法參數返回則就會造成鏈式編程 鏈式編程是將多個操做（多行代碼）經過點號"."連接在一塊兒成爲一句代碼。 鏈式代碼一般要求操做有返回值， 但對於不少操做大都是void型，什麼也不返回，這樣就很難鏈起來了， 固然也有解決辦法，可能不太優雅。 鏈式編程的新思想在jQuery中已流行使用

示例:

return $.each(this, function(index, obj) { $("<span/>").html("+").css("cursor", "pointer").click(function() { $(obj).width($(obj).width() + length); }).insertAfter(obj); });

上面的示例中當$.each循環完成後返回this對象，返回的仍然是一個jQuery對象，因此能夠繼續jQuery編程。

$("button").SuperPlus(10).height(26).width(100).css("color","blue");

3四、請指出 JavaScript中的本地對象、內置對象、宿主對象的區別？

(1)、本地對象

ECMA-262 把本地對象（native object）定義爲「獨立於宿主環境的 ECMAScript 實現提供的對象」。

再來看一下，「本地對象」包含哪些內容： Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 由此能夠看出，簡單來講，本地對象就是 ECMA-262 定義的類（引用類型）。

(2)、內置對象

ECMA-262 把內置對象（built-in object）定義爲「由 ECMAScript 實現提供的、獨立於宿主環境的全部對象，在 ECMAScript 程序開始執行時出現」。這意味着開發者沒必要明確實例化內置對象，它已被實例化了。

一樣是「獨立於宿主環境」。根據定義咱們彷佛很難分清「內置對象」與「本地對象」的區別。而ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象）。

如此就能夠理解了。內置對象是本地對象的一種。而其包含的兩種對象中，Math對象咱們常常用到，可這個Global對象是啥東西呢？ Global對象是ECMAScript中最特別的對象，由於實際上它根本不存在，但你們要清楚，在ECMAScript中，不存在獨立的函數，全部函數都必須是某個對象的方法。相似於isNaN()、parseInt()和parseFloat()方法等，看起來都是函數，而實際上，它們都是Global對象的方法。

(3)、宿主對象

由ECMAScript實現的宿主環境提供的對象，即咱們網頁的運行環境（操做系統和瀏覽器），全部的BOM和DOM都是宿主對象。 宿主環境提供的全局方法：

alert、confirm、prompt、write、writeln(後面的兩種是document的方法)

內置對象是本地對象的一種，本地對象時由官方定義的，而宿主對象至關於由本身定義的對象、DOM對象和BOM對象組成的

3五、請解釋一下變量聲明提高?

a、變量定義

能夠使用var定義變量，變量若是沒有賦值，那變量的初始值爲undefined。

b、變量做用域

變量做用域指變量起做用的範圍。變量分爲全局變量和局部變量。全局變量在全局都擁有定義；而局部變量只能在函數內有效。

在函數體內，同名的局部變量或者參數的優先級會高於全局變量。也就是說，若是函數內存在和全局變量同名的局部變量或者參數，那麼全局變量將會被局部變量覆蓋。

全部不使用var定義的變量都視爲全局變量。