JS 变量提升与函数提升示例解析

2019-05-14  本文已影响0人  斜晖丶

例:

(function() {
  var x = foo();
  var foo = function foo() {
    return 'foobar';
  };
  return x;
})();

运行结果:

Uncaught TypeError: foo is not a function
  at <anonymous>:2:11
  at <anonymous>:7:3

可以看到运行结果直接报错了,让我们来解析一下为什么报错。错误信息:foo is not a function,那么这边foo是什么呢?这边可以直接打印出来:

undefined

可以知道foo = undefined,所以var x = foo();这边报了上述的错(foo is not a function)。那么这边的foo为什么是undefined,这边就涉及到了JS的变量提升概念(参考《let深入理解---let存在变量提升吗?》)。var 的「创建」和「初始化」都提升了,「赋值」没有得到提升,所以foo = undefined。

如果把 foo 改为函数声明式:

(function() {
  var x = foo();
  function foo() {
    return 'foobar';
  };
  return x;
})();

得到结果:

"foobar"

这边因为function 的「创建」「初始化」和「赋值」都被提升了,foo的函数体提升了所以var x = foo();可以正常执行。

上一篇下一篇

猜你喜欢

热点阅读