四、JavaScript高級模塊

基礎(chǔ)部分

1. 說說你對this關(guān)鍵字的理解？

? - [ ] this 是一個關(guān)鍵字，它代表函數(shù)運行時媒楼，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi) 部使用戚丸。

? ? ? ? 1.作為純粹的函數(shù)調(diào)用 this 指向全局對象

? ? ? ? 2.作為對象的方法調(diào)用 this 指向調(diào)用對象

? ? ? ? 3.作為構(gòu)造函數(shù)被調(diào)用 this 指向新的對象（new會改變 this 的指向）

? ? ? ? 4.apply 調(diào)用 this 指向 apply方法的第一個參數(shù)

2. 表單驗證傳輸?shù)氖裁磾?shù)據(jù)划址？明文還是暗文==加密？如何加密限府？是每一次傳

? 輸數(shù)據(jù)夺颤，都是加密之后才傳輸嗎？

? - [ ] 1. 概述： GET是從服務(wù)器上請求數(shù)據(jù)胁勺，POST 是發(fā)送數(shù)據(jù)到服務(wù)器世澜。事實上，GET方法是把數(shù) 據(jù)參數(shù)隊列（query string）加到一個URL上署穗，值和表單是一一對應(yīng)的宜狐。比如說， name=John蛇捌。在隊列里，值和表單用一個&符號分開咱台，空格用+號替換络拌，特殊的符號轉(zhuǎn)換 成十六進制的代碼。因為這一隊列在 URL里邊回溺，這樣隊列的參數(shù)就能看得到春贸，可以被記錄 下來，或更改遗遵。通常GET 方法還限制字符的大衅妓　（大概是 256 字節(jié) ）。事實上POST 方法可以沒有時間限制的傳遞數(shù)據(jù)到服務(wù)器车要，用戶在瀏覽器端是看不到 這一過程的允粤，所以 POST方法比較適合用于發(fā)送一個保密的（比如信用 卡號）或者比較大 量的數(shù)據(jù)到服務(wù)器。

? ? ? ? 2. 區(qū)別： Post 是允許傳輸大量數(shù)據(jù)的方法翼岁，而 Get 方法會將所要傳輸?shù)臄?shù)據(jù)附在網(wǎng)址后面类垫，然 后一起送達服務(wù)器，因此傳送的數(shù)據(jù)量就會受到限制琅坡，但是執(zhí)行效率卻比 Post 方法好悉患。

? ? ? ? 3. 總結(jié)：

? ? ? ? ? ? 1、get 方式的安全性較Post 方式要差些榆俺，包含機密信息的話售躁，建議用 Post 數(shù)據(jù)提交 方式坞淮；

? ? ? ? ? ? 2、在做數(shù)據(jù)查詢時陪捷，建議用 Get 方式回窘；而在做數(shù)據(jù)添加、修改或刪除時揩局，建議用Post 方式毫玖；

? ? ? ? 4. 所以： 表達如果是向服務(wù)器傳輸數(shù)據(jù)(如帳號密碼等)都是加密數(shù)據(jù)(post)，如果只是單單想要 從服務(wù)器獲得數(shù)據(jù)或者傳輸?shù)臄?shù)據(jù)并不重要凌盯， 可以直接使用明文方式傳輸( get )

3. 如何實現(xiàn)跨域付枫？

? - [ ] JSONP(JSON with Padding 填充式JSON 或參數(shù)式 JSON)

? ? ? ? 在js 中，我們雖然不能直接用XMLHttpRequest 請求不同域上的數(shù)據(jù)驰怎，但是在頁面上引入不同域上的js 腳本文件卻是可以的阐滩，jsonp正是利用這個特性來實現(xiàn)的。

? ? ? ? JSONP 由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)县忌〉嗬疲回調(diào)函數(shù)是當響應(yīng)到來時應(yīng)該在頁面中調(diào)用的函數(shù)，而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON 數(shù)據(jù)症杏。

? ? ? ? 優(yōu)點： 它的兼容性更好装获，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest 或 ActiveX 的支持厉颤； 能夠直接訪問響應(yīng)文本穴豫，支持在瀏覽器與服務(wù)器之間雙向通信

? ? ? ? 缺點： JSONP 是從其他域中加載代碼執(zhí)行。如果其他域不安全逼友，很可能會在響應(yīng)中夾帶一些 惡意代碼精肃，而此時除了完全放棄 JSONP 調(diào)用之外，沒有辦法追究帜乞。因此在使用不是你自己 運維的Web 服務(wù)時司抱，一定得保證它安全可靠。 它只支持 GET請求而不支持 POST等其它類型的 HTTP 請求黎烈；它只支持跨域 HTTP 請 求這種情況习柠，不能解決不同域的兩個頁面之間如何進行 JavaScript調(diào)用的問題

4. 說說事件委托機制？這樣做有什么好處怨喘？

