大话javascript 1期：作用域和作用域链

NicolasHe 发布于2019-08-23 15:16 / 1064人阅读

摘要：全局作用域局部作用域局部作用域全局作用域局部作用域块语句没有块级作用域块级声明包括和，以及和循环，和函数不同，它们不会创建新的作用域。局部作用域只在该函数调用执行期间存在。

一、什么是作用域？

作用域是你的代码在运行时，各个变量、函数和对象的可访问性。（可产生作用的区域）

二、JavaScript中的作用域

在 JavaScript 中有两种作用域

全局作用域

局部作用域

当变量定义在一个函数中时，变量就在局部作用域中，而定义在函数之外的变量则从属于全局作用域。每个函数在调用的时候会创建一个新的作用域。

1.全局作用域

当你在文档中（document）编写 JavaScript 时，你就已经在全局作用域中了。JavaScript
文档中（document）只有一个全局作用域。定义在函数之外的变量会被保存在全局作用域中。

// 作用域默认为全局作用域
var name = "andy";

全局作用域里的变量能够在其他作用域中被访问和修改。

var name = "andy";
console.log(name); // 输出 "andy"
function logName() {
    console.log(name); // "name" 变量可以在这里和其他地方访问
}
logName(); // 输出 "andy"

2.局部作用域

定义在函数中的变量就在局部作用域中。并且函数在每次调用时都有一个不同的作用域。这意味着同名变量可以用在不同的函数中。因为这些变量绑定在不同的函数中，拥有不同作用域，彼此之间不能访问。

// 全局作用域
function someFunction() {
    // 局部作用域 ##1
    function someOtherFunction() {
        // 局部作用域 ##2
    }
}
 
// 全局作用域
function anotherFunction() {
    //局部作用域 ##3
}

3.块语句（JS没有块级作用域）

块级声明包括if和switch，以及for和while循环，和函数不同，它们不会创建新的作用域。在块级声明中定义的变量从属于该块所在的作用域。也就是说在for、if、while等语句内部的声明的变量与在外部声明是一样的，在这些语句外部也可以访问和修改这些变量的值。

if (true) {
    //这里的if条件不会创建一个新的作用域
    var name = "Hammad"; // name 这个变量仍在全局作用域
}

console.log(name); // logs "Hammad"

ECMAScript 6 引入了let和const关键字。这些关键字可以代替var。

var name = "Hammad";

let likes = "Coding";
const skills = "Javascript and PHP";

和var关键字不同，let和const关键字支持在块级声明中创建使用局部作用域。(块级作用域)

if (true) 
    // 这个 "if" 块语句没有创建一个块级作用域

    // name 变量处于全局作用域，因为由var关键字声明
    var name = "Hammad";
    // likes 变量处于块级作用域因为由let关键字声明
    let likes = "Coding";
    // skills 变量处于块级作用域因为由const关键字声明
    const skills = "JavaScript and PHP";
}

console.log(name); // 输出 "Hammad"
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

一个应用中全局作用域的生存周期与该应用相同。局部作用域只在该函数调用执行期间存在。

4.词法作用域

所谓的 词法( 代码 )作用域, 就是代码在编写过程中体现出来的作用范围. 代码一旦写好, 不用执行, 作用范围就已经确定好了.
这个就是所谓词法作用域.这意味着函数运行在定义它的作用域中，而不是在调用它的作用域中。

在 js 中词法作用域规则:

函数允许访问函数外的数据.

整个代码结构中只有函数可以限定作用域.

作用规则首先使用提升规则分析

如果当前作用规则中有名字了, 就不考虑外面的名字

词法作用域

