JavaScript 局部变量和外部变量(ES6以前)

简介: 函数的作用域表示在函数内部定义的变量,只有在函数内部可以被访问到;

1677579662291.png


局部变量和外部变量


  • 在JavaScript(ES5之前)中没有块级作用域的概念,但是函数可以定义自己的作用域。
  • 作用域(Scope)表示一些标识符的作用有效范围(所以也有被翻译为有效范围的);
  • 函数的作用域表示在函数内部定义的变量,只有在函数内部可以被访问到;
  • 外部变量和局部变量的概念:
  • 定义在函数内部的变量,被称之为局部变量(Local Variables)。
  • 定义在函数外部的变量,被称之为外部变量(Outer Variables)。
  • 什么是全局变量?
  • 在函数之外声明的变量(在script中声明的),称之为全局变量。
  • 全局变量在任何函数中都是可见的。
  • 通过var声明的全局变量会在window对象上添加一个属性(了解);
  • 在函数中,访问变量的顺序是什么呢?
  • 优先访问自己函数中的变量,没有找到时,在外部中访问。(就近原则
  • 关于块级作用域、作用域链、变量提升、AO、VO、GO等概念我们后续将进行学习。
  • 关于上面说的只有函数代码块有自己的作用域请看如下例子:


// 1.作用域的理解:message在哪一个范围内可以被使用, 称之为message的作用域(scope)
// 全局变量: 全局作用域
var message = "Hello World"
if (true) {
  console.log(message)
}
function foo() {
  console.log("在foo中访问", message)
}
foo()
// 2.ES5之前是没有块级作用域(var定义的变量是没有块级作用域)
{
  var count = 100
  console.log("在代码块中访问count:", count)
}
console.log("在代码块外面访问count:", count)  // -----可以访问
// for循环的代码块也是没有自己的作用域
for (var i = 0; i < 3; i++) {
  var foo = "foo"
}
console.log("for循环外面访问foo:", foo) // ------可以访问
console.log("for循环外面访问i:", i) // 3
// 3.ES5之前函数代码块是会形成自己的作用域
// 意味着在函数内部定义的变量外面是访问不到的
function test() {
  var bar = "bar"
}
test()
console.log("test函数外面访问bar:", bar)  // ---报错,变量未定义,访问不了
// 函数有自己的作用域: 函数内部定义的变量只有函数内部能访问到
function sayHello() {
  var nickname = "kobe"
  console.log("sayHello函数的内部:", nickname)
  function hi() {
    console.log("hi function~")
    console.log("在hi函数中访问nickname:", nickname)
  }
  hi()
}
sayHello()
console.log("sayHello外面访问nickname:", nickname)  // -----不能访问


目录
相关文章
|
6天前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
8天前
|
JavaScript 前端开发
JavaScript基础知识-变量的声明提前
关于JavaScript变量声明提前特性的基础知识介绍。
22 0
JavaScript基础知识-变量的声明提前
|
14天前
|
JSON 前端开发 JavaScript
|
9天前
|
缓存 JavaScript 前端开发
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
JavaScript模块化开发:ES6模块与CommonJs的对比与应用
15 2
|
13天前
|
JavaScript 前端开发 API
揭秘现代前端开发秘籍:Vue.js与ES6如何联手打造惊艳应用?
【8月更文挑战第30天】本文介绍如何从零开始使用Vue.js与ES6创建现代前端应用。首先,通过简要介绍Vue.js和ES6的新特性,使读者了解这两者为何能有效提升开发效率。接着,指导读者使用Vue CLI初始化项目,并展示如何运用ES6语法编写Vue组件。最后,通过运行项目验证组件功能,为后续开发打下基础。适用于希望快速入门Vue.js与ES6的前端开发者。
28 3
|
15天前
|
前端开发 JavaScript 开发者
翻天覆地!ES6+新特性大爆发,揭秘JavaScript代码的惊人蜕变!
【8月更文挑战第27天】自ES6标准发布以来,JavaScript新增的特性极大地提升了编程效率并简化了代码。本文重点介绍了五大特性:函数默认参数简化、模板字符串的强大功能、解构赋值的便捷性、箭头函数的简洁之美。这些特性不仅使代码更加简洁、易读,还解决了传统写法中的诸多问题。通过学习和应用这些新特性,开发者可以编写出更高效、更优雅的代码,以应对日益复杂的编程挑战。
33 2
|
21天前
|
JSON JavaScript 前端开发
JS 和 ES6 补充学习
【8月更文挑战第21天】
29 4
|
11天前
|
存储 JavaScript 前端开发
|
21天前
|
JavaScript 前端开发
揭秘JavaScript变量的三大守护神:从var到let,再到const,究竟隐藏了哪些秘密?
【8月更文挑战第22天】在JavaScript中,`var`、`let`和`const`用于声明变量,但各有特点。`var`有函数作用域并会被提升至作用域顶部。`let`提供块级作用域且存在暂时性死区,不允许提前访问。`const`同样拥有块级作用域,用于声明常量,一旦初始化便不可改变。现代开发倾向于使用`let`和`const`以获得更清晰的作用域控制和避免潜在错误。
24 0
|
21天前
|
JavaScript 前端开发
揭开JavaScript变量作用域与链的神秘面纱:你的代码为何出错?数据类型转换背后的惊人秘密!
【8月更文挑战第22天】JavaScript是Web开发的核心,了解其变量作用域、作用域链及数据类型转换至关重要。作用域定义变量的可见性与生命周期,分为全局与局部;作用域链确保变量按链式顺序查找;数据类型包括原始与对象类型,可通过显式或隐式方式进行转换。这些概念直接影响代码结构与程序运行效果。通过具体示例,如变量访问示例、闭包实现计数器功能、以及动态表单验证的应用,我们能更好地掌握这些关键概念及其实践意义。
21 0