友谊路街道网站建设,网站后台为什么传不上图片,模板名字 wordpress,电子商务网站建设的好处有哪些1. 背景
本文将会介绍JavaScript中两个相对复杂的概念#xff0c;也即作用域和变量提升。这个概念在JavaScript中的设计和ABAP中的设计区别还是比较大的#xff0c;特别是变量提升部分。第一次接触JavaScript的同学#xff0c;要注意理解和区分。
2. 作用域
在JavaScript…1. 背景
本文将会介绍JavaScript中两个相对复杂的概念也即作用域和变量提升。这个概念在JavaScript中的设计和ABAP中的设计区别还是比较大的特别是变量提升部分。第一次接触JavaScript的同学要注意理解和区分。
2. 作用域
在JavaScript中作用域定义了变量的可见性和生命周期。它规定了变量在何处和如何被访问。
JavaScript主要有两种类型的作用域全局作用域和局部作用域。
2.1 全局作用域
全局作用域在代码的任何地方都可以访问全局变量。 全局作用域是默认的作用域, 它可以包含0个或多个嵌套的局部作用域。局部作用域间可以形成层级关系。 var globalVar I am global!; // 这是一个全局变量function test() {console.log(globalVar); // 输出 I am global!
}test();在上述代码中globalVar是一个全局变量可以在test函数内部访问。
2.2 局部作用域
局部作用域局部变量只能在声明它们的函数或代码块内部访问, 通常就是指两个大括号范围内的作用域。 function test() {var localVar I am local!; // 这是一个局部变量console.log(localVar); // 输出 I am local!
}test();
console.log(localVar); // 报错ReferenceError: localVar is not defined在上述代码中localVar是一个局部变量只能在test函数内部访问。在函数外部尝试访问localVar将会抛出错误。 此外ES6引入了let和const关键字它们具有块级作用域。这意味着它们的作用域被限制在最近的一对花括号即一个代码块中。 if (true) {let x 5; // 这是一个块级作用域变量
}
console.log(x); // 报错ReferenceError: x is not defined在上述代码中变量x的作用域被限制在if语句的代码块中。尝试在代码块外部访问x将会抛出错误。 let 提供了更好的变量作用域控制更严格的声明规则以及更好的错误检查因此在现代的 JavaScript 开发中let应当是首选的变量声明关键字。 3. 变量提升
在 JavaScript 中变量提升Hoisting是 JavaScript 默认将当前作用域全局或函数中的 “变量和函数声明” 移至顶部的行为。
这意味着无论变量或函数在哪里声明都会被提升到作用域的顶部。 需要注意的是只有声明会被提升初始化如果变量是在声明同时进行的初始化不会被提升。 例如
console.log(myVar); // 输出undefined
var myVar 5;
console.log(myVar); // 输出5在上面的代码中虽然变量 myVar 在 console.log(myVar); 之后声明和初始化但由于变量提升JavaScript 引擎在执行代码时会将 var myVar; 提升到顶部所以第一个 console.log(myVar); 输出的是 undefined 而不是报错。
对于函数提升的是整个函数体
hoistedFunction(); // 输出Hello, I have been hoistedfunction hoistedFunction() {console.log(Hello, I have been hoisted);
} 在上面的代码中尽管函数 hoistedFunction 在调用它的代码行之后声明但由于函数提升它仍然可以正常工作。
需要注意的是函数表达式包括箭头函数和 let、const 声明的变量不会被提升
console.log(myLetVar); // 报错myLetVar is not defined
let myLetVar 5;console.log(myFunction); // 报错myFunction is not a function
var myFunction function() {console.log(Hello, I am a function expression);
};在上面的代码中let 声明的变量和函数表达式都没有被提升所以在它们声明之前尝试访问会导致错误。
3.1 最佳实践
在 JavaScript 中理解和处理变量提升的规则十分重要为了避免意想不到的问题可以参考以下最佳实践。
变量和函数声明尽可能放在作用域顶部这样可以清晰地看到哪些变量和函数可用也可以避免由于变量提升导致的意外行为。
var myVar 5;
function myFunction() {// 函数体
}
// 其他代码避免在同一作用域内使用相同的变量名这样可以避免由于变量提升导致的变量覆盖。
function myFunction() {var myVar 5;// 其他代码var myVar 10; // 避免这样做
}使用 let 和 const 替代 varlet 和 const 声明的变量不会被提升而且它们有块级作用域这可以避免很多由于变量提升和函数作用域导致的问题。
let myLetVar 5;
const myConstVar 10;避免在声明之前使用变量或函数即使变量和函数声明会被提升但在声明之前使用它们仍然是一种不好的实践因为这可能会导致代码难以理解和维护。
myFunction(); // 避免这样做function myFunction() {// 函数体
}理解函数表达式和函数声明的区别函数表达式包括箭头函数不会被提升所以在函数表达式赋值之前调用它们会导致错误。
myFunction(); // 报错myFunction is not a functionvar myFunction function() {// 函数体
};3.2 变量提升的原理
JavaScript 中的变量提升Hoisting机制是由 JavaScript 引擎的工作方式决定的。在执行 JavaScript 代码时JavaScript 引擎会经历两个阶段编译阶段和执行阶段。
在编译阶段JavaScript 引擎会查找所有的变量和函数声明并在内存中为它们分配空间。这就是为什么我们可以在声明之前访问变量虽然值是 undefined因为内存空间已经在编译阶段被分配了。
在执行阶段JavaScript 引擎开始执行代码填充赋值之前在内存中分配的变量和函数。
这种机制的存在使得在函数或全局作用域内的任何地方声明变量和函数都可以提供了一定的灵活性。然而这也可能导致一些意想不到的结果因此在编写 JavaScript 代码时最佳实践是将所有的变量和函数声明放在其作用域的顶部以提高代码的可读性和可维护性。
4. 小结
本文详细介绍了JavaScript中作用域、变量提升的概念并从原理和实践的角度介绍了这两个概念。希望本文对你有帮助
