为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 JavaScript作用域与作用域链

JavaScript作用域与作用域链

2018.09.29 17:12 6607浏览

作用域

变量或函数可以发生作用的区域即是作用域。作用域的最大用途就是隔离变量或函数,并控制变量或函数的生命周期,超过该区域的变量或函数就不能被访问。

全局作用域

在整个程序生命周期内都是有效的,在任意的函数内部都能访问的变量或函数拥有全局作用域。以下几种情形拥有全局作用域:

1、在最外层定义的变量和函数拥有全局作用域。

例子:

var out = "hello";

function outFn(str) {
    console.log(str);
}

function demo() {
    outFn(out);
}

console.log(demo());
//输出:hello

2、未声明直接赋值的变量拥有全局作用域。

例子:

function demo() {
    out = "hello";
}
demo();
console.log(out);
//输出:hello

3、在浏览器中,定义在window对象上的属性和方法,拥有全局作用域。

例子:

window.out = "hello";

function demo() {
    console.log(out);
    console.log(window.parseInt("11A"));
}
demo();
//输出:hello,11

函数作用域

在某个函数内部声明的变量或函数拥有函数作用域。它们只能被该函数的语句使用,函数外部是不可访问的。函数在创建的时候,变量和函数的函数作用域已经确定下来。函数的参数也属于函数内部的变量,因此拥有函数作用域。

例子:

function demo(name) {
    var int = "hello";

    function intFn() {
        console.log(int + "," + name);
    }
}
demo("Tom");
console.log(int); //输出:错误
intFn(); //输出:错误

ES6的块级作用域

1、在某个块("{ }")的内部声明的变量拥有块级作用域(在块级作用域内部定义函数需要特殊对待,下面第3条会有讲解)。它们只能被该代码块内部的语句使用,代码块外部不可访问。代码块在创建的时候,变量的块级作用域已经确定下来。块级作用域和函数作用域也可以统称为局部作用域。
2、ES5 只有全局作用域和函数作用域,没有块级作用域。ES6的 let 声明的变量只在它所在的代码块内有效,实际上就是为JavaScript新增了块级作用域。
3、ES5 规定,函数只能在全局作用域和函数作用域之中声明。ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,在块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。但是这样的处理规则显然会对老代码产生很大的影响,出于兼容老代码的考虑,在块级作用域中声明的函数依然可以在作用域外部引用。如果需要函数只在块级作用域中起作用,可以写成函数表达式,而不是函数声明语句。

例子:

if (true) {
    let int = 1;
    let intFn = function() {
        console.log(int + 1);
    }
}
console.log(int); //输出:错误
intFn(); //输出:错误

let命令的用法类似于var,但是它们有以下4点不同之处:

1、let声明的变量拥有块级作用域,var声明的变量没有块级作用域。

例子:

{
  let a = 0;
  var b = 1;
}
console.log(b); //输出:1
console.log(a); //输出:错误

2、var命令会发生”变量提升“现象,即无论var声明的变量处于作用域的第几行,都会提升到作用域的头部,并初始化为undefined。而let命令声明的变量一定要在声明后使用,否则报错。

例子:
var声明:变量提升

function demo() {
    console.log(tmp); //输出:undefined
    if (true) {
        var tmp = "hello";
    }
}
demo();

let声明:没有变量提升

function demo() {
    console.log(tmp); //输出:错误
    if (true) {
        let tmp = "hello";
    }
}
demo();

3、只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,凡是在声明之前就使用这些变量,就会报错。

例子:
var声明:变量可以在声明之前使用

var tmp = "hello";
if (true) {
    console.log(tmp); //输出:hello
    var tmp = "world";
}

let声明:变量不可以在声明之前使用

let tmp = "hello";
if (true) {
    console.log(tmp); //输出:错误
    let tmp = "world";
}

4、let不允许在相同作用域内,重复声明同一个变量。

例子:
var声明:可以重复声明同一个变量

{
    var i = 0;
    var i = 1;
}
console.log(i);
//输出:1

let声明:不可以重复声明同一个变量

{
    let i = 0;
    let i = 1;
}
//输出:错误

const 命令与 let 用法基本一致,唯一不同的 const 声明的是一个只读的常量。一旦声明,常量的值就不能改变:如果值为基本类型,值不可改变;如果值为引用类型,引用地址不可改变。另外,const命令只声明不赋值也会报错。

例子:
const 声明基本类型

const i = true;
i = false;
//输出:错误

const 声明引用类型

//引用类型的数据内容可以修改
const array = [];
array.push(0);
array.push(1);
console.log(array.join("")); //输出:01

//引用类型的引用地址不可以修改
array = [3, 4]; //输出:错误

局部作用域的遮蔽效应

局部作用域的变量和全局作用域的变量的名称可以相同,但是局部作用域变量的值会覆盖全局作用域变量的值,这种现象称为“遮蔽效应”。

例子:

let i = 0;

if (true) {
    let i = 1;
    console.log(i); //输出:1 
}

function demo() {
    let i = 2;
    console.log(i); //输出:2
}
demo();

作用域链

当一个块或函数嵌套在另一个块或函数中时,就发生了作用域的嵌套。因此,在当前作用域中无法搜索到某个变量时,引擎就会在外层嵌套的作用域中继续搜索,直到搜索到该变量,或抵达最外层的作用域(也就是全局作用域)为止。这样一条有序的列表,称为作用域链,作用域链的最前端一定是当前作用域。

作用域链可以理解为下面这种数据格式:

{
    Scope: [
        { //当前作用域
            变量,
            函数名
        }, 
        { //下个作用域
            变量,
            函数名
        }, 
        { //下下个作用域
            变量,
            函数名
        },
        ... 
        { //全局作用域
            变量,
            函数名
        },
    ]
}

如有错误,欢迎指出。

点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

24人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消