JavaScript 作用域

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 通过本章了解并学习JavaScript 作用域。

目录


作用域


全局作用域


局部作用域


变量的作用域


全局变量


局部变量


总结:


作用域链


例题:


总结:


预解析


预解析的概念


变量预解析


函数预解析


函数表达式声明函数


总结:


案例:



作用域

JavaScript(es6前)中的作用域有两种:


- 全局作用域


- 局部作用域(函数作用域)


全局作用域

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


var num = 10;//全局作用域


局部作用域


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


function getnum(){ var num=20;}


变量的作用域

在JavaScript中,根据作用域的不同,变量可以分为两种:全局变量,局部变量。


全局变量

在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)。

function fun() {
            var num1 = 10; // num1就是局部变量 只能在函数内部使用
            num2 = 20;}
        fun();
 console.log(num2);//undefined


- 全局变量在代码的任何位置都可以使用


- 在全局作用域下 var 声明的变量 是全局变量


- 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)


局部变量

在局部作用域下声明的变量叫做局部变量(在函数内部定义的变量)


- 局部变量只能在该函数内部使用


- 在函数内部 var 声明的变量是局部变量


- 函数的形参实际上就是局部变量


总结:

全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存


局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间


作用域链

- 只要是代码都一个作用域中,写在函数内部的局部作用域,未写在任何函数内部即在全局作用域中;


- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域;


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

var num = 10;
function fn() { // 外部函数
       var num = 20;
      function fun() { // 内部函数
         console.log(num);//20
       }fun();
}fn();


例题:

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


总结

作用域链采取就近原则的方式来查找变量最终的值。


预解析

预解析的概念

- js引擎会把js 里面所有的var 还有function 提升到当前作用域的最前面。


- function 声明的变量在内存中进行提前声明或者定义。


- 代码执行: 从上到下执行JS语句。


变量预解析

变量提升(变量预解析): 变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。

console.log(num); //直接打印变量未声明
console.log(num); // undefined 变量声明未赋值
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;
结果:undefined


注意:变量提升只提升声明,不提升赋值


函数预解析

函数提升: 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。

fn();
function fn() {
    console.log('打印');
}


结果:控制台打印字符串 --- ”打印“


注意:函数声明代表函数整体,所以函数提升后,函数名代表整个函数,但是函数并没有被调用!


函数表达式声明函数

函数表达式创建函数,会执行变量提升,此时接收函数的变量名无法正确的调用:

fn();
var  fn = function() {
    console.log('我被执行了吗');
}


结果:报错提示 ”fn is not a function";


解释:该段代码执行之前,会做变量声明提升,fn在提升之后的值是undefined;而fn调用是在fn被赋值为函数体之前,此时fn的值是undefined,所以无法正确调用。


总结:

- 我们js引擎运行js 分为两步:  预解析  代码执行


- 预解析 js引擎会把js 里面所有的 var  还有 function 提升到当前作用域的最前面


- 预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)


- 变量提升 就是把所有的变量声明提升到当前的作用域最前面  不提升赋值操作


- 函数提升 就是把所有的函数声明提升到当前作用域的最前面  不调用函数


案例:

一:
var num = 10;
 fun();
 function fun() {
 console.log(num); //多少
// var num = 20;
 }
二:
 var num = 10;
 function fn() {
  console.log(num);
  var num = 20;
  console.log(num);
 }
fn();


结束语:

让我们一起进步,拿到自己想要的offer


相关文章
|
1月前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
4月前
|
JavaScript 前端开发
浅谈js作用域
浅谈js作用域
37 0
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
36 2
[JS]作用域的“生产者”——词法作用域
|
1月前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
1月前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
2月前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
2月前
|
JavaScript 前端开发
js作用域
js作用域
19 1
|
3月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-作用域(action scope)
关于JavaScript基础知识中作用域的介绍。
46 1
JavaScript基础知识-作用域(action scope)