JavaScript 作用域

简介: 通过本章了解并学习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变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
22 1
|
1月前
|
存储 JavaScript 前端开发
解释 JavaScript 中的作用域和作用域链的概念。
【4月更文挑战第4天】JavaScript作用域定义了变量和函数的可见范围,静态决定于编码时。每个函数作为对象拥有`scope`属性,关联运行期上下文集合。执行上下文在函数执行时创建,定义执行环境,每次调用函数都会生成独特上下文。作用域链是按层级组织的作用域集合,自内向外查找变量。变量查找遵循从当前执行上下文到全局上下文的顺序,若找不到则抛出异常。
25 6
|
4天前
|
存储 JavaScript 前端开发
第五篇-Javascript作用域
第五篇-Javascript作用域
13 2
|
7天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域
12 2
|
1月前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
1天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。
【6月更文挑战第25天】JavaScript闭包是函数访问外部作用域变量的能力体现,它用于封装私有变量、持久化状态、避免全局污染和处理异步操作。闭包基于作用域链和垃圾回收机制,允许函数记住其定义时的环境。例如,`createCounter`函数返回的内部函数能访问并更新`count`,每次调用`counter()`计数器递增,展示了闭包维持状态的特性。
15 5
|
1天前
|
JavaScript 前端开发
JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用
【6月更文挑战第25天】JavaScript中的变量提升(Hoisting)将`var`声明和函数声明提前到作用域顶部,允许在声明前使用。`let`和`const`不完全提升,存在暂时性死区(TDZ),尝试在初始化前访问会出错。函数声明会被提升,但函数表达式不会。
11 3
|
7天前
|
JavaScript
Vue.js中使用.self修饰符来限制事件处理程序的作用域
Vue.js中使用.self修饰符来限制事件处理程序的作用域
|
8天前
|
自然语言处理 JavaScript 前端开发
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
【JavaScript】JavaScript基础知识强化:变量提升、作用域逻辑及TDZ的全面解析
13 3
|
11天前
|
自然语言处理 JavaScript 前端开发
深入了解JS作用域
深入了解JS作用域