[ES6]1.1作用域

作用域

  1. 全局作用域(global/window)
  2. 函数作用域/局部作用域(function)
  3. 块状作用域({})
  4. 动态作用域(this)

1、全局作用域

在最外层使用var定义全局作用域的变量。

var course = "es6"

在任意位置创建未定义的变量。

function foo () {
    course = "es6"
}
// 在此处及任何位置都可以调用
console.log(course)

(不建议使用)而在在外层,使用let定义变量时,它的作用域为全局块作用域。

let a3 = 3

console.log("a3" in window); // false

以上定义全局作用域的三种方法总结为:

  1. 使用var,是定义了当前作用域的一个变量,可以使用window调用,但不能使用delete删除。
  2. 未定义的变量,同样可以使用window调用,但其作为window对象的一个属性,可以使用delete删除。
  3. 使用let只是在当前作用域块定义了一个变量,不是window的属性,所以也无法使用window调用。
var a1 = 1
a2 = 2
let a3 = 3
console.log(window.a1, 'a1' in window) // 1 true
console.log(window.a2, 'a2' in window) // 2 true
console.log(window.a3, 'a3' in window) // undefined false

2、函数作用域

在函数内部定义的变量,就成为局部作用域,只作用于函数内部。

function bar() {
    var testValue = 'inner'
}

console.log(testValue) // 报错:ReferenceError: testValue is not defined

如果想兑取函数内的变量,必须使用return或者闭包,这里着重描述一下闭包。

闭包

一个函数和它的周围状态的引用捆绑在一起的组合。

当函数执行的时候,其内部的自由变量(未在函数内部定义)的取值,是根据函数定义的地方向上查找它的值。

function test() {
    const a = 1
    return function () {
        console.log('a', a)
    }
}

const fn = test()
const a = 2
fn() // a 1

3、块状作用域

有{}的就是块,在ES5中使用var定义变量时没有块作用域的,会因为var的变量提升机制,将变量提升到当前作用域的最上层。

if (true) {
    var a = 1
}
console.log(a); // a

相当于

var a
if (true) {
    a = 1
}
console.log(a);

在ES6中,使用let声明变量,就可用吧变量的作用域限制在当前块中。

if (true) {
    let a = 1
}
console.log(a); // a is not defined

动态作用域

window.a = 3

function test() {
    console.log(this.a)
}

test.bind({
    a: 2
})() // 2
test() // 3

通俗的讲变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。 相反,只能在执行阶段才能决定变量的作用域,那就是动态作用域。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容