前端最新最全面試題庫(kù)JS部分

1、 前端最新最全面試題庫(kù)JS部分1 , 怎么實(shí)現(xiàn)跨域問(wèn)題？對(duì)于端口和協(xié)議的不同，只能通過(guò)后臺(tái)來(lái)解決。我們要解決的是域名不同的問(wèn)題。1.下 面 是 用 php 進(jìn) 行 的 設(shè) 置 ，“ * ” 號(hào) 表 示 允 許 任 何 域 向 我 們 的 服 務(wù) 端 提 交 請(qǐng) 求 ：headerAccess-Control-Allow-Origin： *2.JSONP(JSON with Padding 填充式 JSON 或參數(shù)式 JSON)在 js 中，我們雖然不能直接用 XMLHttpRequest 請(qǐng)求不同域上的數(shù)據(jù)時(shí)，但是在頁(yè)面上引入不同域上的 js 腳本文件卻是可以的，jsonp 正是利用這個(gè)特性來(lái)

2、實(shí)現(xiàn)的。JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)應(yīng)該在頁(yè)面中調(diào)用的函數(shù)，而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的 JSON 數(shù)據(jù)。2,JSNOP 的優(yōu)缺點(diǎn)優(yōu)點(diǎn)：它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要 XMLHttpRequest 或 ActiveX 的支持；能夠直接訪問(wèn)響應(yīng)文本，支持在瀏覽器與服務(wù)器之間雙向通信缺點(diǎn)：JSONP 是從其他域中加載代碼執(zhí)行。如果其他域不安全，很可能會(huì)在響應(yīng)中夾帶一些惡意代碼，而此時(shí)除了完全放棄 JSONP 調(diào)用之外，沒有辦法追究。因此在使用不是你自己運(yùn)維的 Web 服務(wù)時(shí)，一定得保證它安全可靠。它只支持 GET 請(qǐng)求而不支持 POST 等

3、其它類型的 HTTP 請(qǐng)求；它只支持跨域 HTTP 請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行 JavaScript 調(diào)用的問(wèn)題3、談?wù)?js 作用域和閉包？答：簡(jiǎn)單的說(shuō)，作用域是針對(duì)變量的，比如我們創(chuàng)建一個(gè)函數(shù) a1，函數(shù)里面又包了一個(gè)子函數(shù) a2。此時(shí)就存在三個(gè)作用域：全局作用域a1 作用域a2 作用域；即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。a1 在查找變量的時(shí)候會(huì)先從自身的作用域區(qū)查找，找不到再到上一級(jí) a2 的作用域查找，如果還沒找到就到全局作用域區(qū)查找，這樣就形成了一個(gè)作用域鏈。理解閉包首先要理解，js 垃圾回收機(jī)制，也就是當(dāng)一個(gè)函數(shù)被執(zhí)行

4、完后，其作用域會(huì)被收回，如果形成了閉包，執(zhí)行完后其作用域就不會(huì)被收回。如果某個(gè)函數(shù)被他的父函數(shù)之外的一個(gè)變量引用，就會(huì)形成閉包。閉包的作用，就是保存自己私有的變量，通過(guò)提供的接口（方法）給外部使用，但外部不能直接訪問(wèn)該變量。4、什么是原型鏈？答：Javascript 是面向?qū)ο蟮?，每個(gè)實(shí)例對(duì)象都有一個(gè)_proto_屬性，該屬性指向它原型對(duì)象，這個(gè)實(shí)例對(duì)象的構(gòu)造函數(shù)有一個(gè)原型屬性 prototype，與實(shí)例的_proto_屬性指向同一個(gè)對(duì)象。當(dāng)一個(gè)對(duì)象在查找一個(gè)屬性的時(shí)，自身沒有就會(huì)根據(jù)_proto_ 向它的原型進(jìn)行查找，如果都沒有，則向它的原型的原型繼續(xù)查找，直到查到Ototype._prot

5、o_為 nul，這樣也就形成了原型鏈。6、什么是事件冒泡/捕獲？答：事件冒泡：子元素事件的觸發(fā)會(huì)影響父元素事件；開關(guān)事件冒泡：A，開啟事件冒泡：element.addEventListener(eventName，handler，false)；B，關(guān)閉事件冒泡：假設(shè)傳統(tǒng)方式事件的返回值為 e，就可以通過(guò) e.stopPropagation()來(lái)關(guān)閉事件冒泡；事件捕獲：父元素的事件會(huì)影響子元素的事件；開啟事件捕獲：element.addEventListener(eventName，handler，true)7、請(qǐng)說(shuō)說(shuō)事件委托機(jī)制？這樣做有什么好處？答：事件委托，就是某個(gè)事件本來(lái)該自己干的，但是

