QQ WEB前端面試經歷

前幾天收到SNG的實習面試通知，時間是第二天晚上，第一次這麼近距離接觸騰訊總部，內心還是挺激動的。不過大學期間都過得渾渾噩噩，再加上基礎不紮實，雖然有兩次實習經歷，最後的結果還是差強人意。面試過程不管是基礎的筆試和麪試提問之前項目的重構方案，都答得不是很理想。我的博客也不是很多人看，索性重做一遍當作自己一次面試經歷的留存吧。

---

1. null, undefined 的區別?
不存在的對象用null, 聲明的對象未定義用undefined.

2. eval是做什麼的?
把一個字符串當做一個Javascript表達式一樣去執行它。

3. 如何判斷一個對象是否屬於某個類?
instanceof 用來指出對象是否特定類的一個實例

注意其它兩個的區別
typeof: 檢測變量的數據類型
hasOwnPropety: 判斷對象是否有給出的屬性或對象

4. 同步和異步的區別?
同步 : 客戶端發出請求到服務器返回結果中間沒有進行其他動作
異步 : 客戶端發出請求後可以進行其他操作

5. js延遲加載的方式有哪些?

• window.onload creatElement(‘script’);
• document.write()
• Iframe
• ajax後eval 代碼

6. .call()和.apply()的區別?
調用一個對象的一個方法，以另一個對象替換當前對象。call 傳入參數是對象, apply 傳入數組。

7. 如何判斷當前腳本運行在瀏覽器還是node環境中?
通過判斷global對象是否爲window, 如果不是, 則是在node環境中。

8. 請指出 document load 和 document ready 兩個事件的區別?
load 事件需要頁面完全加載纔會觸發, ready只要加載完dom結構就可觸發。

9. Javascript 有哪幾種數據類型,哪些是傳值,哪些是傳址?

• 傳值:
  
  • 字符串 String
  • 數值 Number
  • 布爾 Bool
• 傳址:
  
  • 數組 Array
  • 對象 Object
  • 函數 Function
• 其他:
  
  • undefined
  • null

10. 哪些操作會造成內存泄露, 可舉例說明?

內存泄漏指任何對象在您不再擁有或需要它之後仍然存在。

• setTimeout() 第一個參數是字符串而不是函數的時候會內存泄露
• 給dom對象添加的屬性是一個對象的引用
• dom對象和js對象相互引用

function Encapsulator(element){
    this.ElementReference = element;
    element.myProp        = this;
}
new Encapsulator(document.getElementById('div'));

• 給dom對象用attachEvent綁定事件。

11. 移動端包含哪幾個觸屏事件?

• touchstart
• touchmove
• touchend
• touchcancel

12. 移動端的點擊事件有延遲,時間是多少,爲什麼會有？怎麼解決？
300ms, iphone瀏覽器爲了監聽到雙擊縮放的事件遺留下的問題。

• 禁用縮放
• fastclick
• zepto的tap

13. Zepto的點透(事件穿透)問題如何解決?

原因：tap事件是需要冒泡到document上才能觸發，在冒泡到之前會觸發click事件，iphone上有300ms延遲，所以會出現點透。

解決方案

• touchend
• fastclick

14. 解釋下爲什麼接下來這段代碼不是IIFE(立即調用的函數表達式);

function foo(){};

要做哪些改動使它變成IIFE?
函數的定義是不能被執行的

(function foo(){})();

15. 請分別列舉幾個 Javascript 宿主對象和原生對象

• 宿主對象: Window, Navigator, Image
• 原生對象: Null, Number, Boolean, String, Object, Function, Array, RegExp

16. 請儘可能多的列舉ajax跨域的方案以及原理

• jsonp

<script>
function callback(json){
    //do something
}
</script>
<script src="http://localhost:80/data.php?callback=callback"></script>

//上面返回的數據格式 callback({id:1,name:’haha’});

• iframe

17. 請描述 json 和 jsonp 的區別, jsonp 的原理?
json 是一種數據交換格式，jsonp 是一個非官方跨域數據交互協議
jsonp 原理同上

18. 儘可能多的列舉前端性能優化措施和方案

