JavaScript scope
你越是认真生活，你的生活就会越美好——Frank Lloyd Wright
"The Fruit of Life" Classic Quotations
JavaScript scope
作用域Yes 可访问变量the collection.
In JavaScript, 对象和函数it is also a variable.
In 作用域为可访问变量，对象，函数的集合JavaScript, .
JavaScript 函数作用域: The scope is modified within the function.
JavaScript local scope
The variable is in 函数内声明, and the variable is of local scope.
Local 只能在函数内部访问variables: .
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
Because it 局部变量only works 函数内, it 不同的函数can be used 相同名称的变量.
局部变量Created when the function starts executing, 函数执行完后local variables will be 自动销毁.
JavaScript global variables
The variable is 函数外defined, that is 全局变量.
The global variables are 全局作用域: 所有脚本and functions in the web page can be used.
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
If the variables 函数内没有声明(not using the var 该变量为全局变量keyword), .
In the following example, carName is in the function, but it is a global variable.
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
myFunction()
// 此处可调用 carName 变量 前提是myFunction函数执行过
console.log(carName) // Volvo
JavaScript variable life cycle
JavaScript 变量生命周期In it 声明时初始化.
局部变量In 函数执行完毕后销毁.
全局变量In 页面关闭后销毁.
Function parameters
函数参数It only 函数内works, yes 局部变量.
Global variables in HTML
In HTML, global variables are window objects: all data variables belong to window objects.
function myFunction() {
carName = "Volvo";
}
myFunction()
//此处可使用 window.carName
console.log(window.carName)
PS:
Your global variables or functions can overwrite the variables or functions of the window object.
Local variables, including window objects, can cover global variables and functions.
Variables and scope in ES6
Determine block scope by let and const
letAnd constthe variables created are 只在块作用域中valid. They only exist in the block that contains them. The code demonstrated below uses let to declare a tmp variable in an if statement block. This variable is only valid in the if statement.
function func() {
if (true) {
let tmp = 123;
console.log(tmp); // => 123
}
}
func() // 123
console.log(tmp); // => ReferenceError: tmp is not defined
In contrast, the var声明的变量scope of the scope is 函数范围内:
function func() {
console.log(tmp) // undefined 变量声明提升 还没赋值
if (true) {
var tmp = 123
console.log(tmp) // 123
}
console.log(tmp) // 123
}
func()
console.log(tmp) // Uncaught ReferenceError: tmp is not defined
Block scope means that you can have shadows of variables within a function.
function func() {
let foo = 5;
console.log(foo) // 5
if(true) {
let foo = 10;
console.log(foo) // 10
}
console.log(foo) // 5
}
func()
const creates immutable variables
The letvariable created is variable:
let foo = 'abc'
foo = 'def'
console.log(foo) // def
The constcreation of a variable 常量, the variable is 不可变in:
const foo = 'abc'
foo = 'def' // Uncaught TypeError: Assignment to constant variable.
If a constant refers to one 对象, const并不影响常量本身的值is it mutable, because it always points to that object, but the object itself can still be changed.
const obj = {
}
obj.prop = 123
console.log(obj.prop) // 123
console.log(obj) // {prop: 123}
obj = {
} // Uncaught TypeError: Assignment to constant variable.
If you want to be objtruly one 常量, you must 冻结它的值:
const obj = Object.freeze({
});
obj.prop = 123;
console.log(obj) // {}
In other words, if const定义the constant points to an object. At this time, it actually points to the address of the current object. This address is in the stack, and the real object is in the stack. Therefore, after we use const to define this object, we can change the content of the object. But 这个地址是不可以改变的... This means that you cannot re-assign this object. For example const obj= {}, obj = {}, even so, obj seems to have not changed anything, but it is still wrong.
However, in the 普通模式case, and there is no error, while obj.name = 'abc' it is entirely possible. This is closely related to the way JavaScript stores the value of the referenced object.
const obj = Object.freeze({
})
const newObj = {
}
obj.name = 'w3cplus'
newObj.name = 'damo';
console.log(obj) // {}
console.log(newObj) // {name: "damo"}
Use Babel to compile the above ES6 code into ES5 code:
'use strict';
var obj = Ob
JavaScript variable promotion
-
In JavaScript,
函数及变量的声明all will be提升到函数的最顶部. -
In JavaScript
变量可以在使用后声明, that is变量可以先使用再声明. -
类No variable promotion
The following two examples will achieve the same result:
Example 1
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x; // 在元素中显示 x
var x; // 声明 x
Example 2
var x; // 声明 x
x = 5; // 变量 x 设置为 5
console.log(x) // 5
To understand the above examples, you need to understand " hoisting(变量提升)".
变量提升: 函数声明And 变量声明will always be quietly by the interpreter 被"提升"到方法体的最顶部.
类No variable promotion
new Foo() // Uncaught ReferenceError: Foo is not defined
class Foo {
}
JavaScript initialization will not improve
In JavaScript, only declared variables will be promoted, not initialized ones.
Example 1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
console.log(x) // 5
console.log(y) // 7
Example 2
var x = 5; // 初始化 x
console.log(x) // 5
console.log(y) // undefined
var y = 7; // 初始化 y
The y of Example 2 outputs undefined. This is because the variable declaration (var y) is promoted, but the initialization (y = 7) will not be promoted, so the y variable is an undefined variable.
Example 2 is similar to the following code:
var x = 5; // 初始化 x
var y; // 声明 y
console.log(x) // 5
console.log(y) // undefined
y = 7; // 设置 y 为 7
Declare your variables at the head
For most programmers do not know JavaScript 变量提升.
If programmers don't understand variable promotion well, the programs they write are prone to some problems.
In order to avoid these problems, we usually use 在每个作用域开始前声明these variables, which is also a normal JavaScript parsing step, which is easy for us to understand.
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强
Reference
JavaScript scope
It is recommended to read and
understand the point of this in js (a few rules plus examples + call, apply, bind to change this point)