为了账号安全,请及时绑定邮箱和手机立即绑定

深入理解JavaScript的作用域和作用域链

标签:
JavaScript

一、作用域

(一)作用域是什么

了解作用域之前先看一下变量和函数,变量和函数都有一定的访问权限,就是必须满足条件或者在某个范围之内才能访问,这个范围就是作用域。

它具体表现形式就是一段特定的代码,在该代码段中的变量和函数是封闭的、独立的,这样变量才不会泄露、污染。

var cat = '有鱼';
function Person(){
    var name = '张三';
    console.log(name);//张三,在函数内部,跟变量name在同一个作用域内
}
console.log(cat);//有鱼
console.log(name);//没有结果显示,因为name在函数内部是独立的,访问不了

(二)作用域分类

作用域一共有三种,分别为全局作用域、函数作用域、块作用域,其中块作用域是ES6新增的,同时函数作用域和块作用域统称为局部作用域。

全局作用域

在代码的最外层的变量和函数称为全局作用域,有以下特点:

①在代码的任何地方都可以访问得到

②变量声明时如果省略var关键字,则为全局变量,拥有全局作用域

③window对象的属性和方法,拥有全局作用域

④浏览器打开时开启,浏览器关闭或者页面关闭时销毁

var cat = '有鱼';
function Person(){
    var name = '张三';
    per = '卡卡';// 省略var,视为全局变量
    console.log(cat);//有鱼 cat为全局变量,函数Person内部可以访问
}
console.log(cat);//有鱼 cat为全局变量,最外层代码可以访问
console.log(per);//卡卡 per为全局变量,最外层代码可以访问

全局作用域也有弊端,如:变量命名时容易重复,造成变量污染;

函数作用域

在函数内部的变量权限称为函数作用域,有以下特点:

①每个函数都有自己的作用域,而且调用一次就会生成新的作用域

②只能在函数内部才能访问,外部是没有权限访问的

③进入函数内部时开启,函数执行完毕后销毁

var cat = '有鱼';
function Person(){
    var name = '张三';
    console.log(name);//张三 name为函数作用域,函数Person内部可以访问
}
console.log(name);//有鱼 name为函数作用域,最外层代码没有权限访问

块作用域(ES6新增)

凡是由{}符号包裹起来的都是块作用域,ES6新增的知识点,有以下特点:

①只能在{}内部起作用

②变量声明时使用let或const关键字

③变量名不能重复,否则会报错

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

使用var进行展示:

if(true){
    var cat = '有鱼';
    console.log(cat);//有鱼 
}
console.log(cat);//有鱼

使用let进行展示:

if(true){
    let cat = '有鱼';
    console.log(cat);// 有鱼
    // let cat = '年年';// Uncaught SyntaxError: Identifier 'cat' has already been declared
}
console.log(cat);// 访问不了cat变量  报:Uncaught ReferenceError: cat is not defined

注意:块作用域一般用在for等循环语句中,可以避免变量外泄

https://img1.sycdn.imooc.com//5e40ed750001b8f108620401.jpg

(三)变量提升与函数提升

变量提升

①var关键字存在变量提升,let、const不存在;

②变量提升的意思是在程序执行前,先去整个代码中查看是否含有变量声明,即是否有var关键字,如果有则先执行声明,然后再去执行其他部分。

这里我我总结了4句话:

①js程序执行的顺序,先看var声明,声明部分在第一行,其他(赋值)按照正常顺序执行

②如果局部变量里面有var声明,就是局部变量,不用管外面的全局变量

③如果局部变量里面没有var声明,就去找外面的全局变量

④在局部变量里面,如何使用全局变量,使用window对象调用

