三、JavaScript部分
1、談談你對Ajax的理解?(概念、特點、作用)
AJAX全稱為“Asynchronous JavaScript And XML”(異步JavaScript和XML) 是指一種創建交互式網頁應用的開發技術、改善用戶體驗,實現無刷新效果。
優點
a、不需要插件支持
b、優秀的用戶體驗
c、提高Web程序的性能
d、減輕服務器和帶寬的負擔
缺點
a、瀏覽器對XMLHttpRequest對象的支持度不足,幾乎所有瀏覽器現在都支持
b、破壞瀏覽器“前進”、“后退”按鈕的正常功能,可以通過簡單的插件彌補
c、對搜索引擎的支持不足
2、說說你對延遲對象deferred的理解?
deferred對象是從jQuery 1.5.0版本開始引入的一個新功能。
a、什么是deferred對象
開發網站的過程中,我們經常遇到某些耗時很長的javascript操作。其中,既有異步的操作(比如ajax讀取服務器數據),也有同步的操作(比如遍歷一個大型數組),它們都不是立即能得到結果的。
通常的做法是,為它們指定回調函數(callback)。即事先規定,一旦它們運行結束,應該調用哪些函數。
但是,在回調函數方面,jQuery的功能非常弱。為了改變這一點,jQuery開發團隊就設計了deferred對象。
簡單說,deferred對象就是jQuery的回調函數解決方案。在英語中,defer的意思是"延遲",所以deferred對象的含義就是"延遲"到未來某個點再執行。
它解決了如何處理耗時操作的問題,對那些操作提供了更好的控制,以及統一的編程接口。
b、它的主要功能,可以歸結為四點:
(1)、實現鏈式操作
(2)、指定同一操作的多個回調函數
(3)、為多個操作指定回調函數
(4)、普通操作的回調函數接口
3、什么是跨域,如何實現跨域訪問?
跨域是指不同域名之間相互訪問。
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。
4、為什么要使用模板引擎?
a、模板引擎(這里特指用於Web開發的模板引擎)是為了使用戶界面與業務數據(內容)分離而產生的,它可以生成特定格式的文檔,用於網站的模板引擎就會生成一個標准的HTML文檔。
b、在一些示例中javascript有大量的html字符串,html中有一些像onclick樣的javascript,這樣javascript中有html,html中有javascript,代碼的偶合度很高,不便於修改與維護,使用模板引擎可以解決問題。
5、JavaScript是一門什么樣的語言,它有哪些特點?
JavaScript 是一種腳本語言,官方名稱為 ECMAScript(因定義語言的標准為 ECMA-262)。
JS 的主要特點:
a、語法類似於常見的高級語言,如 C 和 Java;
b、腳本語言,不需要編譯就可以由解釋器直接運行;
c、 變量松散定義,屬於弱類型語言;
d、面向對象的。
JS 最初是為網頁設計而開發的,現在也是Web 開發的重要語言。它支持對瀏覽器(瀏覽器對象模型,BOM)和HTML 文檔(文檔對象模型,DOM)進行操作而使網頁呈現動態的交互特性。
嚴格的說,JS只是ECMAScript 的一種實現,是ECMAScript和BOM、DOM組成的一種Web 開發技術。
6、JavaScript的數據類型有哪些?
基本數據類型:字符串 String、數字 Number、布爾Boolean
復合數據類型:數組 Array、對象 Object
特殊數據類型:Null 空對象、Undefined 未定義
7、已知ID的Input輸入框,如何獲取這個輸入框的輸入值?(不使用第三方框架)
document.getElementById("ID").value
8、根據你的理解,請簡述JavaScript腳本的執行原理?
JavaScript是一種動態、弱類型、基於原型的語言,通過瀏覽器可以直接執行。
當瀏覽器遇到<script> 標記的時候,瀏覽器會執行之間的javascript代碼。嵌入的js代碼是順序執行的,每個腳本定義的全局變量和函數,都可以被后面執行的腳本所調用。 變量的調用,必須是前面已經聲明,否則獲取的變量值是undefined。
9、DOM操作怎樣添加、移除、移動、復制、創建和查找節點?
(1)創建新節點
createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點
(2)添加、移除、替換、插入
appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點
(3)查找
getElementsByTagName() //通過標簽名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的) getElementById() //通過元素Id,唯一性
10、說說你對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 獲取屬性值,這個屬性值的類型可以是 數字、字符串、數組、對象幾種。
(1)、數組:數組在js中是中括號“[]”括起來的內容,數據結構為 ["java","javascript","vb",...],取值方式和所有語言中一樣,使用索引獲取,字段值的類型可以是數字、字符串、數組、對象幾種。
經過對象、數組2種結構就可以組合成復雜的數據結構了。
11、ionic和angularjs的區別?
a、ionic是一個用來開發混合手機應用的,開源的,免費的代碼庫。可以優化html、css和js的性能,構建高效的應用程序,而且還可以用於構建Sass和AngularJS的優化。
b、AngularJS通過新的屬性和表達式擴展了HTML。AngularJS可以構建一個單一頁面應用程序(SPAs:Single Page Applications)。
c、Ionic是一個混合APP開發工具,它以AngularJS為中間腳本工具(稱為庫,似乎又不恰當),所以,你如果要使用Ionic開發APP,就必須了解AngularJS。
12、談談你對閉包的理解?
(1)、使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染,缺點是閉包會常駐內存,會增大內存使用量,使用不當很容易造成內存泄露。
(2)、閉包有三個特性:
a、函數嵌套函數
b、函數內部可以引用外部的參數和變量
c、參數和變量不會被垃圾回收機制回收
13、談談你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對象。
14、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();
15、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 為好。
16、null和undefined的區別?
(1)、null是一個表示"無"的對象,轉為數值時為0;undefined是一個表示"無"的原始值,轉為數值時為NaN。當聲明的變量還未被初始化時,變量的默認值為undefined。
(2)、null用來表示尚未存在的對象,常用來表示函數企圖返回一個不存在的對象。
(3)、undefined表示"缺少值",就是此處應該有一個值,但是還沒有定義。典型用法是:
a、變量被聲明了,但沒有賦值時,就等於undefined。
b、調用函數時,應該提供的參數沒有提供,該參數等於undefined。
c、對象沒有賦值的屬性,該屬性的值為undefined。
d、函數沒有返回值時,默認返回undefined。
(4)、null表示"沒有對象",即該處不應該有值。典型用法是:
a、作為函數的參數,表示該函數的參數不是對象。
b、作為對象原型鏈的終點。
17、請寫出js內存泄漏的問題?
回答一:
(1)、IE7/8 DOM對象或者ActiveX對象循環引用導致內存泄漏
a、多個對象循環引用
b、循環引用自己
(2)、基礎的DOM泄漏
當原有的DOM被移除時,子結點引用沒有被移除則無法回收。
(3)、timer定時器泄漏
這個時候你無法回收buggyObject,解決辦法,先停止timer然后再回收
回答二:
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環的,那么該對象的內存即可回收。
setTimeout 的第一個參數使用字符串而非函數的話,會引發內存泄漏。
閉包、控制台日志、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)也會引發內存泄漏問題。
18、哪些地方會出現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鏈接)。
19、對比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
21、請你說說split()與join() 函數的區別?
前者是切割成數組的形式,后者是將數組轉換成字符串
Join 函數獲取一批字符串,然后用分隔符字符串將它們聯接起來,從而返回一個字符串。Split 函數獲取一個字符串,然后在分隔符處將其斷開,從而返回一批字符串。但是,這兩個函數之間的主要區別在於 Join 可以使用任何分隔符字符串將多個字符串連接起來,而 Split 只能使用一個字符分隔符將字符串斷開。
簡單地說,如果你用split,是把一串字符(根據某個分隔符)分成若干個元素存放在一個數組里。而Join是把數組中的字符串連成一個長串,可以大體上認為是split的逆操作。
22、說說你對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 狀態時,無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。
23、談談你對Javascript垃圾回收機制的理解?
(1)、標記清除(mark and sweep)
這是`JavaScript`最常見的垃圾回收方式,當變量進入執行環境的時候,比如函數中聲明一個變量,垃圾回收器將其標記為“進入環境”,當變量離開環境的時候(函數執行結束)將其標記為“離開環境”。
垃圾回收器會在運行的時候給存儲在內存中的所有變量加上標記,然后去掉環境中的變量以及被環境中變量所引用的變量(閉包),在這些完成之后仍存在標記的就是要刪除的變量了
(2)、引用計數(reference counting)
在低版本`IE`中經常會出現內存泄露,很多時候就是因為其采用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數,當聲明了一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1,如果該變量的值變成了另外一個,則這個值得引用次數減1,當這個值的引用次數變為0的時 候,說明沒有變量在使用,這個值沒法被訪問了,因此可以將其占用的空間回收,這樣垃圾回收器會在運行的時候清理掉引用次數為0的值占用的空間。
在IE中雖然`JavaScript`對象通過標記清除的方式進行垃圾回收,但BOM與DOM對象卻是通過引用計數回收垃圾的,也就是說只要涉及BOM及DOM就會出現循環引用問題。
24、說說你對原型(prototype)理解?
JavaScript是一種通過原型實現繼承的語言與別的高級語言是有區別的,像java,C#是通過類型決定繼承關系的,JavaScript是的動態的弱類型語言,總之可以認為JavaScript中所有都是對象,在JavaScript中,原型也是一個對象,通過原型可以實現對象的屬性繼承,JavaScript的對象中都包含了一個" prototype"內部屬性,這個屬性所對應的就是該對象的原型。
"prototype"作為對象的內部屬性,是不能被直接訪問的。所以為了方便查看一個對象的原型,Firefox和Chrome內核的JavaScript引擎中提供了"__proto__"這個非標准的訪問器(ECMA新標准中引入了標准對象原型訪問器"Object.getPrototype(object)")。
原型的主要作用就是為了實現繼承與擴展對象。
25、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 方法要求開發者明確地確認對象為某特定類型。
26、說說你對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,是現在流行的語言中能同時運行在前端與后台的程序語言
27、NPM(包管理器)作用是什么?
NPM是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問題,常見的使用場景有以下幾種:
a、允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
b、允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
c、允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。
28、請簡要說說你對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 便類似與宇宙的概念。
29、你對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)
31、談談你對Function與Object的理解?
Function
函數就是對象,代表函數的對象就是函數對象。所有的函數對象是被Function這個函數對象構造出來的。Function是最頂層的構造器。它構造了系統中所有的對象,包括用戶自定義對象,系統內置對象,甚至包括它自已。這也表明Function具有自舉性(自已構造自己的能力)。這也間接決定了Function的call和constructor邏輯相同。每個對象都有一個 constructor 屬性,用於指向創建其的函數對象。
a、函數與對象具有相同的語言地位
b、沒有類,只有對象
c、函數也是一種對象,所謂的函數對象
d、對象是按引用來傳遞的
Object
對於Object它是最頂層的對象,所有的對象都將繼承Object的原型,但是你也要明確的知道Object也是一個函數對象,所以說Object是被Function構造出來的。
JavaScript 原型鏈
32、$.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的簡寫
33、什么是鏈式編程?
幾乎在所有基於“類型”的語言中如果調用一個方法后將對象作為方法參數返回則就會形成鏈式編程
鏈式編程是將多個操作(多行代碼)通過點號"."鏈接在一起成為一句代碼。 鏈式代碼通常要求操作有返回值, 但對於很多操作大都是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");
34、請指出 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對象組成的
35、請解釋一下變量聲明提升?
a、變量定義
可以使用var定義變量,變量如果沒有賦值,那變量的初始值為undefined。
b、變量作用域
變量作用域指變量起作用的范圍。變量分為全局變量和局部變量。全局變量在全局都擁有定義;而局部變量只能在函數內有效。
在函數體內,同名的局部變量或者參數的優先級會高於全局變量。也就是說,如果函數內存在和全局變量同名的局部變量或者參數,那么全局變量將會被局部變量覆蓋。
所有不使用var定義的變量都視為全局變量。
36、內容還會不斷補充。。。
博客數據來源聲明:
本博客大部分數據來源於各大網站的收集整理改編,主要有GitHub(https://github.com)、題來了(http://www.tilaile.com)、牛客網(https://www.nowcoder.com)、一些英文網站,還有一些論壇、博客、IT招聘等網站。還有少部分數據時來源於本人自己整理添加,添加的內容主要是本人認為比較重要知識點,面試時可能會問到的題目,自己整理題目以及參考答案,答案僅供參考,答案可能存有錯誤或不足,歡迎大家批評指正或補充更好的答案。好讓我及時更正,以免誤導其他人。本博客僅提供參考作用。