一篇文章彻底理解JavaScript作用域-阿里云开发者社区

开发者社区> 小周sir> 正文

一篇文章彻底理解JavaScript作用域

简介: 一篇文章彻底理解JavaScript作用域
+关注继续查看


什么是作用域?
  几乎所有编程语言就是在变量中存储值,并且能读取和修改此值。事实上,在变量中存储值和取出值的能力,给程序赋予了状态。
如果没有这样的概念,一个程序虽然可以执行一些任务,但是它们将会受到极大的限制而且不会非常有趣。
但是这些变量该存储在哪,又给如何读取?为了完成这个目标,需要制定一些规则,这个规则就是:作用域。

常见的作用域主要分为几个类型:全局作用域、函数作用域、块状作用域、动态作用域。

对象 类型
global window 全局作用域
function 函数作用域(局部作用域)
{} 块状作用域
this 动态作用域
如果一个 变量 或者其他表达式不在 “当前的作用域”,那么JavaScript机制会继续沿着作用域链上查找直到全局作用域(global或浏览器中的window)如果找不到将不可被使用。 作用域也可以根据代码层次分层,以便子作用域可以访问父作用域,通常是指沿着链式的作用域链查找,而不能从父作用域引用子作用域中的变量和引用

全局作用域

  变量在函数或者代码块{}外定义,即为全局作用域。不过,在函数或者代码块{}内未定义的变量也是拥有全局作用域的(不推荐)。

var carName = " Volvo"; // 此处可调用
carName 变量
function myFunction() { // 函数内可调用 carName 变量 }
  上述代码中变量 carName 就是在函数外定义的,它是拥有全局作用域的。这个变量可以在任意地方被读取或者修改,当然如果变量在函数内没有声明(没有使用 var 关键字),该变量依然为全局变量。

  此处可调用 carName 变量 function myFunction() { carName = "Volvo"; // 此处可调用 carName 变量 }

  在函数内部或代码块中没有定义的变量实际上是作为 window/global 的属性存在,而不是全局变量。换句话说没有使用 var 定义的变量虽然拥有全局作用域,但是它是可以被 delete 的,而全局变量不可以。

函数作用域

  在函数内部定义的变量,就是局部作用域。函数作用域内,对外是封闭的,从外层的作用域无法直接访问函数内部的作用域!

function bar() {
var testValue = 'inner';
}

console.log(testValue); // 报错:ReferenceError: testValue is not defined
  如果想读取函数内的变量,必须借助 return 或者闭包。

function bar(value) {
var testValue = 'inner';

return testValue + value;
}

console.log(bar('fun')); // "innerfun" 
  这是借助 return 的方式,下面是闭包的方式:

function bar(value) {
var testValue = 'inner';

var rusult = testValue + value;

function innser() {

 return rusult;

};

return innser();
}

console.log(bar('fun')); // "innerfun"
  通俗的讲,return 是函数对外交流的出口,而 return 可以返回的是函数,根据作用域的规则,函数内部的子函数是可以获取函数作用域内的变量的。

说到这其实大家会想到嵌套函数的作用域问题,如果 inner 函数再嵌套函数呢?这就涉及到另一个概念:作用域链。

转存失败
重新上传
取消

  仔细观察上图,其实不难理解作用域链是什么,因为你可以按照原型链那样去理解。任何一个作用域链都是一个堆栈,首先先把全局作用域压入栈底,再按照函数的嵌套关系一次压入堆栈。在执行的时候就按照这个作用域链寻找变量。

块状作用域

  在其他编程语言中,块状作用域是很熟悉的概念,但是在JavaScript中不被支持,就像上述知识一样,除了全局作用域就是函数作用域,一直没有自己的块状作用域。在 ES6 中已经改变了这个现象,块状作用域得到普及。关于什么是块,只要认识 {} 就可以了。

if(true){
let a = 1
console.log(a)
}
  在这个代码中, if 后 {} 就是“块”,这个里面的变量就是拥有这个块状作用域,按照规则,{} 之外是无法访问这个变量的。

动态作用域

  在 JavaScript 中很多同学对 this 的指向时而清楚时而模糊,其实结合作用域会对 this 有一个清晰的理解。不妨先来看下这段代码:

window.a = 3
function test () {
console.log(this.a)
}

test.bind({ a: 2 })() // 2
test() // 3
  在这里 bind 已经把作用域的范围进行了修改指向了 { a: 2 },而 this 指向的是当前作用域对象,是不是可以清楚的理解了呢?

  接下来我们再思考另一个问题:作用域是在代码编写的时候就已经决定了呢,还是在代码执行的过程中才决定的?

var carName = " Volvo";

// 此处可调用 carName 变量
function myFunction() {

// 函数内可调用 carName 变量

}
  在看看这段代码,写代码的时候就知道 carName 就是全局作用域,函数内部的用 var 定义的变量就是函数作用域。这个也就是专业术语:词法作用域。
通俗的讲变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。
相反,只能在执行阶段才能决定变量的作用域,那就是动态作用域。
看看下面的代码是遵循了动态作用域还是静态作用域呢?

function foo() {

console.log(a); // 2  (不是 3!)

}

function bar() {

var a = 3;
foo();

}

var a = 2;

bar();
  为什么会这样?

  如果按照动态作用域分析:当 foo() 不能为 a 解析出一个变量引用时,它不会沿着嵌套的作用域链向上走一层,而是沿着调用栈向上走,以找到 foo() 是 从何处 被调用的。因为 foo() 是从 bar() 中被调用的,它就会在 bar() 的作用域中检查变量,并且在这里找到持有值 3 的 a。
如果按照静态作用域分析:foo执行的时候没有找到 a 这个变量,它会按照代码书写的顺序往上找,也就是 foo 定义的外层,就找到了 var a=2 ,而不是 foo 调用的 bar 内找。
所以结果就是 2。
从这个示例可以看出 JavaScript 默认采用词法(静态)作用域,如果要开启动态作用域请借助 bind、with、eval 等。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
3999 0
「注解」《你不知道的JavaScript(上卷)》第二章:词法作用域
「注解」《你不知道的JavaScript(上卷)》第二章:词法作用域
7 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3955 0
成为一个编译器之「使用 JavaScript 来制作编译器」
本文讲的是成为一个编译器之「使用 JavaScript 来制作编译器」,布希维克,布鲁克林,一个很棒的周日。我在书店里发现了一本书 John Maeda 写的 “Design by Numbers” 。
1111 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5669 0
「注解」《你不知道的JavaScript(上卷)》第三章:函数作用域和块作用域
「注解」《你不知道的JavaScript(上卷)》第三章:函数作用域和块作用域
5 0
JavaScript之作用域与变量
在javascript中声明变量时,我们经常使用的是 var 变量名=value; 例如: var =100; 可是你也许没有注意到这种声明变量的方式产生的变量是一个局部变量,而不是全局变量。
473 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
50
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载