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);

变量预编译, 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);

以上是现场笔试题，后面问到的项目主要是指出我在上家公司一些明显的问题，最经典的是移动端适配和前端构建(打包压缩优化)的问题。面试官还是挺不错的，给了一个挺中肯但却挺打击人的反馈:”你接触前端时间有点短，很多东西大一大二就已经在做了。”

面试完后心里其实也大概知道结果，以前在创业公司只要会改改插件，切图就能大概就能得心应手，但是想进腾讯这种大公司还是得先啃书打实基础。