博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript一看就懂(1)作用域
阅读量:5015 次
发布时间:2019-06-12

本文共 2109 字,大约阅读时间需要 7 分钟。

什么是作用域?

作用域规定变量在什么地方可用。

函数级作用域

1.函数外声明的变量为全局变量,函数内可以直接访问全局变量:

var global_var = 10; //全局变量function a(){    alert(global_var); //全局变量在函数内可访问}a(); //10

2.JavaScript变量的作用域是函数级的,只有函数可以产生新的作用域,而非块级:

function a(){ //函数    if(true){ //块        var x = 1;    }    if(false){        var y = 2;    }    alert(x); //1    alert(y); //undefined}a();

变量x虽然在块语句(if)中声明并赋值,但它的作用域是函数a,所以在函数a的任何位置它都可访问。

有意思的是y变量的声明和赋值虽然在false块语句里,却仍然打印出undefined而不是报错,因为JavaScript会把所有变量声明提前到函数开头,称为变量提升

function a(){    alert(x);    var x = 1;    alert(x);}a(); //undefined 1//以上代码经过JavaScript变量提升后实际上是这个样子的:function a(){    var x;    alert(x);    x = 1;    alert(x);}

需要注意的是,在函数内声明变量一定要使用var,否则是声明了一个全局变量:

function test(){    a = 1;}test();alert(a); //1

3.嵌套函数可以访问外围函数的变量

function a(){    var x = 1;        function b(){        alert(x);        var y = 2;                function c(){            alert(x);            alert(y);        }        c();    }    b();}a(); // 1 1 2

需要注意的是,嵌套函数里如果有同名变量,那么访问到的是嵌套函数里的变量

function a(){    var x = 1;        function b(){        var x = 2;        alert(x);    }    b();    alert(x);}a(); //2 1

如何做到块级作用域

通过上面的例子我们了解到JavaScript变量作用域是函数级的,但有时候我们想用临时变量怎么办呢?

通过IIFE(立即执行函数表达式)来实现:

function a(){    if(true){        (function(){ //IIFE开始            var x = 1;            alert(x); //1        }()); //IIFE结束        //alert(x); //这儿访问不到    }    //alert(x); //这儿访问不到}a();

这样做的好处是不会造成变量污染,用完就没了,大家商量好,过了今晚就不再联系。

作用域链

每当JavaScript解释器进入一个函数,它都会看一下附近有哪些局部变量,把它们保存到该函数的variables对象中,并创建一个scope属性来指向外部的variables对象

1.  var x=1;2.  function a() {3.     var y = 2;4.     function b() {5.         var z = 3;6.         alert(x+y+z);7.     }8.     b();9.  }10. a();

结合上面的代码,看看JavaScript引擎是如何处理作用域的:

  1. JavaScript把所有全局对象(变量x和函数a)放到global variables对象中

    global variables: x, a()

  2. 发现a是个函数,它需要一个scope属性来指向外部的variables(全局),同时把变量保存起来

    a.scope -> global variables

    a.variables: y, b()

  3. 来到第4行,发现b是个函数,它需要一个scope属性来指向它所在的作用域(a)

    b.scope -> a.variables

    b.variables: z

查找变量的时候,先看看variables对象有没有,没有就根据scope找上一级的variables,就这样一层一层往上找,直到找到为止。

js-scope

参考资料

  1. JavaScript for PHP Developers
  2. 深入理解JavaScript

转载于:https://www.cnblogs.com/justlikeheaven/p/8574118.html

你可能感兴趣的文章
计算器编写过程
查看>>
值得拥有!精心推荐几款超实用的 CSS 开发工具
查看>>
CocoaPods的安装以及使用
查看>>
ACM/ICPC 之 BFS-广搜+队列入门-抓牛(POJ3278)
查看>>
Java 正则表达式
查看>>
分享两个获取指定网站服务器、环境详情的网站
查看>>
Jquery ui datepicker 设置日期范围,如只能隔3天
查看>>
ES6 memo
查看>>
List 集合
查看>>
win32 tcp文件传输并发服务器
查看>>
vChart
查看>>
(转)成为优秀程序员需掌握的11个要点
查看>>
session添加登录次数限制
查看>>
Mybatis_二级缓存
查看>>
Win10开机启动项
查看>>
软件设计复习7
查看>>
nginx配置负载均衡
查看>>
Python tkinter
查看>>
iOS WKWebView 退出后停止播放音频/视频
查看>>
上电自启动机器人基本功能
查看>>