6、自己不干，交給別人來(lái)干。就叫事件委托。打個(gè)比方：一個(gè) button 對(duì)象，本來(lái)自己需要監(jiān)控自身的點(diǎn)擊事件，但是自己不來(lái)監(jiān)控這個(gè)點(diǎn)擊事件，讓自己的父節(jié)點(diǎn)來(lái)監(jiān)控自己的點(diǎn)擊事件。好處：A，提高性能：列如，當(dāng)有很多 li 同時(shí)需要注冊(cè)事件的時(shí)候，如果使用傳統(tǒng)方法來(lái)注冊(cè)事件的話，需要給每一個(gè) li 注冊(cè)事件。然而如果使用委托事件的話，就只需要將事件委托給該一個(gè)元素即可。這樣就能提高性能。B，新添加的元素還會(huì)有之前的事件；8、請(qǐng)列舉字符串操作的方法？charCodeAt 方法返回一個(gè)整數(shù)，代表指定位置字符的 Unicode 編碼；charAt 方法返回指定索引位置處的字符。如果超出有效范圍的索引值返回空字

7、符串； slice 方法返回字符串的片段；substring 方法返回位于 String 對(duì)象中指定位置的子字符串。substr 方法返回一個(gè)從指定位置開始的指定長(zhǎng)度的子字符串。indexOf 方法返回 String 對(duì)象內(nèi)第一次出現(xiàn)子字符串位置。如果沒有找到子字符串，則返回-1； lastIndexOf 方法返回 String 對(duì)象中字符串最后出現(xiàn)的位置。如果沒有匹配到子字符串，則返回-1； search 方法返回與正則表達(dá)式查找內(nèi)容匹配的第一個(gè)字符串的位置。concat 方法返回字符串值，該值包含了兩個(gè)或多個(gè)提供的字符串的連接； split 將一個(gè)字符串分割為子字符串，然后將結(jié)果作為字符串

8、數(shù)組返回；11、怎么理解 jQuery？答：JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。它是輕量級(jí)的 js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+， FF1.5+， Safari 2.0+， Opera 9.0+），jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery使用戶能更方便地處理 HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX 交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQu

9、ery 能夠使用戶的 html 頁(yè)面保持代碼和 html 內(nèi)容分離，也就是說(shuō)，不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id 即可。jQuery 是一個(gè)兼容多瀏覽器的 javascript 庫(kù)，核心理念是 write less，do more(寫得更少，做得更多)。jQuery在 2006 年 1 月由美國(guó)人 John Resig 在紐約的 barcamp 發(fā)布，吸引了來(lái)自世界各地的眾多 JavaScript 高手加入，由 Dave Methvin 率領(lǐng)團(tuán)隊(duì)進(jìn)行開發(fā)。如今，jQuery 已經(jīng)成為最流行的 javascript 庫(kù)，在世界前 10000 個(gè)訪問(wèn)最多的網(wǎng)站中

10、，有超過(guò) 55%在使用 jQuery。jQuery 是免費(fèi)、開源的，使用 MIT 許可協(xié)議。jQuery 的語(yǔ)法設(shè)計(jì)可以使開發(fā)更加便捷，例如操作文檔對(duì)象、選擇 DOM 元素、制作動(dòng)畫效果、事件處理、使用 Ajax 以及其他功能。除此以外，jQuery 提供 API 讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。jQuery，顧名思義，也就是 JavaScript 和查詢（Query），即是輔助 JavaScript 開發(fā)的庫(kù)。13、表單驗(yàn)證傳輸?shù)氖裁磾?shù)據(jù)？明文還是暗文=加密？如何加密？是每一次傳輸數(shù)據(jù)，都是加密之后才傳輸嗎？答：概述：GET 是從服務(wù)器

