作用域、作用域链和变量提升

作用域

作用域指变量能够被访问到的范围，也称变量作用域

全局作用域，浏览器(window), Node(global)

函数作用域 function内部

块级作用域(es6新增，之前没有块级作用域的概念，let、const声明的变量)

作用域链

由于作用域层级的关系，导致出现作用域链
一般（全局作用域 包含（函数作用域 -》 包含（函数作用域和块级作用域） 和 块级作用域））

function outer(){
  let a = 1
  const inner = function(){
    console.log(a)
  }
  return inner
}
/**
 * 大致形成下面这种关系
 * window {
 *      outer {
 *          a,
 *          inner {
 *               
 *           }
 *      }
 * }
*/

变量提升

上面说到 es6 之前没有没有块级作用域，取而代之的是函数作用域(function-scope)。

函数作用域
在函数内声明的所有变量在函数体内始终是可见的，因此，变量在声明之前甚至已经可用。

console.log(gg); // undefinde
var gg = 'game over'
console.log(gg) // game over
var a = 'g a'
function foo(){
    console.log(gg); // game over （局部没有，向全局找）
    console.log(a);  // undefined(局部有，就不会向全局找)
    var a = "a in func";
    function(){
        console.log(a) // "a in func" (a在函数内始终可见)
    }
}

变量提升

上面的现象，是因为变量提升了， 采用 var 声明的会提升到当前作用域的顶部

上面代码相当于

var gg;
console.log(gg); // undefined
gg = 'game over';
// 函数部分雷同
function(){
    ...
}

函数提升

函数其实可以看做特殊的变量，而函数有function关键字和表达式声明两种方式

• function方式

function方式时，函数优先提升

var a = 'foo';
function a(){};
// 按理说，后面覆盖前面， a应该是个函数
a() // 报错 a is not a function
a  // foo

b()  // b
function(){console.log('b')} // 函数提升

• 函数表达式方式

  函数表达式与普通变量一致(即函数体是不会提升的)

var a = "kk"
var a = function () {
  console.log("a")
} // 后面的覆盖前面的
a() //  'a'

foo() // foo is not a function
var foo = function () {} // 函数体并不会提升

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