本文很多面試題是網友面試BAT親身經歷碰到的。整理分享出來希望更多的前端er共同進步吧，不僅適用於求職者，對於鞏固複習js更是大有裨益。
中級Javascript：
1.實現一個函數clone，可以對JavaScript中的5種主要的數據類型(包括Number、String、Object、Array、Boolean)進行值複製
考察點1：對於基本數據類型和引用數據類型在內存中存放的是值還是指針這一區別是否清楚
考察點2：是否知道如何判斷一個變量是什麼類型的
考察點3：遞歸算法的設計
1 // 方法一：
2 e = function(){ 3 var o = tructor === Array ? [] : {}; 4 for(var e in this){ 5 o[e] = typeof this[e] === "object" ? this[e]e() : this[e]; 6 } 7 return o; 8 } 9 10 //方法二：11 /**
12 * 克隆一個對象
13 * @param Obj
14 * @returns
15 */ 16 function clone(Obj) {
17 var buf;
18 if (Obj instanceof Array) {
19 buf = []; //創建一個空的數組 20 var i = th;
21 while (i--) {
22 buf[i] = clone(Obj[i]);
23 }
24 return buf;
25 }else if (Obj instanceof Object){
26 buf = {}; //創建一個空對象 27 for (var k in Obj) { //爲這個對象添加新的屬性 28 buf[k] = clone(Obj[k]);
29 }
30 return buf;
31 }else{ //普通變量直接賦值32 return Obj;
33 }
34 }
2.如何消除一個數組裏面重復的元素?
1 var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4]; 2 function deRepeat(){ 3 var newArr=[]; 4 var obj={}; 5 var index=0; 6 var l=th; 7 for(var i=0;i
3.小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下對象：
1 function Dog() {2 = function() {3 alert(’Wow’);4 }5 = function() {6 ();7 }8 }
小芒和小賢一樣，原來也是一條可愛的小狗，可是突然有一天瘋了(MadDog)，一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據描述，按示例的形式用代碼來實。(繼承，原型，setInterval)
答案：
1 function MadDog() { 2 = function() { 3 var self = this;
4 setInterval(function() { 5 ();
6 }, 500); 7 } 8 } 9 otype = new Dog();
10 11 //for test12 var dog = new Dog();13 ();14 var madDog = new MadDog();15 ();
4.下面這個ul，如何點擊每一列的時候alert其index?(閉包)
1
2
這是第一條
3
這是第二條
4
這是第三條
5
答案：
1 // 方法一：
2 var lis=lementById('2223')lementsByTagName('li'); 3 for(var i=0;i<3;i++) 4 { 5 lis[i]x=i; 6 lis[i]ick=function(){ 7 alert(x); 8 }; 9 }10 11 //方法二：12 var lis=lementById('2223')lementsByTagName('li');13 for(var i=0;i<3;i++)14 {15 lis[i]x=i;16 lis[i]ick=(function(a){17 return function() {18 alert(a);19 }20 })(i);21 }
5.編寫一個JavaScript函數，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)可以返回匹配的DOM節點，需考慮瀏覽器兼容性和性能。
/*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/
答案：(過長，點擊打開)
6.請評價以下代碼並給出改進意見。
1 if(ventListener){ 2 var addListener = function(el,type,listener,useCapture){ 3 ventListener(type,listener,useCapture); 4 }; 5 } 6 else if(){ 7 addListener = function(el,type,listener){ 8 chEvent("on"+type,function(){ 9 y(el);10 });11 }
12 }
評價：
不應該在if和else語句中聲明addListener函數，應該先聲明;
不需要使用ventListener或來進行檢測瀏覽器，應該使用能力檢測;
由於attachEvent在IE中有this指向問題，所以調用它時需要處理一下
改進如下：
1 function addEvent(elem, type, handler){
2 if(ventListener){
3 ventListener(type, handler, false);
4 }else if(chEvent){
5 elem['temp' + type + handler] = handler;
6 elem[type + handler] = function(){
7 elem['temp' + type + handler]y(elem);
8 };
9 chEvent('on' + type, elem[type + handler]);
10 }else{
11 elem['on' + type] = handler;
12 }
13 }
7.給String對象添加一個方法，傳入一個string類型的參數，然後將string的每個字符間價格空格返回，例如：
addSpace(“Hello World”) // -> ‘h e l l o w o r l d’
1 ify = function(){2 return t('')(' ');3 };
接着上述答題，那麼問題來了
1)直接在對象的原型上添加方法是否安全?尤其是在Object對象上。(這個我沒能答出?希望知道的說一下。)
2)函數聲明與函數表達式的區別?
答案：在Javscript中，解析器在向執行環境中加載數據時，對函數聲明和函數表達式並非是一視同仁的，解析器會率先讀取函數聲明，並使其在執行任何代碼之前可用(可以訪問)，至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解析執行。(函數聲明提升)
8.定義一個log方法，讓它可以代理的方法。
可行的方法一：
1 function log(msg) {2 (msg);3 }4 5 log("hello world!") // hello world!6
如果要傳入多個參數呢?顯然上面的方法不能滿足要求，所以更好的方法是：
1 function log(){2 y(console, arguments);3 };
那麼問題來了，apply和call方法的異同?
答案：
對於apply和call兩者在作用上是相同的，即是調用一個對象的一個方法，以另一個對象替換當前對象。將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。
但兩者在參數上有區別的。對於第一個參數意義都一樣，但對第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則作爲call的參數傳入(從第二個參數開始)。 如 (func1,var1,var2,var3)對應的apply寫法爲：y(func1,[var1,var2,var3]) 。
9.在Javascript中什麼是僞數組?如何將僞數組轉化爲標準數組?
答案：
僞數組(類數組)：無法直接調用數組方法或期望length屬性有什麼特殊的行爲，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,dNodes之類的`,它們都返回NodeList對象都屬於僞數組。可以使用(fakeArray)將數組轉化爲真正的Array對象。
假設接第八題題幹，我們要給每個log方法添加一個”(app)”前綴，比如’hello world!’ ->’(app)hello world!’。方法如下：
1 function log(){2 var args = (arguments); //爲了使用unshift數組方法，將argument轉化爲真正的數組3 ift('(app)');4 5 y(console, args);6 };
10.對作用域上下文和this的理解，看下列代碼：
1 var User = { 2 count: 1, 3
4 getCount: function() { 5 return t; 6 } 7 }; 8
9 (ount()); // what?10 11 var func = ount;
12 (func()); // what?
問兩處console輸出什麼?爲什麼?
答案是1和undefined。
func是在winodw的上下文中被執行的，所以會訪問不到count屬性。
那麼問題來了，如何確保Uesr總是能訪問到func的上下文，即正確返回1。
答案：正確的方法是使用。兼容各個瀏覽器完整代碼如下：
1 = || function(context){ 2 var self = this; 3
4 return function(){ 5 return y(context, arguments); 6 }; 7 } 8
9 var func = (User);10 (func());
11.原生JS的ad與Jquery的$(document)y(function(){})有什麼不同?如何用原生JS實現Jq的ready方法?
ad()方法是必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document)y()是DOM結構繪製完畢後就執行，不必等到加載完畢。
1 /*
2 * 傳遞函數給whenReady()
3 * 當文檔解析完畢且爲操作準備就緒時，函數作爲document的方法調用
4 */
5 var whenReady = (function() { //這個函數返回whenReady()函數
6 var funcs = []; //當獲得事件時，要運行的函數
7 var ready = false; //當觸發事件處理程序時,切換爲true
8
9 //當文檔就緒時,調用事件處理程序10 function handler(e) {11 if(ready) return; //確保事件處理程序只完整運行一次12 13 //如果發生onreadystatechange事件，但其狀態不是complete的話,那麼文檔尚未準備好14 if( === 'onreadystatechange' && yState !== 'complete') {15 return;16 }17 18 //運行所有註冊函數19 //注意每次都要計算th20 //以防這些函數的調用可能會導致註冊更多的函數21 for(var i=0; i
如果上述代碼十分難懂，下面這個簡化版：
1 function ready(fn){ 2 if(ventListener) { //標準瀏覽器
3 ventListener('DOMContentLoaded', function() { 4 //註銷事件, 避免反覆觸發
5 veEventListener('DOMContentLoaded',ee, false); 6 fn(); //執行函數
7 }, false); 8 }else if(chEvent) { //IE
9 chEvent('onreadystatechange', function() {10 if(yState == 'complete') {11 chEvent('onreadystatechange', ee);12 fn(); //函數執行13 }14 });15 }16 };
12.(設計題)想實現一個對頁面某個節點的拖曳?如何做?(使用原生JS)
回答出概念即可，下面是幾個要點
給需要拖拽的節點綁定mousedown, mousemove, mouseup事件
mousedown事件觸發後，開始拖拽
mousemove時，需要通過ntX和clientY獲取拖拽位置，並實時更新位置
mouseup時，拖拽結束
需要注意瀏覽器邊界的情況
13.
1 function setcookie(name,value,days){ //給cookie增加一個時間變量
2 var exp = new Date();
3 ime(ime() + days*24*60*60*1000); //設置過期時間爲days天
4 ie = name + "="+ escape (value) + ";expires=" + TString();
5 }
6 function getCookie(name){ 7 var result = ""; 8 var myCookie = ""+ie+";";
9 var searchName = "+name+"=";
10 var startOfCookie = xOf(searchName);
11 var endOfCookie;
12 if(satrtOfCookie != -1){
13 startOfcookie += th;
14 endOfCookie = xOf(";",startOfCookie);
15 result = (tring(startOfCookie,endOfCookie));
16 }
17 return result;
18 }
19 (function(){
20 var oTips = lementById('tips');//假設tips的id爲tips
21 var page = {
22 check: function(){//檢查tips的cookie是否存在並且允許顯示
23 var tips = getCookie('tips');
24 if(!tips || tips == 'show') return true;//tips的cookie不存在
25 if(tips == "never_show_again") return false;
26 },
27 hideTip: function(bNever){
28 if(bNever) setcookie('tips', 'never_show_again', 365);
29 lay = "none";//隱藏
30 },
31 showTip: function(){
32 lay = "inline";//顯示，假設tips爲行級元素
33 },
34 init: function(){
35 var _this = this;
36 if(k()){
37 _Tip();
38 setcookie('tips', 'show', 1);
39 }
40 ick = function(){
41 _Tip(true);
42 };
43 }
44 };
45 ();
46 })();
14.說出以下函數的作用是?空白區域應該填寫什麼?
1 //define
2 (function(window){ 3 function fn(str){ 4 =str; 5 } 6
7 at = function(){ 8 var arg = ______; 9 return ace(_____,function(a,b){10 return arg[b]||"";11 });12 }13 = fn;14 })(window);15 16 //use17 (function(){18 var t = new fn('
{1}{2}
');19 (at('','Alibaba','Welcome'));20 })();
答案：訪函數的作用是使用format函數將函數的參數替換掉{0}這樣的內容，返回一個格式化後的結果：
第一個空是：arguments
第二個空是：/{(d+)}/ig
15.用面向對象的Javascript來介紹一下自己。