作用域链的理解

简介: 作用域链的理解

一、作用域

作用域又分为了 全局作用域 和 函数作用域 (ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来,为我们提供了 块级作用域 ,可通过新增命令 let 和 const 来体现。)


全局作用域:在任何位置都能方位,window的内置属性就是全局作用域

函数作用域:只能在函数体内才能访问到,就是私有作用域,它们都是栈内存


1、在 Web 浏览器中,全局执行环境被认为是 window 对象,因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。

2、在 Node 环境中,全局执行环境是 global 对象。

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

4、所有末定义直接赋值的变量自动声明为拥有全局作用域


作用域就是代码执行开辟栈内存:

私有作用域:函数执行都会形成一个私有作用域,就是函数体内可访问

全局作用域:页面一打开就会形成一个全局的作用域 window

私有变量:在私有作用域里边形成的变量 形参 var let const .....

全局变量:在全局作用域形成的变量 或 函数内没有声明,直接赋值的变量


作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

jQuery等库的源码会将所有的代码都会放在(function(){....})()中,因为放在里面的所有变量,都不会被外泄和暴露,不会污染到外面,不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。


注意:

块语句(大括号“{}”中间的语句),如 if 和 switch 条件语句或 for 和 while 循环语句,不像函数,它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。


 if(true){
     //因为条件语句块不会创建一个新的作用域所以myName 还是在全局作用域中
     var myName = "BeiHaiYuLu"
 }
 console.log(myName) // "BeiHaiYuLu"


块级作用域

块级作用域可通过新增命令 let 和 const 声明,所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建:

  • 在一个函数内部
  • 在一个代码块(由一对花括号包裹)内部

let 声明的语法与 var 的语法一致。你基本上可以用 let 来代替 var 进行变量声明,但会将变量的作用域限制在当前代码块中。块级作用域有以下几个特点:

  • 声明变量不会提升到代码块顶部

let/const 声明并不会被提升到当前代码块的顶部,因此你需要手动将 let/const 声明放置到顶部,以便让变量在整个代码块内部可用。

如果一个标识符已经在代码块内部被定义,那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误。可以使用块级作用域解决


报错:

var count = 30; 
let count = 10;


不报错:

 var count = 30; 
 if (condition) { 
     let count = 40; 
 }


自由变量的取值:要到创建这个函数的那个域”作用域中取值,这里强调的是“创建”,而不是“调用”,切记切记——其实这就是所谓的"静态作用域"


var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b) //30
  }
  return bar
}
var x = fn(),
   b = 200
 x() //bar()


二、作用域链

一般情况使用的变量取值是在当前执行环境的作用域中查找,如果当前作用域没有查到这个值,就会向上级作用域查找,直到查找到全局作用域,这么一个查找的过程我们叫做作用域链

1、全局执行环境的变量对象始终都是作用域链上的最后一个对象

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

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

相关文章
|
2月前
|
JavaScript 前端开发
作用域和作用域链及预解析
作用域和作用域链及预解析
23 4
|
7月前
|
自然语言处理 JavaScript 前端开发
深入理解作用域、作用域链和闭包
在 JavaScript 中,作用域是指变量在代码中可访问的范围。理解 JavaScript 的作用域和作用域链对于编写高质量的代码至关重要。本文将详细介绍 JavaScript 中的词法作用域、作用域链和闭包的概念,并探讨它们在实际开发中的应用场景。
|
7月前
|
自然语言处理 JavaScript 前端开发
对作用域链的理解
对作用域链的理解
58 0
|
存储 JavaScript 前端开发
从执行上下文和作用域链理解闭包
从执行上下文和作用域链理解闭包
105 0
从执行上下文和作用域链理解闭包
|
设计模式 自然语言处理 JavaScript
一篇文章帮你真正理解javascsript作用域闭包
一篇文章帮你真正理解javascsript作用域闭包
90 0
|
消息中间件 存储 自然语言处理
兄台: 作用域、执行上下文了解一下
• 作用域(Scopes) • 词法环境(Lexical environments) • 作用域链 • 执行上下文 • 调用栈
105 0
|
自然语言处理 JavaScript 前端开发
什么是原型链和作用域链?
什么是原型链和作用域链?
什么是原型链和作用域链?
|
存储 缓存 JavaScript
深入理解作用域和闭包(下)
深入理解作用域和闭包(下)
深入理解作用域和闭包(下)
|
存储 JavaScript 前端开发
深入理解作用域和闭包(上)
深入理解作用域和闭包(上)
深入理解作用域和闭包(上)
|
自然语言处理 前端开发 JavaScript
作用域闭包
作用域闭包
89 0