var用来将变量定义在词法作用域中(也就是function中）

function someFunc(){
    var a;
}

a就被函数someFunc框在了词法作用域中

块级作用域

let和const用来将变量定义在块级作用域中（也就是花括号中）

if(true){
    let b;
}

b就被if的花括号框在了块级作用域中

5.作用域链

可以发现只有函数可以制造作用域结构. 那么只要是代码, 至少有一个作用域, 即全局作用域. 凡是代码中有函数,那么这个函数就构成另一个作用域. 如果函数中还有函数, 那么再这个作用域中就 又可以诞生一个作用域. 那么将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构.

作用域嵌套

作用域是可以嵌套的，任务一中提到的词法作用域和块级作用域都可以嵌套其他作用域
（块级作用域仅对ES6而言）

function someFunc(){
    function inner(){
    }
}

inner就是嵌套在someFunc(词法作用域)中的词法作用域

if(true){
    while(false){
    }
}

while就是嵌套在if(块级作用域)中的块级作用域

function someFunc(){
    if(true){
    }
}

if就是嵌套在someFunc(词法作用域)中的块级作用域

作用域中的变量访问

所有的嵌套作用域都遵循以下规则：
内部作用域有权访问外部作用域，反之不成立。

栗子：

function someFunc(){

var outerVar = 1;
function inner(){
    var innerVar = 2;
}

}
inner有权访问innerVar和outerVar，但是someFunc只能访问到outerVar

多重嵌套作用域

作用域是可以任意嵌套的，但是都要遵循上面的规则。
再附加一个规则：
兄弟作用域不可相互访问

栗子：

function someFunc(){
    function inner(){
    }
    function inner2(){
    }
}

inner和inner2都是someFunc中的作用域，正如someFunc不能访问inner们的作用域一样，inner们之间也不能相互访问。

作用域树

从上向下看这个嵌套作用域，就是棵树！
看代码：

function someFunc() {
  function inner() {
  }
  function inner2() {
    function foo() {
    }
  }
}

看树：

   someFunc()
       |
      / 
     /   
    /     
   ↓       ↓
inner()  inner2()
           |
           ↓
         foo()

要记住的是：inner作用域可以访问外部作用域，但是反之不成立; foo()可以访问inner2()中的变量,inner2()可以访问someFunc()中的变量，这棵树倒过来似乎更有意义，就成了链！！

作用域链

从最里面看到最外面就构成了作用域链

   someFunc()
       ↑
        
         
          
         inner2()
           ↑
           |
         foo()

如果你觉得这篇文章对你有所帮助，那就顺便点个赞吧，点点关注不迷路~

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈

云服务器 GPU云服务器 javascript作用域链作用域链 js作用域和上下文 javascript作用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101783.html

【进阶2-3期】JavaScript深入之闭包面试题解

摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

alanoddsoff 2019-08-23 13:47 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
大话javascript 2期：执行上下文与执行上下文栈

摘要：在中，通过栈的存取方式来管理执行上下文，我们可称其为执行栈，或函数调用栈。因为执行中最先进入全局环境，所以处于栈底的永远是全局环境的执行上下文。一、什么是执行上下文？执行上下文(Execution Context): 函数执行前进行的准备工作（也称执行上下文环境） JavaScript在执行一个代码段之前，即解析(预处理)阶段，会先进行一些准备工作，例如扫描JS中var定义的变量、...

denson 2019-08-23 15:17 评论0 收藏0
大话javascript 3期：闭包

摘要：由此可知闭包是函数的执行环境以及执行环境中的函数组合而构成的。此时产生了闭包。二闭包的作用闭包的特点是读取函数内部局部变量，并将局部变量保存在内存，延长其生命周期。三闭包的问题使用闭包会将局部变量保持在内存中，所以会占用大量内存，影响性能。一、什么是闭包 1.闭包的定义闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境(包含自由变量)。环境由闭包创建时在作用域中的任何...

Freelander 2019-08-23 16:25 评论0 收藏0
【进阶2-1期】深入浅出图解作用域链和闭包

摘要：本期推荐文章从作用域链谈闭包，由于微信不能访问外链，点击阅读原文就可以啦。推荐理由这是一篇译文，深入浅出图解作用域链，一步步深入介绍闭包。作用域链的顶端是全局对象，在全局环境中定义的变量就会绑定到全局对象中。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周开始前端进阶的第二期，本周的主题是作用域闭包，今天是第6天。本...

levius 2019-08-23 13:47 评论0 收藏0