一道隐藏陷阱的JavaScript面试题

最近朋友发把一道JavaScript的面试题发我

var name = "张三";
 
(function () {
  name = "李四";
  var name = "王五";
  console.log(name); 
})();
 
console.log(name);

虽然他已经知道运行结果，但他还是有点不太明白为什么！按照正常逻辑思维读这道题

• 声明一个全局变量name=张三
• 声明一个匿名函数并执行
• 匿名函数内name=李四 由于不带var关键字所以是修改全局下name
• 声明一个局部变量name=王五

所以最终打出李四张三，其实这道题在函数内的console.log(name)打出王五是毋庸置疑的，关键点就在于最后一句console.log(name)上。按照正常逻辑思维，匿名函数内的第一句话就已经把全局变量name给改写了，然而实际上这正是错误理解的地方。因为在JavaScript的函数中只要使用var声明一个与全局变量一样的变量名，那么即使var声明语句写在后面也会让前面同名的变量被认作是局部变量，如果非要在这种情况下修改一个全局变量可以这样

var name = "张三";
 
(function () {
  window.name = "李四";
  var name = "王五";
  console.log(name); 
})();
 
console.log(name);

其实现在有不少JavaScript程序员声明变量都是随处声明，如

(function () {
  var width = 300;
  width = 200;
  var height = 400;
  height = 200;
  var name = "qttc";
})();

其实按照正确的习惯，应该是var声明局部变量都写在函数开头，如

(function () {
 
  var width = 300,
      height = 400,
      name = "qttc";

  width = 200;
  height = 200;
  
})();

当然，基本你要用到一个全局变量时基本上你不会在函数内声明一个与全局变量名相同的局部变量，这是愚蠢的做法，可是当你程序写的非常复杂的时候，难免会犯这种低级错误，还是养成好习惯吧！