JavaScript面试中遇到的几个问题详解（一）

前言：

前些天，我一个朋友去面试前端，回来以后给我几个面试的js题目让我看看，猛的一看还真不是很会。激发了我的兴趣。
心想好歹咱也是干过前段的是吧，总不能啥都不会吧。于是经过学习，终于搞定。
（前两个月2017年7，8月我们公司外包了一个前段的项目，我出差了两个月，学习一阵前段知识）

说明：本文中说的自执行函数指的是形似(function(){})() 这样的函数，其特点是自动执行，不用手动调用；

题目一：

window.number = 2; 
var obj = {
    "number":4,
    "tbl":(function(){
        this.number *= 2 
        return function(){
            this.number *= 2; 
        }
    })()
}
var tbl  = obj.tbl;
tbl();
obj.tbl();

求：
    window.number = ? 
    obj.number = ? 

考点分析：

1.本题考查面试者对this关键字的理解
2.考查对自执行函数的理解

结果分析：

1.首先要明白，当js解释器执行完obj变量的时候，其属性tbl的自执行函数已经被解释器执行，又因为执行obj的tbl自执行函数的的环境是window，
所以此时window.number = 4 了；此时obj变量的定义为：
var obj = {
    "number":4,
    "tbl":function(){
            this.number *= 2; 
        }

}
以为：执行完自执行函数返回的结果为一个函数
2.执行var tbl  = obj.tbl; //返回函数 funcion(){this.number *= 2 ; }
  执行 tbl(); //调用返回函数，因为实在window环境，所以这里this == window,则 此时window.number = 8 ; 

3.执行obj.tbl(); // obj条用tbl返回的函数，此时执行环境是obj，那么this == obj ，所以obj中的number变量的结果为8，即 obj.number  = 8 ; 

4.说了怎么多了，让我们来验证一下

验证：编写验证代码执行

window.number = 2; 
var obj = {
    "number":4,
    "tbl":(function(){
        this.number *= 2 
        console.log("this == window ?"+ (this == window ));
        return function(){
            console.log("返回函数：this == window ?"+ (this == window ) + "this == obj ? "+ (this == obj));
            this.number *= 2; 
        }
    })()
}
var tbl  = obj.tbl;
tbl();
obj.tbl();
console.log(window.number);
console.log(obj.number);

执行结果如下：

验证分析：

1.当js解释器加载obj完成的时候，obj的tbl的自执行函数自动调用，此时的执行环境是window，输入 this == window ? true
2.当执行 tbl();输出 返回函数：this == window ? true this==obj ? false;因为此时的执行环境是window
3.当执行 obj.tbl()；输出： 返回函数：this == window ? falsethis==obj ? true;因为此时的执行环境是obj

4.最后的结果都是 8 和我们结果分析相同，所以验证了我们的分析是正确的；

总结：

javascrip是一门前端非常重要的变成语言，我们必须系统的学习；在这里给大家推荐几本本人学习JavaScript的书籍：
《JavaScript高级程序设计第三版》 ---这本书都是讲的ES5的知识，但是很系统，值得一看

《ES6标准入门 第二版》 ---阮一峰写的非常的不错，将的ES6的知识点，重点说一下，这本书是开源的。非常感谢作者阮一峰的开源精神，这是我们开源软件一直发展下去的动力；
如果大家觉得不错的话，可以在网上购买。

《ES6标准入门 第二版》 在线电子书：http://es6.ruanyifeng.com/