var a = "Hello";
function person(){
    var a;
    console.log(a);//undifined
    a = "World";
    console.log(a);//World
}
person();
console.log(a);//Hello
// 先看整个脚本文件的声明部分,全局作用域有个变量a,局部作用域也有个变量a,而且都有var声明,说明他们是完全两个不同的变量,此时函数内部不用管外面的全局变量,此时变量a只是声明而没有赋值,所以输出为 undifined;
// 接着还是局部作用域里面,给a进行了赋值,此时输出时为world,且仍是局部变量;
// 函数外部的输出时,因为局部作用域已经结束,则又恢复到全局变量中,所以此时输出的是全局变量啊,值为hello。
var a = "Hello";
function person(){
    console.log(a);//Hello
   a = "World";
    console.log(a);//World
}
person();
console.log(a);//World
// 先看整个脚本文件的声明部分,全局作用域有个变量a,局部作用域里面没有var声明,则此时a是一个全部变量,所以输出时a的值就是全部变量hello;
// 局部作用域里面对全局变量a进行了重新赋值,所以此时输出时为world
// 函数外部的输出时,因为跳出局部作用域,又恢复到全局变量中,之前因为已经重新赋值为world,此时输出时为world
var a = "Hello";
function person(){
   console.log(a);//undifined
   var a = "World";
   console.log(a);//World
}
person(); 
console.log(a);// Hello
// 先看整个脚本文件的声明部分,全局作用域有个变量a,局部作用域也有个变量a,且有var声明,说明他们是完全两个不同的变量,此时函数内部不用管外面的全局变量,进行变量提升,记住只是声明提升,赋值不进行提升,所以输出为 undifined;
// 还是局部作用域里面,给a进行了赋值,此时输出时为World,且仍是局部变量
// 函数外部的输出时,因为局部作用域已经结束,则又恢复到全局变量中,所以此时输出时为Hello
var a = "Hello";
function person(){
    console.log(window.a);  //Hello  因为是window对象的属性,此时a是全局变量
    var a = "World";     //局部变量a在这行定义
    console.log(a);  //World
}
person();
console.log(a);//Hello 全局变量a
// 在局部作用域使用全局变量使用window.全局变量名字

函数提升

①函数有两种形式:函数表达式 var per = function(){} 、函数声明 function per(){},只有函数声明有函数提升特性

②提升的意思是允许先调用,后声明

per();//可以先调用
function per(){   
    console('我是函数声明形式,允许提升');
}

https://img1.sycdn.imooc.com//5e40ed6900010d9505350327.jpg

二、作用域链

(一)什么是作用域链

①每一层作用域其实就是一个执行环境(作用域和执行环境是有区别的,这里为了容易理解,姑且这样),在该环境内执行程序时,会创建一个变量对象,对象包含该有属于自己的变量和函数;

②在当前执行环境下找不变量时,就会向上一层作用域里面寻找,具体过程还是先找到上一层的变量对象,再去里面找对应的变量,如果还是找不到,继续向上……

③直到最外层的作用域,也就是全局作用域,这样就会形成一个链条,称为作用域链。

(二)作用域特点

①作用域链最外层是全局作用域,最内层是当前作用域

②内部环境可以通过作用域链访问所有外部环境,但外部环境不能访问内部环境的任何变量和函数

③由于变量的查找是沿着作用域链来实现的,所以也称作用域链为变量查找的机制

var cat = '有鱼';
function Person() {
    var name = '张三';
    function Student() {
        var age = 18;
        console.log(name);//张三
        console.log(cat);//有鱼 
    }
    Student();
    console.log(age);//Uncaught ReferenceError: age is not defined
}
Person();

①Student函数内部属于最内层作用域,找不到name,向上一层作用域Person函数内部找,找到了输出‘张三’;

②在Student内部输出cat时找不到,向上一层作用域Person函数找,还找不到继续向上一层找,即全局作用域,找到了输出‘有鱼’;

③在Person函数内部输出age时找不到,向上一层作用域找,即全局作用域,还是找不到输出‘age is not defined’;


点击查看更多内容
2人点赞

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

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消