ES6（一）—— 做用域

时间 2020-11-16 标签 bash 数据结构闭包函数学习 this spa code 对象 blog

告别拖延症，今天开始更新ES6-ES10经常使用的全部新特性，仅做为学习笔记，勿喷。bash

对象	类型
global/window	全局做用域
function	函数做用域（局部做用域）
{}	块状做用域（if语句，for语句）
this	动态做用域

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是全局对象，因此看上去它也具有全局属性，拥有全局做用域

案例二：spa

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

console.log(ab) //45
//在函数内部没有使用var定义的变量，都挂载在window上，不是全局变量，可是拥有全局做用域

函数做用域

在函数内部定义的变量，拥有函数做用域/局部做用域code

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

如何让a在函数做用域中，可是某些值共享?对象

return
闭包

块级做用域(ES6新增)

ES5blog

// 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
*/

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

动态做用域

this 是很是特殊的关键词标识符，在每一个函数的做用域中被自动建立。
只能在执行阶段才能决定变量的做用域。

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

// 由于this是一个动态指向，不是固定指向。因此咱们称这个为动态做用域。
// bind是让函数动态绑定到一个对象上去，这个时候this指向对象自己，因此会致使同一个函数有不一样的效果。

词法做用域

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()

ES6（一）—— 做用域

目录

ECMAScript

ECMAScript概述

ES2015概述

新特性的分类

做用域

全局做用域

函数做用域

块级做用域(ES6新增)

动态做用域

词法做用域

学习版图