11、上請(qǐng)求數(shù)據(jù)，POST 是發(fā)送數(shù)據(jù)到服務(wù)器。事實(shí)上，GET 方法是把數(shù)據(jù)參數(shù)隊(duì)列（query string）加到一個(gè) URL 上，值和表單是一一對(duì)應(yīng)的。比如說(shuō)，name=John。在隊(duì)列里，值和表單用一個(gè)&符號(hào)分開，空格用+號(hào)替換，特 殊的符號(hào)轉(zhuǎn)換成十六進(jìn)制的代碼。因?yàn)檫@一隊(duì)列在 URL 里邊，這樣隊(duì)列的參數(shù)就能看得到，可以被記錄下來(lái)，或更改。通常 GET 方法還限制字符的大小（大概是 256 字節(jié) ）。事實(shí)上 POST 方法可以沒有時(shí)間限制的傳遞數(shù)據(jù)到服務(wù)器，用戶在瀏覽器端是看不到這一過(guò)程的，所以 POST 方法比較適合用于發(fā)送一個(gè)保密的（比如信用 卡號(hào)）或者比較大量的數(shù)據(jù)到服務(wù)器。區(qū)別：Po

12、st 是允許傳輸大量數(shù)據(jù)的方法，而 Get 方法會(huì)將所要傳輸?shù)臄?shù)據(jù)附在網(wǎng)址后面，然后一起送達(dá)服務(wù)器，因此傳送的數(shù)據(jù)量就會(huì)受到限制，但是執(zhí)行效率卻比 Post 方法好?？偨Y(jié)：1、get 方式的安全性較 Post 方式要差些，包含機(jī)密信息的話，建議用 Post 數(shù)據(jù)提交方式；2、在做數(shù)據(jù)查詢時(shí)，建議用 Get 方式；而在做數(shù)據(jù)添加、修改或刪除時(shí)，建議用 Post 方式；所以：表達(dá)如果是向服務(wù)器傳輸數(shù)據(jù)(如帳號(hào)密碼等)都是加密數(shù)據(jù)(post)，如果只是單單想要從服務(wù)器獲得數(shù)據(jù)或者傳輸?shù)臄?shù)據(jù)并不重要， 可以直接使用明文方式傳輸( get )14、面向?qū)ο蠛皖惖膮^(qū)別？答：簡(jiǎn)單的說(shuō)類是對(duì)象的模版。在js

13、中沒有類， 所以在 js 中所謂的 類 就是構(gòu)造函數(shù)， 對(duì)象就是由構(gòu)造函數(shù)創(chuàng)建出來(lái)的實(shí)例對(duì)象。面向?qū)ο缶褪鞘褂妹嫦驅(qū)ο蟮姆绞教幚韱?wèn)題， 面向?qū)ο笫菍?duì)面向過(guò)程進(jìn)行封裝。面向?qū)ο笥腥筇匦猿橄笮裕?需要通過(guò)核心數(shù)據(jù)和特定環(huán)境才能描述對(duì)象的具體意義封裝性， 封裝就是將數(shù)據(jù)和功能組合到一起， 在 js 中對(duì)象就是鍵值對(duì)的集合， 對(duì)象將屬性和方法封裝起來(lái)， 方法將過(guò)程封裝起來(lái)繼承性， 將別人的屬性和方法成為自己的， 傳統(tǒng)繼承基于模板(類)， js 中繼承基于 構(gòu)造函數(shù)對(duì)象的概念，面向?qū)ο缶幊痰某绦驅(qū)嶋H就是多個(gè)對(duì)象的集合，我們可以把所有的事物都抽象成對(duì)象，在程序設(shè)計(jì)中可以看作：對(duì)象=屬性+方法。屬性就是對(duì)

14、象的數(shù)據(jù)，而方法就是對(duì)象的行為。類的概念，類是對(duì)象的模版，而對(duì)象是類的實(shí)例化。舉個(gè)例子，汽車設(shè)計(jì)圖可以看作是類，而具體的汽車就是對(duì)象。再比如有一個(gè)類是表示人，然后可以通過(guò)人這個(gè)模版來(lái)實(shí)例化出張三、李四。15、在 JS 的計(jì)時(shí)器運(yùn)行原理是怎樣的，為什么可以觸發(fā)計(jì)時(shí)效果? 計(jì)時(shí)器是多線程嗎?答：1.javascript 引擎只有一個(gè)線程，強(qiáng)迫異步事件排隊(duì)等待被執(zhí)行。2.setTimeout 和 setInterval 本質(zhì)上不同的地方是他們?nèi)绾螆?zhí)行異步代碼的。3.如果一個(gè)定時(shí)器正在執(zhí)行的時(shí)候被阻塞了，那么它將會(huì)被推遲到下一個(gè)可能的執(zhí)行點(diǎn)，這既是使得延遲時(shí)間有可能會(huì)超過(guò)聲明定時(shí)器時(shí)設(shè)置的值。4.In

