乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

  • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s>

    • 分享

      各大互聯(lián)網(wǎng)公司2014前端筆試面試題–JavaScript篇 – 碼農(nóng)網(wǎng)

       Gtwo 2015-04-16

      很多面試題是我自己面試BAT親身經(jīng)歷碰到的。整理分享出來希望更多的前端er共同進步吧,不僅適用于求職者,對于鞏固復(fù)習(xí)js更是大有裨益。

      而更多的題目是我一路以來收集的,也有往年的,答案不確保一定正確,如有錯誤或有更好的解法,還請斧正。

      前面幾題是會很基礎(chǔ),越下越有深度。

      初級Javascript:

      1.JavaScript是一門什么樣的語言,它有哪些特點?

      沒有標(biāo)準(zhǔn)答案。

      2.JavaScript的數(shù)據(jù)類型都有什么?

      基本數(shù)據(jù)類型:String,boolean,Number,Undefined, Null

      引用數(shù)據(jù)類型:Object(Array,Date,RegExp,Function)

      那么問題來了,如何判斷某變量是否為數(shù)組數(shù)據(jù)類型?

      • 方法一.判斷其是否具有“數(shù)組性質(zhì)”,如slice()方法??勺约航o該變量定義slice方法,故有時會失效
      • 方法二.obj instanceof Array 在某些IE版本中不正確
      • 方法三.方法一二皆有漏洞,在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性,最好的方法如下:
      1 if(typeof Array.isArray==="undefined")
      2 {
      3   Array.isArray = function(arg){
      4         return Object.prototype.toString.call(arg)==="[object Array]"
      5     };  
      6 }

      3.已知ID的Input輸入框,希望獲取這個輸入框的輸入值,怎么做?(不使用第三方框架)

      1 document.getElementById(“ID”).value

      4.希望獲取到頁面中所有的checkbox怎么做?(不使用第三方框架)

      1 var domList = document.getElementsByTagName(‘input’)
      2 var checkBoxList = [];
      3 var len = domList.length;  //緩存到局部變量
      4 while (len--) {  //使用while的效率會比for循環(huán)更高
      5   if (domList[len].type == ‘checkbox’) {
      6       checkBoxList.push(domList[len]);
      7   }
      8 }

      5.設(shè)置一個已知ID的DIV的html內(nèi)容為xxxx,字體顏色設(shè)置為黑色(不使用第三方框架)

      1 var dom = document.getElementById(“ID”);
      2 dom.innerHTML = “xxxx”
      3 dom.style.color = “#000”

      6.當(dāng)一個DOM節(jié)點被點擊時候,我們希望能夠執(zhí)行一個函數(shù),應(yīng)該怎么做?

      •  直接在DOM里綁定事件:<div onclick=”test()”></div>
      •  在JS里通過onclick綁定:xxx.onclick = test
      •  通過事件添加進行綁定:addEventListener(xxx, ‘click’, test)

      那么問題來了,Javascript的事件流模型都有什么?

      • “事件冒泡”:事件開始由最具體的元素接受,然后逐級向上傳播
      • “事件捕捉”:事件由最不具體的節(jié)點先接收,然后逐級向下,一直到最具體的
      • “DOM事件流”:三個階段:事件捕捉,目標(biāo)階段,事件冒泡

      7.什么是Ajax和JSON,它們的優(yōu)缺點。

      Ajax是異步JavaScript和XML,用于在Web頁面中實現(xiàn)異步數(shù)據(jù)交互。

      優(yōu)點:

      •  可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容,降低數(shù)據(jù)傳輸量
      •  避免用戶不斷刷新或者跳轉(zhuǎn)頁面,提高用戶體驗

      缺點:

      •  對搜索引擎不友好(
      •  要實現(xiàn)ajax下的前后退功能成本較大
      •  可能造成請求數(shù)的增加
      •  跨域問題限制

      JSON是一種輕量級的數(shù)據(jù)交換格式,ECMA的一個子集

      優(yōu)點:輕量級、易于人的閱讀和編寫,便于機器(JavaScript)解析,支持復(fù)合數(shù)據(jù)類型(數(shù)組、對象、字符串、數(shù)字)

      8.看下列代碼輸出為何?解釋原因。

      1 var a;
      2 alert(typeof a); // undefined
      3 alert(b); // 報錯

      解釋:Undefined是一個只有一個值的數(shù)據(jù)類型,這個值就是“undefined”,在使用var聲明變量但并未對其賦值進行初始化時,這個變量的值就是undefined。而b由于未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。

      9.看下列代碼,輸出什么?解釋原因。

      1 var a = null;
      2 alert(typeof a); //object

      解釋:null是一個只有一個值的數(shù)據(jù)類型,這個值就是null。表示一個空指針對象,所以用typeof檢測會返回”object”。

      10.看下列代碼,輸出什么?解釋原因。

      1 var undefined;
      2 undefined == null; // true
      3 1 == true;   // true
      4 2 == true;   // false
      5 0 == false;  // true
      6 0 == '';     // true
      7 NaN == NaN;  // false
      8 [] == false; // true
      9 [] == ![];   // true
      • undefined與null相等,但不恒等(===)
      • 一個是number一個是string時,會嘗試將string轉(zhuǎn)換為number
      • 嘗試將boolean轉(zhuǎn)換為number,0或1
      • 嘗試將Object轉(zhuǎn)換成number或string,取決于另外一個對比量的類型
      • 所以,對于0、空字符串的判斷,建議使用 “===” ?!?==”會先判斷兩邊的值類型,類型不匹配時為false。

      那么問題來了,看下面的代碼,輸出什么,foo的類型為什么?

      1 var foo = "11"+2-"1";
      2 console.log(foo);
      3 console.log(typeof foo);

      執(zhí)行完后foo的值為111,foo的類型為Number。

      1 var foo = "11"+2+"1";    //體會加一個字符串'1' 和 減去一個字符串'1'的不同
      2 console.log(foo);
      3 console.log(typeof foo);

      執(zhí)行完后foo的值為113,foo的類型為String。

      11.看代碼給答案。

      1 var a = new Object();
      2 a.value = 1;
      3 b = a;
      4 b.value = 2;
      5 alert(a.value);

      答案:2(考察引用數(shù)據(jù)類型細(xì)節(jié))

      12.已知數(shù)組var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。

      答案:alert(stringArray.join(“”))

      已知有字符串foo=”get-element-by-id”,寫一個function將其轉(zhuǎn)化成駝峰表示法”getElementById”。

      1 function combo(msg){
      2     var arr=msg.split("-");
      3     for(var i=1;i<arr.length;i++){
      4         arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
      5     }
      6     msg=arr.join("");
      7     return msg;
      8 }

      (考察基礎(chǔ)API)

      13.var numberArray = [3,6,2,4,1,5]; (考察基礎(chǔ)API)

      1) 實現(xiàn)對該數(shù)組的倒排,輸出[5,1,4,2,6,3]

      2) 實現(xiàn)對該數(shù)組的降序排列,輸出[6,5,4,3,2,1]

      1 var numberArray = [3,6,2,4,1,5];
      2 
      3 numberArray.reverse(); // 5,1,4,2,6,3
      4 
      5 numberArray.sort(function(a,b){  //6,5,4,3,2,1
      6    return b-a; 
      7 })

      14.輸出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,則輸出2014-09-26

       1 var d = new Date();
       2 // 獲取年,getFullYear()返回4位的數(shù)字
       3 var year = d.getFullYear();
       4 // 獲取月,月份比較特殊,0是1月,11是12月
       5 var month = d.getMonth() + 1;
       6 // 變成兩位
       7 month = month < 10 ? '0' + month : month;
       8 // 獲取日
       9 var day = d.getDate();
      10 day = day < 10 ? '0' + day : day;
      11 alert(year + '-' + month + '-' + day);

      15.將字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替換成10,{$name}替換成Tony (使用正則表達(dá)式)

      答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

      16.為了保證頁面輸出安全,我們經(jīng)常需要對一些特殊的字符進行轉(zhuǎn)義,請寫一個函數(shù)escapeHtml,將<, >, &, “進行轉(zhuǎn)義

       1 function escapeHtml(str) {
       2 return str.replace(/[<>”&]/g, function(match) {
       3     switch (match) {
       4                    case “<”:
       5                       return “<”;
       6                    case “>”:
       7                       return “>”;
       8                    case “&”:
       9                       return “&”;
      10                    case “\””:
      11                       return “"”;
      12       }
      13   });
      14 }

      17.foo = foo||bar ,這行代碼是什么意思?為什么要這樣寫?

      答案:if(!foo) foo = bar; //如果foo存在,值不變,否則把bar的值賦給foo。

      短路表達(dá)式:作為”&&”和”||”操作符的操作數(shù)表達(dá)式,這些表達(dá)式在進行求值時,只要最終的結(jié)果已經(jīng)可以確定是真或假,求值過程便告終止,這稱之為短路求值。

      18.看下列代碼,將會輸出什么?(變量聲明提升)

      1 var foo = 1;
      2 function(){
      3     console.log(foo);
      4     var foo = 2;
      5     console.log(foo);
      6 }

      答案:輸出undefined 和 2。上面代碼相當(dāng)于:

      1 var foo = 1;
      2 function(){
      3     var foo;
      4     console.log(foo); //undefined
      5     foo = 2;
      6     console.log(foo); // 2;   
      7 }

      函數(shù)聲明與變量聲明會被JavaScript引擎隱式地提升到當(dāng)前作用域的頂部,但是只提升名稱不會提升賦值部分。

      19.用js實現(xiàn)隨機選取10–100之間的10個數(shù)字,存入一個數(shù)組,并排序。

      1 var iArray = []; 
      2 funtion getRandom(istart, iend){
      3         var iChoice = istart - iend +1;
      4         return Math.floor(Math.random() * iChoice + istart;
      5 }
      6 for(var i=0; i<10; i++){
      7         iArray.push(getRandom(10,100));
      8 }
      9 iArray.sort();

      20.把兩個數(shù)組合并,并刪除第二個元素。

      1 var array1 = ['a','b','c'];
      2 var bArray = ['d','e','f'];
      3 var cArray = array1.concat(bArray);
      4 cArray.splice(1,1);

      21.怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(原生JS,實在基礎(chǔ),沒細(xì)寫每一步)

      1)創(chuàng)建新節(jié)點

      createDocumentFragment()    //創(chuàng)建一個DOM片段
      createElement()   //創(chuàng)建一個具體的元素
      createTextNode()   //創(chuàng)建一個文本節(jié)點
      2)添加、移除、替換、插入
      appendChild()      //添加
      removeChild()      //移除
      replaceChild()      //替換
      insertBefore()      //插入
      3)查找
      getElementsByTagName()    //通過標(biāo)簽名稱
      getElementsByName()     //通過元素的Name屬性的值
      getElementById()        //通過元素Id,唯一性

      22.有這樣一個URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,請寫一段JS程序提取URL中的各個GET參數(shù)(參數(shù)名和參數(shù)個數(shù)不確定),將其按key-value形式返回到一個json結(jié)構(gòu)中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

      答案:

      1 function serilizeUrl(url) {
      2     var result = {};
      3     url = url.split("?")[1];
      4     var map = url.split("&");
      5     for(var i = 0, len = map.length; i < len; i++) {
      6         result[map[i].split("=")[0]] = map[i].split("=")[1];
      7     }
      8     return result;
      9 }

      23.正則表達(dá)式構(gòu)造函數(shù)var reg=new RegExp(“xxx”)與正則表達(dá)字面量var reg=//有什么不同?匹配郵箱的正則表達(dá)式?

      答案:當(dāng)使用RegExp()構(gòu)造函數(shù)的時候,不僅需要轉(zhuǎn)義引號(即\”表示”),并且還需要雙反斜杠(即\\表示一個\)。使用正則表達(dá)字面量的效率更高。 

      郵箱的正則匹配:

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

      24.看下面代碼,給出輸出結(jié)果。

      1 for(var i=1;i<=3;i++){
      2   setTimeout(function(){
      3       console.log(i);    
      4   },0);  
      5 };

      答案:4 4 4。

      原因:Javascript事件處理器在線程空閑之前不會運行。那么問題來了,如何讓上述代碼輸出1 2 3?

      1 for(var i=1;i<=3;i++){
      2    setTimeout((function(a){  //改成立即執(zhí)行函數(shù)
      3        console.log(a);    
      4    })(i),0);  
      5 };
      6 
      7 1           //輸出
      8 2
      9 3

      25.寫一個function,清除字符串前后的空格。(兼容所有瀏覽器)

      使用自帶接口trim(),考慮兼容性:

      1 if (!String.prototype.trim) { 
      2  String.prototype.trim = function() { 
      3  return this.replace(/^\s+/, "").replace(/\s+$/,"");
      4  } 
      5 } 
      6 
      7 // test the function 
      8 var str = " \t\n test string ".trim(); 
      9 alert(str == "test string"); // alerts "true"

      26.Javascript中callee和caller的作用?

      答案:

      caller是返回一個對函數(shù)的引用,該函數(shù)調(diào)用了當(dāng)前函數(shù);

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

      那么問題來了?如果一對兔子每月生一對兔子;一對新生兔,從第二個月起就開始生兔子;假定每對兔子都是一雌一雄,試問一對兔子,第n個月能繁殖成多少對兔子?(使用callee完成)

       1 var result=[];
       2 function fn(n){  //典型的斐波那契數(shù)列
       3    if(n==1){
       4         return 1;
       5    }else if(n==2){
       6            return 1;
       7    }else{
       8         if(result[n]){
       9                 return result[n];
      10         }else{
      11                 //argument.callee()表示fn()
      12                 result[n]=arguments.callee(n-1)+arguments.callee(n-2);
      13                 return result[n];
      14         }
      15    }
      16 }

      中級Javascript:

      1.實現(xiàn)一個函數(shù)clone,可以對JavaScript中的5種主要的數(shù)據(jù)類型(包括Number、String、Object、Array、Boolean)進行值復(fù)制

      • 考察點1:對于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型在內(nèi)存中存放的是值還是指針這一區(qū)別是否清楚
      • 考察點2:是否知道如何判斷一個變量是什么類型的
      • 考察點3:遞歸算法的設(shè)計
       1 // 方法一:
       2 Object.prototype.clone = function(){
       3         var o = this.constructor === Array ? [] : {};
       4         for(var e in this){
       5                 o[e] = typeof this[e] === "object" ? this[e].clone() : 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 = [];                    //創(chuàng)建一個空的數(shù)組 
      20             var i = Obj.length;   
      21             while (i--) {   
      22                 buf[i] = clone(Obj[i]);   
      23             }   
      24             return buf;    
      25         }else if (Obj instanceof Object){   
      26             buf = {};                   //創(chuàng)建一個空對象 
      27             for (var k in Obj) {           //為這個對象添加新的屬性 
      28                 buf[k] = clone(Obj[k]);   
      29             }   
      30             return buf;   
      31         }else{                         //普通變量直接賦值
      32             return Obj;   
      33         }   
      34     }

      2.如何消除一個數(shù)組里面重復(fù)的元素?

       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=arr.length;
       7             for(var i=0;i<l;i++){
       8                 if(obj[arr[i]]==undefined)
       9                   {
      10                     obj[arr[i]]=1;
      11                     newArr[index++]=arr[i];
      12                   }
      13                 else if(obj[arr[i]]==1)
      14                   continue;
      15             }
      16             return newArr;
      17 
      18         }
      19         var newArr2=deRepeat(arr);
      20         alert(newArr2); //輸出1,2,3,4,5,6,9,25

      3.小賢是一條可愛的小狗(Dog),它的叫聲很好聽(wow),每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下對象:

      1 function Dog() {
      2        this.wow = function() {
      3                alert(’Wow’);
      4       }
      5        this.yelp = function() {
      6               this.wow();
      7       }
      8 }

      小芒和小賢一樣,原來也是一條可愛的小狗,可是突然有一天瘋了(MadDog),一看到人就會每隔半秒叫一聲(wow)地不停叫喚(yelp)。請根據(jù)描述,按示例的形式用代碼來實。(繼承,原型,setInterval)

      答案:

       1 function MadDog() {
       2     this.yelp = function() {
       3           var self = this;          
       4           setInterval(function() {
       5                 self.wow();      
       6           }, 500);
       7       }
       8 }
       9 MadDog.prototype = new Dog();         
      10 
      11 //for test
      12 var dog = new Dog();
      13 dog.yelp();
      14 var madDog = new MadDog();
      15 madDog.yelp();

      4.下面這個ul,如何點擊每一列的時候alert其index?(閉包)

      1 <ul id=”test”>
      2 <li>這是第一條</li>
      3 <li>這是第二條</li>
      4 <li>這是第三條</li>
      5 </ul>

      答案:

       1 // 方法一:
       2 var lis=document.getElementById('2223').getElementsByTagName('li');
       3 for(var i=0;i<3;i++)
       4 {
       5     lis[i].index=i;
       6     lis[i].onclick=function(){
       7         alert(this.index);
       8     };
       9 }
      10 
      11 //方法二:
      12 var lis=document.getElementById('2223').getElementsByTagName('li');
      13 for(var i=0;i<3;i++)
      14 {
      15     lis[i].index=i;
      16     lis[i].onclick=(function(a){
      17         return function() {
      18             alert(a);
      19         }
      20     })(i);
      21 }

      5.編寫一個JavaScript函數(shù),輸入指定類型的選擇器(僅需支持id,class,tagName三種簡單CSS選擇器,無需兼容組合選擇器)可以返回匹配的DOM節(jié)點,需考慮瀏覽器兼容性和性能。

      /*** @param selector {String} 傳入的CSS選擇器。* @return {Array}*/

      答案:(過長,點擊打開)

      6.請評價以下代碼并給出改進意見。

       1 if(window.addEventListener){
       2     var addListener = function(el,type,listener,useCapture){
       3         el.addEventListener(type,listener,useCapture);
       4   };
       5 }
       6 else if(document.all){
       7     addListener = function(el,type,listener){
       8         el.attachEvent("on"+type,function(){
       9           listener.apply(el);
      10       });
      11    }  
      12 }

      評價:

      • 不應(yīng)該在if和else語句中聲明addListener函數(shù),應(yīng)該先聲明;
      • 不需要使用window.addEventListener或document.all來進行檢測瀏覽器,應(yīng)該使用能力檢測;
      • 由于attachEvent在IE中有this指向問題,所以調(diào)用它時需要處理一下

      改進如下:

       1 function addEvent(elem, type, handler){
       2   if(elem.addEventListener){
       3     elem.addEventListener(type, handler, false);
       4   }else if(elem.attachEvent){
       5     elem['temp' + type + handler] = handler;
       6     elem[type + handler] = function(){
       7     elem['temp' + type + handler].apply(elem);
       8   };
       9   elem.attachEvent('on' + type, elem[type + handler]); 
      10   }else{
      11   elem['on' + type] = handler;
      12   }
      13 }

      7.給String對象添加一個方法,傳入一個string類型的參數(shù),然后將string的每個字符間價格空格返回,例如:

      addSpace(“hello world”) // -> ‘h e l l o  w o r l d’

      1  String.prototype.spacify = function(){
      2       return this.split('').join(' ');
      3     };

      接著上述答題,那么問題來了

      1)直接在對象的原型上添加方法是否安全?尤其是在Object對象上。(這個我沒能答出?希望知道的說一下。)

      2)函數(shù)聲明與函數(shù)表達(dá)式的區(qū)別?

      答案:在Javscript中,解析器在向執(zhí)行環(huán)境中加載數(shù)據(jù)時,對函數(shù)聲明和函數(shù)表達(dá)式并非是一視同仁的,解析器會率先讀取函數(shù)聲明,并使其在執(zhí)行任何代碼之前可用(可以訪問),至于函數(shù)表達(dá)式,則必須等到解析器執(zhí)行到它所在的代碼行,才會真正被解析執(zhí)行。(函數(shù)聲明提升)

      8.定義一個log方法,讓它可以代理console.log的方法。

      可行的方法一:

      1 function log(msg) {
      2     console.log(msg);
      3 }
      4 
      5 log("hello world!") // hello world!
      6

      如果要傳入多個參數(shù)呢?顯然上面的方法不能滿足要求,所以更好的方法是:

      1 function log(){
      2     console.log.apply(console, arguments);
      3 };

      那么問題來了,apply和call方法的異同?

      答案:

      對于apply和call兩者在作用上是相同的,即是調(diào)用一個對象的一個方法,以另一個對象替換當(dāng)前對象。將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。

      但兩者在參數(shù)上有區(qū)別的。對于第一個參數(shù)意義都一樣,但對第二個參數(shù): apply傳入的是一個參數(shù)數(shù)組,也就是將多個參數(shù)組合成為一個數(shù)組傳入,而call則作為call的參數(shù)傳入(從第二個參數(shù)開始)。 如 func.call(func1,var1,var2,var3)對應(yīng)的apply寫法為:func.apply(func1,[var1,var2,var3]) 。

      9.在Javascript中什么是偽數(shù)組?如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組?

      答案:

      偽數(shù)組(類數(shù)組):無法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為,但仍可以對真正數(shù)組遍歷方法來遍歷它們。典型的是函數(shù)的argument參數(shù),還有像調(diào)用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數(shù)組。可以使用Array.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對象。

      假設(shè)接第八題題干,我們要給每個log方法添加一個”(app)”前綴,比如’hello world!’ ->’(app)hello world!’。方法如下:

      1  function log(){
      2       var args = Array.prototype.slice.call(arguments);  //為了使用unshift數(shù)組方法,將argument轉(zhuǎn)化為真正的數(shù)組
      3       args.unshift('(app)');
      4 
      5       console.log.apply(console, args);
      6     };

      10.對作用域上下文和this的理解,看下列代碼:

       1 var User = {
       2   count: 1,
       3 
       4   getCount: function() {
       5     return this.count;
       6   }
       7 };
       8 
       9 console.log(User.getCount());  // what?
      10 
      11 var func = User.getCount;
      12 console.log(func());  // what?

      問兩處console輸出什么?為什么?

      答案是1和undefined。

      func是在winodw的上下文中被執(zhí)行的,所以會訪問不到count屬性。

      那么問題來了,如何確保Uesr總是能訪問到func的上下文,即正確返回1

      答案:正確的方法是使用Function.prototype.bind。兼容各個瀏覽器完整代碼如下:

       1 Function.prototype.bind = Function.prototype.bind || function(context){
       2    var self = this;
       3 
       4    return function(){
       5       return self.apply(context, arguments);
       6    };
       7 }
       8 
       9 var func = User.getCount.bind(User);
      10 console.log(func());

      11.原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同?如何用原生JS實現(xiàn)Jq的ready方法?

      window.onload()方法是必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。

      $(document).ready()是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行,不必等到加載完畢。

       1 /*
       2  * 傳遞函數(shù)給whenReady()
       3  * 當(dāng)文檔解析完畢且為操作準(zhǔn)備就緒時,函數(shù)作為document的方法調(diào)用
       4  */
       5 var whenReady = (function() {               //這個函數(shù)返回whenReady()函數(shù)
       6     var funcs = [];             //當(dāng)獲得事件時,要運行的函數(shù)
       7     var ready = false;          //當(dāng)觸發(fā)事件處理程序時,切換為true
       8     
       9     //當(dāng)文檔就緒時,調(diào)用事件處理程序
      10     function handler(e) {
      11         if(ready) return;       //確保事件處理程序只完整運行一次
      12         
      13         //如果發(fā)生onreadystatechange事件,但其狀態(tài)不是complete的話,那么文檔尚未準(zhǔn)備好
      14         if(e.type === 'onreadystatechange' && document.readyState !== 'complete') {
      15             return;
      16         }
      17         
      18         //運行所有注冊函數(shù)
      19         //注意每次都要計算funcs.length
      20         //以防這些函數(shù)的調(diào)用可能會導(dǎo)致注冊更多的函數(shù)
      21         for(var i=0; i<funcs.length; i++) {
      22             funcs[i].call(document);
      23         }
      24         //事件處理函數(shù)完整執(zhí)行,切換ready狀態(tài), 并移除所有函數(shù)
      25         ready = true;
      26         funcs = null;
      27     }
      28     //為接收到的任何事件注冊處理程序
      29     if(document.addEventListener) {
      30         document.addEventListener('DOMContentLoaded', handler, false);
      31         document.addEventListener('readystatechange', handler, false);            //IE9+
      32         window.addEventListener('load', handler, false);
      33     }else if(document.attachEvent) {
      34         document.attachEvent('onreadystatechange', handler);
      35         window.attachEvent('onload', handler);
      36     }
      37     //返回whenReady()函數(shù)
      38     return function whenReady(fn) {
      39         if(ready) { fn.call(document); }
      40         else { funcs.push(fn); }
      41     }
      42 })();

      如果上述代碼十分難懂,下面這個簡化版:

       1 function ready(fn){
       2     if(document.addEventListener) {        //標(biāo)準(zhǔn)瀏覽器
       3         document.addEventListener('DOMContentLoaded', function() {
       4             //注銷事件, 避免反復(fù)觸發(fā)
       5             document.removeEventListener('DOMContentLoaded',arguments.callee, false);
       6             fn();            //執(zhí)行函數(shù)
       7         }, false);
       8     }else if(document.attachEvent) {        //IE
       9         document.attachEvent('onreadystatechange', function() {
      10             if(document.readyState == 'complete') {
      11                 document.detachEvent('onreadystatechange', arguments.callee);
      12                 fn();        //函數(shù)執(zhí)行
      13             }
      14         });
      15     }
      16 };

      12.(設(shè)計題)想實現(xiàn)一個對頁面某個節(jié)點的拖曳?如何做?(使用原生JS)

      回答出概念即可,下面是幾個要點

      1. 給需要拖拽的節(jié)點綁定mousedown, mousemove, mouseup事件
      2. mousedown事件觸發(fā)后,開始拖拽
      3. mousemove時,需要通過event.clientX和clientY獲取拖拽位置,并實時更新位置
      4. mouseup時,拖拽結(jié)束
      5. 需要注意瀏覽器邊界的情況

      13.

       1 function setcookie(name,value,days){  //給cookie增加一個時間變量
       2   var exp = new Date(); 
       3   exp.setTime(exp.getTime() + days*24*60*60*1000); //設(shè)置過期時間為days天
       4   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
       5 } 
       6 function getCookie(name){
       7   var result = "";
       8   var myCookie = ""+document.cookie+";"; 
       9   var searchName = "+name+"=";
      10   var startOfCookie = myCookie.indexOf(searchName);
      11   var endOfCookie;
      12   if(satrtOfCookie != -1){
      13     startOfcookie += searchName.length;
      14     endOfCookie = myCookie.indexOf(";",startOfCookie);
      15     result = (myCookie.substring(startOfCookie,endOfCookie));
      16   }
      17   return result;
      18 }
      19 (function(){
      20   var oTips = document.getElementById('tips');//假設(shè)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     oTips.style.display = "none";//隱藏
      30   },
      31   showTip: function(){
      32   oTips.style.display = "inline";//顯示,假設(shè)tips為行級元素
      33   },
      34   init: function(){
      35     var _this = this;
      36     if(this.check()){
      37     _this.showTip();
      38     setcookie('tips', 'show', 1);
      39   }
      40   oTips.onclick = function(){
      41     _this.hideTip(true);
      42   };
      43   }
      44   };
      45   page.init();
      46 })();

      14.說出以下函數(shù)的作用是?空白區(qū)域應(yīng)該填寫什么?

       1 //define 
       2 (function(window){
       3     function fn(str){
       4         this.str=str;
       5     }
       6 
       7     fn.prototype.format = function(){
       8         var arg = ______;
       9         return this.str.replace(_____,function(a,b){
      10              return arg[b]||"";
      11       });
      12     }
      13     window.fn = fn;
      14 })(window);
      15 
      16 //use
      17 (function(){
      18     var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
      19     console.log(t.format('http://www.alibaba.com','Alibaba','Welcome'));
      20 })();

      答案:訪函數(shù)的作用是使用format函數(shù)將函數(shù)的參數(shù)替換掉{0}這樣的內(nèi)容,返回一個格式化后的結(jié)果:

      第一個空是:arguments
      第二個空是:/\{(\d+)\}/ig

      15.用面向?qū)ο蟮腏avascript來介紹一下自己。(沒答案哦親,自己試試吧)

      答案: 對象或者Json都是不錯的選擇哦

      附上第二篇:各大互聯(lián)網(wǎng)公司2014前端筆試面試題–Html,Css篇

        本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
        轉(zhuǎn)藏 分享 獻(xiàn)花(0

        0條評論

        發(fā)表

        請遵守用戶 評論公約

        類似文章 更多