1. 什么是词法作用域?

首先先来解释一下作用域就是作用的范围,比如定义一个普通函数,该函数就会有自己的作用域,并且在函数里面定义的变量,函数外面是使用不了函数里面定义的变量的,作用域决定了代码区块中的变量和其他资源的可见性。

而作用域也分为静态作用域和动态作用域,词法作用域就是静态作用域,静态作用域在函数定义的时候就决定了,而动态作用域在函数调用时才决定。静态作用域在编译时期(词法解析阶段)就确定好了,所以也叫词法作用域。

Javascript 采用的是词法作用域,即静态作用域。

2.其他常用作用域重要理解

JavaScript 中的作用域分为全局作用域、函数作用域和块级作用域。以下是它们的示例:

1. 全局作用域:

var globalVar = "I am global!"; // 全局作用域内的变量

function foo() {
  console.log(globalVar); // 可以在函数内部访问全局作用域内的变量
}

foo(); // 输出 "I am global!"
console.log(globalVar); // 输出 "I am global!"

在上面的示例中,globalVar 是在全局作用域内定义的变量,可以在函数 foo 内部和函数外部访问。

2.函数作用域:

function foo() {
  var x = 10; // 函数作用域内的变量
  console.log(x); // 输出 10
}

foo();
console.log(x); // 报错,x is not defined

在上面的示例中,x 是在函数 foo 内部定义的变量,只在函数内部有效,函数外部无法访问。

3.块级作用域:

if (true) {
  var globalVar = "I am global!"; // 在块级作用域内使用 var 声明的变量
  let localVar = "I am local!"; // 在块级作用域内使用 let 声明的变量
  const constVar = "I am const!"; // 在块级作用域内使用 const 声明的常量
}

console.log(globalVar); // 输出 "I am global!",因为使用 var 声明的变量具有函数作用域,不受块级作用域限制
console.log(localVar); // 报错,localVar is not defined,因为使用 let 声明的变量具有块级作用域,只在块级作用域内有效
console.log(constVar); // 报错,constVar is not defined,因为使用 const 声明的常量具有块级作用域,只在块级作用域内有效

3.Vue3 响应式变量作用域向下访问详解

<script setup>
const fun=()=>{
  console.log('data2',count); // 12
}
fun()
const count = 12 
</script>

-------------------------分割线下面是js正常作用域访问不到
 // 当前为js正常作用域
const fun=()=>{
 // "Uncaught ReferenceError: Cannot access 'count' before initialization"
  console.log('data2',count); 
}
fun()
const count = 12

在 Vue 3 的 <script setup> 中,将 let count = ref(0); 的定义放在最后面,即在后续的代码之后,是可以访问和修改该变量的。

原因:

1.在 Vue 中,变量在 Vue 组件中可以在不同的作用域中进行访问,这是因为 Vue 使用了   JavaScript 中的闭包特性。

2. 在这个示例中,虽然变量 count 的定义放在了最后面,但在后续的代码中仍然可以访问和修改该变量的值,因为 Vue 3 会处理 ref 函数创建的变量,使其在整个 <script setup> 内都可用,不需要严格遵循 JavaScript 的词法作用域规则。

这是 Vue 3 的特性之一,使得在 <script setup> 中使用响应式变量更加方便和灵活。但需要注意,对于普通的 letconst 关键字定义的变量,仍然需要遵循 JavaScript 的词法作用域规则,在其定义之后的位置才能访问和修改变量的值。

Logo

前往低代码交流专区

更多推荐