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)  // -----不能访问


目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript如何判断变量undefined
JavaScript如何判断变量undefined
|
21天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
21天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
21天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
27天前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
20 3
|
1月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
41 4
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
25 1
|
21天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
40 0
|
1月前
|
前端开发 JavaScript 小程序
JavaScript的ES6中Promise的使用以及个人理解
JavaScript的ES6中Promise的使用以及个人理解
18 1
|
2月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
43 9