浅谈JavaScript作用域

2024-07-30 08:17:53

一、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

JavaScript（es6前）中的作用域有两种：

全局作用域
局部作用域（函数作用域）
在ES6后，还有一个块级作用域，以后在详述。

1、全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

2、局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

例如：

  for(let i=0;i<100;i++){
       sum += i;
   }

二、变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

1、全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2、局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

3、全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存。
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

三、作用域链

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域

例如：对下面的代码进行分析判断结果是几

function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

分析如下图所示:

可知最终的结果为：123

同样，也可以采取就近原则的方式来查找变量最终的值。

到此这篇关于JavaScript作用域详情介绍的文章就介绍到这了,更多相关JavaScript作用域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript高级程序设计之变量与作用域

目录 1.原始值与引用值 2.instanceof 3.作用域 1.原始值与引用值 6种简单数据类型的值都是原始值, 原始值通过变量赋值给另一个变量时,会复制一个出一个新的值,两者相互独立. let num1 = 5 let num2 = num1 引用值通过变量赋值给另一个变量时,也会复制一个值,这个值其实是一个指针(引用),该指针指向的还是同一个对象. let obj1 = new Object() let obj2 = obj1 既然是指向同一个引用对象,那么给obj1添加属性,也会作用到
Javascript作用域与闭包详情

目录 1.作用域 2.作用域链 3.词法作用域 5.闭包的应用 6.闭包的缺陷 7.高频闭包面试题 1.作用域简单来说,作用域是指程序中定义变量的区域,它决定了当前执行代码对变量的访问权限在ES5中,一般只有两种作用域类型: 全局作用域:全局作用域作为程序的最外层作用域,一直存在函数作用域:函数作用域只有在函数被定义时才会被创建,包含在父级函数作用域或全局作用域中说完概念,我们来看下面这段代码: var a = 100 function test(){ var b = a * 2 var
实例详解JavaScript静态作用域和动态作用域

目录前言静态作用域与动态作用域静态作用域执行过程动态作用域执行过程习题习题一习题二习题三总结前言在文章最开始,先学习几个概念: 作用域:<你不知道的js>中指出,作用域是一套规则,这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找.简单来说,作用域规定了如何查找变量. 静态作用域:又称词法作用域,函数的作用域在函数定义的时候就决定了,通俗点说就是你在写代码时将变量和块作用域写在哪里决定的. 动态作用域:函数的作用域在函数调用时才决定的. 静
JS难点同步异步和作用域与闭包及原型和原型链详解

目录 JS三座大山同步异步同步异步区别作用域.闭包函数作用域链块作用域闭包闭包解决用var导致下标错误的问题投票机闭包两个面试题原型.原型链原型对象原型链完整原型链图 JS三座大山同步异步前端中只有两个操作是异步的: 定时器异步执行; ajax异步请求编译器解析+执行代码原理: 1.编译器从上往下逐一解析代码 2.判断代码是同步还是异步同步:立即执行异步:不执行.放入事件队列池 3.等所有同步执行完毕开始执行异步同步异步区别 api : 异步有回调,同步没有
JavaScript ES新特性块级作用域

目录 1.块级作用域是什么 2.为什么需要块级作用域 3.与函数声明前言: 在学习块级作用域之前需要我们对作用域有个了解,所谓的作用域就是代码当中的某个成员起作用的范围. 1.块级作用域是什么所谓的块级作用域,就是该变量只能在声明时的代码块或者子代码块中使用.在ECMAScript 2015以前的版本中是不存在块级作用域的,而ECMAScript 2015提供的let关键字,使JavaScript出现了块级作用域,示例代码如下所示 /* * 块级作用域只能使用 let 关键字 * let关键
JavaScript基础之作用域

目录作用域全局作用域函数作用域 if,switch,for ,while 块作用域作用域链总结再聊AO和BO之前还需要了解作用域的概念,这样方便后面了解很多东西,比如this指向等. 作用域作用域(Scope)简单的说就是变量,函数和对象定义后其可用的范围. console.log(a) { var a=1; } function test(){ var b=2; } 可以看出在外面无法使用变量b.可以看出作用域可以保护数据不会被外部随意访问,以及修改.简单可以看出作用域可以相互隔
图解JavaScript作用域链底层原理

目录前言作用域 1.什么是作用域 2.[[Scopes]]属性 3.作用域链 4.图解查找变量原理总结前言在学习JavaScript时大家一定都知道,外部空间不能访问内部变量,我们往往只知道这一基本规则,那实现这一基本规则的基本底层原理是什么呢?今天我将从小白的角度来带大家理解作用域链,希望能给大家一些帮助! 作用域 1.什么是作用域简单来说,作用域(英文:scope)是据名称来查找变量的一套规则,可以把作用域通俗理解为一个封闭的空间,这个空间是封闭的,不会对外部产生影响,外部空间不
浅谈JavaScript作用域

目录一.作用域 1.全局作用域 2.局部作用域二.变量的作用域 1.全局变量 2.局部变量 3.全局变量和局部变量的区别三.作用域链一.作用域通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域.作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突. JavaScript(es6前)中的作用域有两种: 全局作用域局部作用域(函数作用域) 在ES6后,还有一个块级作用域,以后在详述. 1.全局作用域作用于所有
浅谈JavaScript作用域和闭包

作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们. 我们先从作用域开始. 作用域 JavaScript的作用域限定了你可以访问哪些变量.有两种作用域:全局作用域,局部作用域. 全局作用域在所有函数声明或者大括号之外定义的变量,都在全局作用域里. 不过这个规则只在浏览器中运行的JavaScript里有效.如果你在Node.js里,那么全局作用域里的变量就不一样了,不过这篇文章不讨论Node.js. `const
浅谈JavaScript 执行环境、作用域及垃圾回收

执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象. 全局执行环境是最外围的一个执行环境.根据JavaScript实现所在的宿主环境不同,表示执行环境的对象也不一样.在Web浏览器中,全局执行环境被认为是window对象.因此,所有的全局变量和函数都是作为window对象的属性和方法创建的. 变量对象:环境中定义的所有变量和函数都保存在这个对象中. 作用域链:当代码在一个环境中执行时,会创建变量对象的一个作用域链.作用域链的用途是保证对执行环
浅谈JavaScript 浏览器对象

window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:
浅谈javascript运算符——条件,逗号,赋值,()和void运算符

前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符条件运算符条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia
浅谈Javascript中的函数、this以及原型

关于函数在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明
浅谈JavaScript的全局变量与局部变量

一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert("before for scope:"+i); //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行) //此时i值为undefined for(var i=0; i<3;i++){ alert("in for scope:"+i);} //i的值
浅谈JavaScript对象的创建方式

通过Object构造函数或对象字面量创建对象时,使用同一个接口创建很多对象时,会产生大量的重复代码.为了简化,引入了工厂模式. 工厂模式 function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHello(){ alert(this.name); }; return obj; } var p1 = createPers
浅谈JavaScript编程语言的编码规范

JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也
浅谈JavaScript 声明提升

1 引例及基本原理在学习JavaScript声明提升之前,我们先看下面这个例子: console.log(a); var a=2; 运行结果会是什么?你可能会有以下的猜测: 1.报错ReferenceError: a is not defined: 2.打印2: 3.打印undefined. 正确的结果是第三种,打印undefined. 下面让我们来看看具体的原因.其实,对于var a=2;这条语句,JavaScript会将其视为两个声明: 定义声明var a,会在编译阶段进行: 赋值声明a=