中高级JavaScript易错面试题

写出下题的输出

 

1、函数的实参与形参length

 

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

 

 

我们都知道，[1, 2, 3].length可以得到3，"123".length可以得到3，那么函数的length得到什么呢？

function test(a,b,c) {}
test.length // 3

function test(a,b,c,d) {}
test.length // 4

可以看到，函数的length似乎返回了参数的个数，那么对于形参和实参有没有区别呢？答案是有。

 

function test() { console.log( arguments.length );}
test(1,2,3); // 输出 3
test(1,2,3,4); // 输出 4

可以看到，在函数中，用arguments.length取到的是函数的实际参数的个数。

另外，我们要知道var length = 10 这样写是不行的，因为length是JavaScript内置的属性，不能用作变量名或函数名。戳这里http://www.runoob.com/js/js-reserved.html查看JavaScript有哪些保留关键字、内置属性等。

所以，当执行fn()时，this.length打印的是fn这个函数的形参的个数，为0；而执行arguments[0]()时，实际上是obj.method()这个方法的arguments调用了fn函数，this.length的this指向的是arguments，他的实际参数个数为2。

 

 

2、函数的解析与预解析过程（变量提升）

 

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

 

这道题还是挺吊炸天的。。我也想了半天。。下面我来讲一下，涉及到函数的解析和预解析过程。

首先遇到function fn这样的函数声明，会进行函数预解析这么个过程，什么是函数预解析？通俗的说就是，从函数体里找变量和函数声明的过程，找到的变量（遇到var就找到了变量）不会去读具体的值，只会赋为undefined；找到的函数声明会赋值为整个函数体，这里有个知识点就是，如果找到的变量和声明同名，那么声明会覆盖变量（我的理解是，毕竟函数体比undefined的强嘛）。

比如此例中，预解析时找到了变量a，并且赋值为undefined，找到了声明function a(){alert(1)}，为整个函数体；两者同名，所以声明覆盖了变量a的值，a不再是undefined的，而是函数体。

预解析完成后调用了方法，开始一步一步走方法。首先console.log(a)，这时打印出的是函数体；接着var a = 2，a的值从函数体被改成了 2 ；接着是个function a(){}函数声明，注意，声明不能改变变量的值，所以走完这一句，a的值还是2，接着打印出了2。

 

 

有人肯定有这样的疑惑，为什么a=1传进去没起作用呢？这里有一个原则，就是局部变量优先，基于这个原则，我们再来分析一下a的变化过程。预解析中，a=undefined，a=function(){alert(1)}，此时参数有值等于1，本应该将a赋值为1，但却没有，原因是此时的a已经等于局部函数声明function(){alert(1)}，所以外部传进来的参数1并没有取代a的值；假如本例没有function(){alert(1)}这一句，打印出的将是1，  2。

局部变量优先原则，原理同下：

var a = 5;
function fn(){
　　var a = 10;
　　console.log(a)　　// 10，局部变量优先，在局部找到a后，不会再向外查找
}

 

 

3、变量提升、window的变量

if('a' in window) {   
    var a = 10; 
}  
console.log(a);　　// 10

首先，if(){}的花括号并不像function(){}的花括号一样，具有自己的块级作用域，if的花括号还是全局的环境。根据JavaScript的变量提升机制，var a会被js引擎解释到第一行，如下：

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

接着有个知识点，全局变量是window对象的属性，所以'a'  in  window会返回true，答案就很直白了。

 

这道题我在做的时候踩了个坑，我在代码编辑器里写了如下代码：

window.onload = function(){
  if('a' in window){
　　　　var a = 10;
  }  
　console.log(a)　　// undefined
}

这时候，a这个变量是定义在匿名函数function(){}里的，属于该函数的局部变量，所以a不再是window的对象。大家一定要注意细节。

 

 

4、基本类型无属性

var a = 10;
a.pro = 10;
console.log(a.pro + a);　　// NaN
var s = 'hello';
s.pro = 'world';
console.log(s.pro + s)　　// undefinedhello

变量a与s都是基本类型，无法给他们添加属性，所以a.pro和s.pro都是undefined。

undefined + 10 得到NaN（not a number）。

undefined + 'hello' 得到undefinedhello，其中undefined被转化为字符串类型。

 

如果实在想给字符串添加属性，我们需要将字符串定义为对象类型的字符串，如下：

var a= new String('objectString')
a.pro = "aaaaaaa"
console.log(a.pro)    // aaaaaaa

 

 

5、async与await的执行

async function sayHello() {
  console.log('Hello')
  await sleep(1000)
  console.log('world!')
}
function sleep(ms) {
  　return new Promise(resolve =>  {
　　console.log("666666");
　　setTimeout(resolve, ms);
　　console.log("888888")})
}
sayHello()　　// hello 666666 888888 world!

 

async 表示这是一个async函数，await只能用在这个函数里面。

await 表示在这里等待promise返回结果了，再继续执行。

 

 

首先打出hello，到了await，会等待promise的返回，所以“world”不会立刻打出，接着进入sleep函数，打出666，接着开了一个1秒的定时器，虽然js是单线程的，但setTimeout是异步的，在浏览器中，异步操作都是被加入到一个称为“events loop”队列的地方，浏览器只会在所有同步代码执行完成之后采取循环读取的方式执行这里面的代码，所以resolve被加入任务队列，先打印了888，一秒后执行了resolve，表示promise成功返回，打出了world。

 

 

以上每道题都是本渣自己的想法和理解，如有不正确的地方烦请读者指正，大佬轻喷~