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


目录
相关文章
|
12天前
|
JavaScript
变量和函数提升(js的问题)
变量和函数提升(js的问题)
|
23天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
23天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
24天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
1月前
|
前端开发 JavaScript 开发者
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
探索JavaScript ES6的八种常见使用技巧:开启现代编程之旅
|
14天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型?
JavaScript 中如何检测一个变量是一个 String 类型?
21 2
|
2月前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
16 1
|
23天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的`async/await`是基于Promise的异步编程工具,能以同步风格编写异步代码,提高代码可读性。它缓解了回调地狱问题,通过将异步操作封装为Promise,避免回调嵌套。错误处理更直观,类似同步的try...catch。
|
23天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
16 6
|
23天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2