15、terval 如果有足夠的時(shí)間來(lái)執(zhí)行（大于制定的延遲），那么它將會(huì)無(wú)延遲的一個(gè)緊接著一個(gè)執(zhí)行。原理：計(jì)時(shí)器通過(guò)設(shè)定一定的時(shí)間段（毫秒）來(lái)異步的執(zhí)行一段代碼。因?yàn)?Javascript 是一個(gè)單線程語(yǔ)言，計(jì)時(shí)器提供了一種繞過(guò)這種語(yǔ)言限制來(lái)執(zhí)行代碼的能力?？偨Y(jié)：計(jì)時(shí)器是單線程的， 需要等待上一個(gè)執(zhí)行完， 如果上一個(gè)沒有執(zhí)行完， 下一個(gè)需要延遲執(zhí)行， 知道上一個(gè)執(zhí)行完16、如何查找構(gòu)造函數(shù)和原型中的屬性？答：構(gòu)造函數(shù).prototype查看構(gòu)造函數(shù)的原型屬性實(shí)例對(duì)象._proto_ 查看實(shí)例對(duì)象的構(gòu)造函數(shù)的原型實(shí)例對(duì)象._proto_.constructor 查看實(shí)例對(duì)象的構(gòu)造函數(shù)17、js 中一共

16、有幾種數(shù)據(jù)類型？答：Undefined、Null、Boolean、Number 和 String。還有一種復(fù)雜的數(shù)據(jù)類型 Object，Object 本質(zhì)是一組無(wú)序的名值對(duì)組成的。18、call 和 apply 的區(qū)別答： 它們的共同之處：都“可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。”它們的不同之處：apply：最多只能有兩個(gè)參數(shù)新 this 對(duì)象和一個(gè)數(shù)組 argArray。如果給該方法傳遞多個(gè)參數(shù)，則把參數(shù)都寫進(jìn)這個(gè)數(shù)組里面，當(dāng)然，即使只有一個(gè)參數(shù)，也要寫進(jìn)數(shù)組里面。如果 argArray 不是一個(gè)有效的數(shù)組或者不是

17、arguments 對(duì)象，那么將導(dǎo)致一個(gè) TypeError。如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對(duì)象將被用作 thisObj， 并且無(wú)法被傳遞任何參數(shù)。call：則是直接的參數(shù)列表，主要用在 js 對(duì)象各方法互相調(diào)用的時(shí)候，使當(dāng)前 this 實(shí)例指針保持一致，或在特殊情況下需要改變 this 指針。如果沒有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。更簡(jiǎn)單地說(shuō)，apply 和 call 功能一樣，只是傳入的參數(shù)列表形式不同：如 func.call(func1，var1，var2，var3) 對(duì)應(yīng)的 apply

18、寫法為：func.apply(func1，var1，var2，var3)。19、說(shuō)說(shuō)你對(duì) this 的理解？答：this 是一個(gè)關(guān)鍵字，它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。1.作為純粹的函數(shù)調(diào)用 this 指向全局對(duì)象2.作為對(duì)象的方法調(diào)用 this 指向調(diào)用對(duì)象3.作為構(gòu)造函數(shù)被調(diào)用 this 指向新的對(duì)象（new 會(huì)改變 this 的指向）4.apply 調(diào)用 this 指向 apply 方法的第一個(gè)參數(shù)21、js 的異步加載有哪幾種方法？答：方案一：標(biāo)簽的 async=async屬性。HTML5 中新增的屬性，Chrome、FF、IE9&IE9+均支持（IE68

19、不支持）。此外，這種方法不能保證腳本按順序執(zhí)行。方案二：標(biāo)簽的 defer=defer屬性。兼容所有瀏覽器。此外，這種方法可以確保所有設(shè)置 defer 屬性的腳本按順序執(zhí)行。方案三：AJAX eval（使用 AJAX 得到腳本內(nèi)容，然后通過(guò) eval_r(xmlhttp.responseText)來(lái)運(yùn)行腳本）。兼容所有瀏覽器。方案四：iframe 方式（這里可以參照：iframe 異步加載技術(shù)及性能中關(guān)于 Meboo 的部分）。兼容所有瀏覽器。22、列舉瀏覽器對(duì)象模型 BOM 里常用的至少 4 個(gè)對(duì)象，并列舉 window 對(duì)象的常用方法至少 5 個(gè)？答：對(duì)象：Window document location screen history navigator方法：Alert() confirm() prompt() open() close()23、簡(jiǎn)述列舉文檔對(duì)象模型 DOM 里 document 的常用的查找訪問(wèn)節(jié)點(diǎn)的方法做簡(jiǎn)單說(shuō)明？答： document.getE