前端面试&笔试&错题指南(三）

JavaScript排坑指南(三)

JavaScript老是给人以惊喜，学习不止，进步不断，今天继续补充JS容易搞错的几道笔试/面试题，为了秋招继续努力，欢迎一块儿为秋招努力的小伙伴共勉

--------------------------------------总部传送门-----------------------------------

1.VK的秋招前端奇遇记(一)

2.VK的秋招前端奇遇记(二)

3.VK的秋招前端奇遇记(三)

4.VK的秋招前端奇遇记(四)

5.番外篇：前端面试&笔试算法 Algorithm

”老生常错“的this与做用域相关

Q1. 下面程序的输出结果是？

var length = 10;
function fn() {
	console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);
复制代码

output:

10
2
复制代码

这个我作错在第二个输出上，其实对this了解后就知道，第一个输出10应该是很显然的：虽然在程序执行时，使用了obj.method方法，让this指向了obj，可是真正的函数执行在函数体内部，也即当fn()执行的时候，this是指向window的，因此第一次执行结果是10

那么这里第二次执行arguments[0]为何结果是2？

分析下在method(fn,1)执行时，经历了什么： 首先两个参数fn和1会被放入arguments中，在arguments中第一个参数就是咱们传入的函数；接下来fn执行，此时this没有绑定所以指向window，输出10。 然而到了arguments[0]()这一句，至关于把arguments[0]中的第一个参数拿来执行, 效果以下:

arguments[0]()  //执行,等同于下面的
arguments.0() //固然这句话是不合法的，可是这样咱们能够更清楚知道，this是指向arguments实例自己
复制代码

arguments.length就是它自己的长度(arguments是一个类数组，具备length属性)，所以输出2

---

Q2. try..catch程序的输出结果

(function () {
    try {
        throw new Error();
    } catch (x) {
        var x = 1, y = 2;
        console.log(x);
    }
    console.log(x);
    console.log(y);
})();
复制代码

输出结果:

1
undefined
2
复制代码

咱们都知道var是在预编译阶段会有一个变量提高，这种类型很容易解决，可是当遇到在catch(x)中与已有变量重名的状况，必定要区分二者之间的关系。

用变量提高的方法，把程序重写并分析以下：

(function () {
    var x,y;  // 外部变量提高
    try {
        throw new Error();
    } catch (x/* 内部的x */) {
		x = 1; //内部的x，和上面声明的x不是一回事！！
         y = 2; //内部没有声明，做用域链向上找，外面的y
        console.log(x); //固然是1
    }
    console.log(x);  //只声明，未赋值，undefined
    console.log(y);  //就是2了
})();
复制代码

这样子就很清晰，以后注意预编译的过程，把变量和函数定义进行提高后，进行分析，会清楚不少

---

Q3. 下面程序的输出

var x = 21;
var girl = function () {
    console.log(x);
    var x = 20;
};
girl ();
复制代码

输出：

undefined
复制代码

说实话，这个题目我没作错，我没作错，我没作错！

由于和Q2同样，并且尚未Q2难，一句话解释就是： 函数内部变量提高。 至关于

var x = 21;
var girl = function() {
    var x;
    console.log(x); // undefined
    x = 20;
}
}
复制代码

那些诡异的边角知识

Q1. 运算符考点： 下面程序输出是什么?

console.log(1 < 2 < 3);
console.log(3 > 2 > 1);
复制代码

输出:

true
flase
复制代码

第一个输出结果是好理解的，主要看下第二个为何是false

核心在于js怎么去解析<和>运算符。 在JS中，这种运算符是从左向右运算的，因此3>2>1就被转换成了true>1,而true的值是1，接着比较1>1就返回false了。

---

Q2. typeof，下面输出结果是什么

console.log(typeof typeof 1);
复制代码

答案是string

会输出string，这个题目不单单是typeof的考察，也是对js运算的一个考察。 在js中通常有两种操做

• 赋值操做，例如a = b 2>3之类的，上面的题目提到过，是从左向右的顺序
• 取值操做， js问内存：有没有见过这个家伙？，好比console.log(a) typeof a 都属于这个类型，是从右向左的

所以，这个题就被分解为typeof 1返回"number"，注意是一个字符串。 接下来typeof "number"，返回string

---

Q3. typeof undefined == typeof NULL输出结果是什么

首先搞清楚两点：

• typeof undefined 输出是undefined
• typeof null输出是object

可是，另外一方面，由于js对大小写敏感，null ≠ NULL，因此``typeof NULL返回undefined`

结果是： true

Q4. 递归设计。 实现一个函数，给该函数一个DOM节点，函数访问其全部子元素(全部子元素，不单单是直接子元素)，每次访问子元素的时候，并为其传一个callback。

访问一个DOM tree，是一个经典的深度优先搜索的算法

function Traverse(DOM,callback) {
    callback(DOM);
    var list = DOM.children;
    Array.prototype.forEach.apply(list,(item)=>{
        Traverse(item,callback); //递归
    })
}
复制代码