• css spirte
• cdn 加速
• script延遲加載
• img 懶加載
• js, css 代碼壓縮合並
• 本地緩存

19. 寫出下面代碼運行結果

var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length:5,
    method:function(fn){
        fn();
        arguments[0]();
    }
}
obj.method(fn,1);

10, 2

第一個fn 作用域在window, argument是對象, 所以對象調用了fn, this 指向 argument, 長度是2

20. 寫出下面代碼運行結果

function fn(a){
    console.log(a);
    var a = 2;
    function a(){}
    console.log(a);
}
fn(1);

function a(){}, 2

函數先於變量聲明,

21. 寫出下面代碼運行結果

if('a' in window){
    var a = 10;
}
alert(a);

10

變量預編譯, a的值 undefined 在window對象裏

22. 寫出下面代碼運行結果

var f = true;
if(f === true){
    var a = 10;
}
function fn(){
    var b = 20;
    c = 30;
}
fn();
console.log(a);// 10
console.log(b);// error
console.log(c);// 30

10,error,30

題主唯一做對的，囧

23. 寫一個通用(兼容IE)的事件監聽函數

my.Event = {
    ready : function(fn){
        if(fn == null){
            fn = document;
        }
        var onload = window.onload;
        if(typeof onload != 'function'){
            window.onload = fn;
        }
        else{
            window.onload = function(){
                onload();
                fn();
            }
        }
    },
    addEvent : function(ele, type, handler){
        if(ele.addEventListener){
            ele.addEventListener(type,hanlder,flase);
        }
        else if(ele.attachEvent){
            ele.attachEvent('on'+type,function(){
                hanlder.call(ele);
            });
        }
        else{
            ele['on'+type] = hanlder;
        }
    },
    removeEvent : function (ele, type, hanlder){
        if(ele.removeEventListener){
            ele.removeEventListener(type,hanlder,false);
        }
        else if(ele.detachEvent){
            ele.detachEvent('on'+type,hanlder);
        }
        else{
            ele['on'+type] = null;
        }
    },
    stopPropagation : function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }
        else{
            event.cancelBubble = true;
        }
    },
    preventDefault : function(event){
        if(event.preventDefault){
            event.preventDefault();
        }
        else{
            event.returnValue = false;
        }
    },
    getTarget : function(event){
        return event.target || event.srcElement;
    },
    getEvent : function(e){
        var ev = e || window.event;
        if(!ev){
            var c = this.getEvent.caller;
            while(c){
                ev = c.arguments[0];
                if(ev && Event === ev.constructor){
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
}

24. 針對下面dom, 實現一段腳本, 使得對應 li 時 alert 出相應的順序號.例如點擊第二個 li 時 alert 結果 2

<ul>
    <li>呵呵</li>
    <li>哈哈</li>
    <li>嘿嘿</li>
    <li>嘎嘎</li>
    <li>呱呱</li>
</ul>

 <script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    for(var i = 0, length = lis.length; i < length; i++) {
      (function(i) {
        lis[i].onclick = function() {
          alert(i + 1);
        };
      })(i); 
    }
  </script>

25. 請編寫一個函數, 把 URL 參數解析爲一個對象(object)
如 url = “http://qq.com/index.html?key0=0&key1=1&key2=2”

function parseQueryString(url) {
  var obj = {};
  var a = url.split('?');
  if(a === 1) return obj;
  var b = a[1].split('&');
  for(var i = 0, length = b.length; i < length; i++) {
    var c = b[i].split('=');
    obj[c[0]] = c[1];
  }
  return obj;
}
var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2';
var obj = parseQueryString(url);
console.log(obj.key0, obj.key1, obj.key2);

---

以上是現場筆試題，後面問到的項目主要是指出我在上家公司一些明顯的問題，最經典的是移動端適配和前端構建(打包壓縮優化)的問題。面試官還是挺不錯的，給了一個挺中肯但卻挺打擊人的反饋:”你接觸前端時間有點短，很多東西大一大二就已經在做了。”

面試完後心裏其實也大概知道結果，以前在創業公司只要會改改插件，切圖就能大概就能得心應手，但是想進騰訊這種大公司還是得先啃書打實基礎。