? - [ ] 事件委托津畸，就是某個事件本來該自己干的，但是自己不干必怜，交給別人來干肉拓。就叫事件委 托。打個比方：一個button 對象梳庆，本來自己需要監(jiān)控自身的點擊事件暖途，但是自己不來監(jiān)控這個點擊事件卑惜，讓自己的父節(jié)點來監(jiān)控自己的點擊事件。

? ? ? ? 優(yōu)點：

? ? ? ? ? 提高性能：列如驻售，當有很多 li同時需要注冊事件的時候露久，如果使用傳統(tǒng)方法來注冊 事件的話，需要給每一個 li 注冊事件欺栗。然而如果使用委托事件的話毫痕，就只需要將事件委托給 該一個元素即可。這樣就能提高性能迟几。

? ? ? ? 新添加的元素還會有之前的事件消请；

5. call和apply的區(qū)別？

? - [ ] 它們的共同之處：都“可以用來代替另一個對象調(diào)用一個方法类腮，將一個函數(shù)的對象上 下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象臊泰。”

? ? ? ? 它們的不同之處：

? ? ? ? Apply：最多只能有兩個參數(shù)——新this 對象和一個數(shù)組 argArray蚜枢。如果給該方法傳遞多 個參數(shù)缸逃，則把參數(shù)都寫進這個數(shù)組里面，當然厂抽，即使只有一個參數(shù)需频，也要寫進數(shù)組里面。如 果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象筷凤，那么將導(dǎo)致一個 TypeError贺辰。如果沒有提供 argArray 和 thisObj 任何一個參數(shù)，那么 Global 對象將被 用作 thisObj嵌施， 并且無法被傳遞任何參數(shù)

? ? ? ? Call：則是直接的參數(shù)列表，主要用在js 對象各方法互相調(diào)用的時候莽鸭，使當前 this 實例指 針保持一致吗伤，或在特殊情況下需要改變this指針。如果沒有提供 thisObj 參數(shù)硫眨，那么 Global 對象被用作 thisObj足淆。

6. 在JS的計時器運行原理是怎樣的，為什么可以觸發(fā)計時效果? 計時器是多線程嗎?

? - [ ] 1. javascript引擎只有一個線程礁阁，強迫異步事件排隊等待被執(zhí)行巧号。

? ? ? ? 2. setTimeout 和setInterval 本質(zhì)上不同的地方是他們?nèi)绾螆?zhí)行異步代碼的。

? ? ? ? 3. 如果一個定時器正在執(zhí)行的時候被阻塞了姥闭，那么它將會被推遲到下一個可能的執(zhí)行點丹鸿，這既是使得延遲時間有可能會超過聲明定時器時設(shè)置的值。

? ? ? ? 4. Interval 如果有足夠的時間來執(zhí)行（大于制定的延遲）棚品，那么它將會無延遲的一個緊 接著一個執(zhí)行靠欢。

? ? ? ? 5. 原理： 計時器通過設(shè)定一定的時間段（毫秒）來異步的執(zhí)行一段代碼廊敌。因為 Javascript 是一 個單線程語言，計時器提供了一種繞過這種語言限制來執(zhí)行代碼的能力门怪。

? ? ? ? 6. 總結(jié)： 計時器是單線程的骡澈， 需要等待上一個執(zhí)行完， 如果上一個沒有執(zhí)行完掷空， 下一個需要 延遲執(zhí)行肋殴， 直到上一個執(zhí)行完。

7. 什么是事件的冒泡和捕獲坦弟？

? - [ ] 事件冒泡：子元素事件的觸發(fā)會影響父元素事件护锤；

? ? ? ? 開關(guān)事件冒泡：

? ? ? ? A，開啟事件冒泡：element.addEventListener(eventName减拭，handler蔽豺，false)；

? ? ? ? B拧粪，關(guān)閉事件冒泡：假設(shè)傳統(tǒng)方式事件的返回值為 e修陡，就可以通過 e.stopPropagation()來關(guān)閉事件冒泡；

? ? ? ? 事件捕獲：父元素的事件會影響子元素的事件可霎；

? ? ? ? 開啟事件捕獲：element.addEventListener(eventName魄鸦，handler，true)

8. 面向?qū)ο蠛皖惖膮^(qū)別癣朗？

? - [ ] 簡單的說類是對象的模版拾因。

? ? ? ? 在 js 中沒有類， 所以在js 中所謂的 類 就是構(gòu)造函數(shù)旷余， 對象就是由構(gòu)造函數(shù)創(chuàng)建

? ? ? ? 出來的實例對象绢记。面向?qū)ο缶褪鞘褂妹嫦驅(qū)ο蟮姆绞教幚韱栴}， 面向?qū)ο笫菍γ嫦蜻^程進

? ? ? ? 行封裝正卧。

? ? ? ? 面向?qū)ο笥腥筇匦?/p>

? ? ? ? 抽象性堂油， 需要通過核心數(shù)據(jù)和特定環(huán)境才能描述對象的具體意義

