ES6(一)—— 作用域

JavaScriptES6

# ECMAScript

# ECMAScript概述

  • ECMAScript通常看做JavaScript的标准化规范,实际上JavaScript是ECMAScript的扩展语言。ECMAScript只是提供了最基本的语法。 JavaScript = ECMAScript + BOM + DOM
  • 2015年开始ES保持每年一个版本的迭代,并且开始按照年份命名。

# ES2015概述

  • 相比于ES5.1的变化比较大
  • 自此,标准命名规则发生变化
  • ES6泛指是2015之后的所有新标准,以后要看清楚是特指还是泛指

# 新特性的分类

  • 解决原有语法上的一些问题或者不足
  • 对原有语法进行增强
  • 全新的对象、全新的方法、全新的功能
  • 全新的数据类型和数据结构

# 作用域

  1. 全局作用域
  2. 函数作用域
  3. 块状作用域
  4. 动态作用域
对象 类型
global/window 全局作用域
function 函数作用域(局部作用域)
{} 块状作用域(if语句,for语句)
this 动态作用域

# 全局作用域

在全局使用var定义的变量为全局变量

案例一:

var abc = 1234
abcd = 2345

delete abc //false
console.log(abc) //1234
delete abcd //true
console.log(abcd) //abcd is not defined

// abc是一个全局对象,但是abcd不是全局变量,而是作为window对象的属性存在的,
// 但是因为window是全局对象,所以看上去它也具备全局属性,拥有全局作用域
1
2
3
4
5
6
7
8
9
10

案例二:

function test(){
    ab = 45
}
test()

console.log(ab) //45
//在函数内部没有使用var定义的变量,都挂载在window上,不是全局变量,但是拥有全局作用域
1
2
3
4
5
6
7

# 函数作用域

在函数内部定义的变量,拥有函数作用域/局部作用域

function test(){
    var a = 3
    return a + 4
}
console.log(test()) // 7 
console.log(a) //a is not defined
1
2
3
4
5
6

如何让a在函数作用域中,但是某些值共享?

  1. return
  2. 闭包

# 块级作用域(ES6新增)

ES5

// ES5
function test(){
    var a = 3
    if (a === 3) {
        var b = 4
        console.log('abc')
    } else {
        console.log('abcd')
    }
    console.log(b)  // 4
    return a + 4
}

//在if的块中无法形成壁垒,在{}中定义的变量在外界还是可以使用的
//ES6将{}中的东西进行了独立

function test () {
    var a = 3
    function test2 () {
        var b = 4
        return a + b
    }
    return test2
}

/* test里面的变量对test2是共享的,a的值是可以取到的。
根据函数的作用域链:
执行test2中的函数,首先定义b,然后return中找a,没有找到就去上一个函数中找,找到了a
如果在test中找不到a,最后会一直找到window
*/ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ES6

function test(){
    var a = 3
    if (a === 3) {
        let b = 4
        console.log('abc')
    } else {
        console.log('abcd')
    }
    console.log(b)  // b is not defined
    return a + 4
}

// 如果想要使用块状作用域,但是此时不能用var,因为var有一个变量提升机制。
// 但凡看到了var,就会提升到当前作用域最顶层,所以只能使用let,const
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 动态作用域

this 是非常特殊的关键词标识符,在每个函数的作用域中被自动创建。 只能在执行阶段才能决定变量的作用域。

window.a = 3
function test () {
    console.log(this.a)
}
test()  // 3
test.bind({ a:100 })()  // 100

// 因为this是一个动态指向,不是固定指向。所以我们称这个为动态作用域。
// bind是让函数动态绑定到一个对象上去,这个时候this指向对象本身,所以会导致同一个函数有不同的效果。
1
2
3
4
5
6
7
8
9

# 词法作用域

  • js采用词法(静态)作用域,因此开启动态作用域请借助bind,with,eval等。
  • bash采用的是动态作用域
静态作用域 动态作用域
变量的作用域是在定义时决定而不是执行时决定,一般通过静态分析就能确定。 只能在执行阶段才能决定变量的作用域。
// 经过验证,js默认采用静态作用域
// a 在foo调用的时候没有在当前函数作用域中找到,所以按照书写代码顺序往外层找,就是var a = 2,而不是取bar函数里面找
function foo() {
    console.log(a)  // 2
}

function bar() {
    var a = 3
    foo()
}

var a = 2
bar()
1
2
3
4
5
6
7
8
9
10
11
12
13
更新时间: 2021-09-15 12:03