5个 JavaScript 怪异行为及其原因

如果你用 JavaScript 写过项目或者参加过面试，那一定遇到过不少令人匪夷所思的问题。JavaScript 早期的规范不统一，也没有严格的标准，再加上它的语法灵活多样，有些看起来就不正确的代码却能正常执行，一些看起来符合逻辑的代码，运行结果却相差十万八千里。这些问题在日常开发中经常会导致 BUG，更重要的是，很多面试官会把它们拿出来当考验咱们 JS 工程师的能力。那么这篇文章就总结了 5 个 JavaScript 比较坑的问题，以及它们出现的原因和解决方法。

1、可选分号

问题：

function foo() {
     
	return 
  {
     
     value: 1
  };
}
console.log(typeof foo());

你可能会认为它的输出结果是 “function”，但是结果却是 undefined。乍一看代码好像没什么问题，但是细心一点可以看到 return 语句返回的对象放到了下一行，那么问题就来了：JavaScript 的分号是可选的，return 语句在换行后，JavaScript 会自动给它的结尾加上分号，而在 return 之后的代码都不会执行，所以 foo() 的返回结果是 undefined。解决方法是在每行结尾都写上分号，这样就能清楚的知道代码在哪里结束。

2、this 指向

问题：

var a = 5;
var obj = {
     
	a: 3,
  foo: function() {
     
    console.log(this.a);
  }
}

var objFoo = obj.foo;
objFoo();

答案为 5。在调用函数时，它内部的 this 指向的是调用对象，例如 obj.foo() this 指向的是 obj 对象。如果在全局调用函数时， this 指向的是全局对象，在浏览器中为 window。objFoo 相当于是在获取了 obj 对象的 foo 方法引用后，在全局进行调用，所以 this 指向的是 window 对象。使用 var 在顶级作用域中定义的变量会添加到 window 中，所以 objFoo() 调用打印的是全局中的 a，即 5。

3、数组长度

问题：

const arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr[0]);

结果为 undefined, 因为 array 的 length 属性同时也能反过来控制数组的元素数量，在给 arr.length 设置为 0 时，arr 就变成了空数组，再访问里边的元素就都是 undefined 了。

4、提升（Hoisting)

问题：

function bar() {
     
  return foo;
  foo = 10;
  function foo() {
     }
  var foo = '11';
}
console.log(typeof bar());

结果为 function。使用 var 声明的变量和使用 funtion 定义的函数会提升到当前作用域的顶部，所以变量可以先赋值，后使用 var 进行声明，而函数则可以先调用后定义。但是要注意的是，使用 var 定义（指在声明的同时进行赋值）的变量，只会提升声明部分，赋值部分不会被提升，例如示例中的 var foo = '11' 会提升 var foo，但 foo = 11 保留在原位。在定义 bar() 函数时，同时会创建一个作用域，提升会把相关变量和函数放到 bar() 函数的第一行。 综合上边的规则，可以知道 foo() 函数和 foo 变量的声明进行了提升，因为 foo 变量与同名，但是只有声明，所以不会覆盖函数的值，foo 仍然指向的是函数。之后就直接使用 return 语句返回了结果，后边的代码就不会再执行了。bar() 中的代码其实是下边这种形式：

function bar() {
     
  function foo() {
     }
  var foo;
  return foo;
  foo = 10;
  var foo = '11';
}

5、作用域与闭包

问题：

for(var i = 0; i < 3; i++) {
     
  setTimeout(() => {
     
    console.log(i);
  });
}

你可能会认为上方代码的结果为 0 1 2，但实际上是 3 3 3，这是因为使用 var 关键字定义的变量没有块级作用域，在 for 循环中定义的 i 相当于是全局变量，它会添加到 window 变量中，即使在 for 循环退出后也能访问 i 的值。这样就导致了一个问题，使用 setTimeout() 推迟的函数会在 for 循环结束后才执行，此时 i 的值已经变成 3 了，所以 3 个 setTimeout() 中的函数都会打印出 3。要解决这个问题有两种方法。

第 1 种是使用 let 关键字定义变量 i，这样在每次循环时，都会创建一个新的作用域，因此每个作用域中的 i 是相互独立的，这样就能打印出 0 1 2。

第 2 种方法是使用自执行函数，例如下边代码这样：

for(var i = 0; i < 3; i++) {
     
	(function(i) {
     
    setTimeout(() => {
     
      console.log(i);
    })
  })(i)
}

这时，i 通过参数传递给了匿名的自执行函数，同时自执行函数创建了一个闭包，所以它会捕获 i 的值，相当于在内部复制了参数 i 的值，所以无论外边的 i 怎么变化，它内部的值都不会发生改变。这样也能打印出 0 1 2。

小结

这 5 个问题揭露了 JavaScript 中常见的一些坑，稍微不注意就会留下隐患，并且难以察觉，例如一个简单的换行、 this 指向的改变、意外修改数组的长度、变量和函数提升、作用域的创建都有可能出现异外的情况。这些问题可能在日常开发中并不多见，但是经常会出现在 JS 笔试和面试中，用于考察面试者对 JS 的熟悉程度。另外， JS 中的坑远不止这些，所以需要在日常中多积累，另外也可关注本博客，我会不定时的更新 JavaScript 使用上的问题，感谢！

欢迎访问我的博客访问更多内容！