? ? ? ? 封裝性元咙， 封裝就是將數(shù)據(jù)和功能組合到一起， 在js 中對象就是鍵值對的集合， 對象

? ? ? ? 將屬性和方法封裝起來照激， 方法將過程封裝起來

? ? ? ? 繼承性测蹲，將別人的屬性和方法成為自己的僧须，傳統(tǒng)繼承基于模板(類)端考，js 中繼承基于 構(gòu)

? ? ? ? 造函數(shù)

實際工作部分

1. JavaScript 中的垃圾回收機制?

? - [ ] 在Javascript 中，如果一個對象不再被引用罐盔，那么這個對象就會被GC 回收但绕。如 果兩個對象互相引用，而不再被第3者所引用惶看，那么這兩個互相引用的對象也會被回收壁熄。 因為函數(shù) a被b引用帚豪，b又被 a外的 c引用，這就是為什么 函數(shù) a 執(zhí)行后不會被回收的原 因草丧。

2. 列出3條以上 FF 和 IE 的腳本兼容問題

? - [ ] 1. window.event：

? ? ? ? ? ? 表示當前的事件對象狸臣，IE有這個對象，F(xiàn)F沒有昌执，F(xiàn)F通過給事件處理函數(shù)傳遞事件對象

? ? ? ? 2. 獲取事件源

? ? ? ? ? ? IE用srcElement獲取事件源烛亦，而FF用target獲取事件源

? ? ? ? 3. 添加，去除事件

? ? ? ? ? ? IE：element.attachEvent(“onclick”,function)? ? element.detachEvent(“onclick”, function)

? ? ? ? ? ? FF：element.addEventListener(“click”,function, true) element.removeEventListener(“click”, function, true)

? ? ? ? 4. 獲取標簽的自定義屬性

? ? ? ? ? ? IE：div1.value或div1[“value”]

? ? ? ? ? ? FF：可用div1.getAttribute(“value”)

3. 用正則表達式懂拾，寫出由字母開頭煤禽，其余由數(shù)字、字母岖赋、下劃線組成的6~30的字符串？

? - [ ] /^[a-zA-Z]{1}[\w]{5,29}$/

4. 下列JavaScript代碼執(zhí)行后唐断，iNum的值是多少？

? - [ ] var iNum = 0;

? ? ? ? for(var i = 1; i < 10; i++){

? ? ? ? if(i% 5 == 0){

? ? ? ? ? ? ? ? ? continue;

? ? ? ? ? ? ? ? }

? ? ? ? iNum++;

? ? ? ? }

? - [ ] 答：8

5. 程序中捕獲異常的方法脸甘？

? - [ ] window.error

? ? ? ? try{}catch(error){}finally{}

6. 正則匹配郵箱？

? - [ ] /^([a-zA-Z0-9-])+@([a-zA-Z0-9-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

7. Javascript中callee和caller的作用丹诀？

? - [ ] caller是返回一個對函數(shù)的引用，該函數(shù)調(diào)用了當前函數(shù)铆遭；

? ? ? ? callee是返回正在被執(zhí)行的function函數(shù)硝桩，也就是所指定的function對象的正文枚荣。

8. 下列代碼的輸出結(jié)果？

? ? ? function f1(){

? ? ? ? var tmp = 1;

? ? ? ? this.x = 3;

? ? ? ? console.log( tmp );

? ? ? ? console.log( this.x );

? ? ? }

? ? ? var obj = new f1();

? ? ? console.log( obj.x );

? ? ? console.log( f1() );

? 答：

? - [ ] 首先看代碼（1）棍弄，這里實例話化了f1這個類疟游。相當于執(zhí)行了 f1函數(shù)。所以這個時候 A 會輸出 1颁虐， 而 B 這個時候的 this 代表的是實例化的當前對象 obj ,B 輸出 3。

? ? ? ? 代碼（2）毋庸置疑會輸出 3另绩，

? ? ? ? 重點 代碼（3）首先這里將不再是一個類儒陨，它只是一個函數(shù)花嘶。那么 A輸出 1， B呢蹦漠？這里的this 代表的其實就是window對象椭员，那么this.x 就是一個全局變量 相當于在外部 的一個全局變量。所以B 輸出 3笛园。最后代碼由于f沒有返回值那么一個函數(shù)如果沒返回值的話隘击，將會返回 underfined ，所以答案就是 ： 1研铆， 3埋同， 3， 1棵红， 3凶赁， underfined 。

9. 下面代碼輸出結(jié)果逆甜？

? ? ? function changeObjectProperty(o){

? ? ? ? o.siteUrl = "http://www.csser.com/";

? ? ? ? o = new Object();

? ? ? ? o.siteUrl = "http://www.popcg.com/";

? ? ? }

? ? ? var CSSer = new Object();

? ? ? changeObjectProperty( CSSer );

? ? ? console.log( CSSer.siteUrl );

? 答：

? - [ ] "http://www.popcg.com/"