A detailed explanation of JavaScript scope

A scope is a collection of accessible variables.

JavaScript scope

In JavaScript, objects and functions are also variables.

In JavaScript, scope is a collection of accessible variables, objects, and functions.

JavaScript function scope: The scope is modified within the function.

JavaScript local scope

Variables are declared within the function, and the variables are local scope.

Local variables: can only be accessed inside the function.

// 此处不能调用 carName 变量
function myFunction() {
  var carName = "Volvo";
  // 函数内可调用 carName 变量
}

Because local variables only act within the function, different functions can use variables with the same name.

Local variables are created when the function starts executing, and will be automatically destroyed after the function is executed.

JavaScript global variables

Variables defined outside the function are global variables.

Global variables have global scope: all scripts and functions in the web page can be used.

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
  // 函数内可调用 carName 变量
}

If the variable is not declared within the function (without using the var keyword), the variable is a global variable.

In the following example, carName is within the function, but is a global variable.

// 此处可调用 carName 变量
 
function myFunction() {
  carName = "Volvo";
  // 此处可调用 carName 变量
}

JavaScript variable lifecycle

JavaScript variable lifecycle is initialized when it is declared.

Local variables are destroyed after the function is executed.

Global variables are destroyed after the page is closed.

Function parameters

Function parameters only work within the function and are local variables.

Global variables in HTML

In HTML, global variables are window objects: all data variables belong to the window object.

//此处可使用 window.carName
 
function myFunction() {
  carName = "Volvo";
}

Did you know?

Your global variables, or functions, can override the variables or functions of the window object.
Local variables, including window objects, can override global variables and functions.

Supplementary

The let keyword in ES6

let allows you to declare that a scope is restricted to Variables, statements, or expressions at the block level. Different from the var keyword, the variables it declares can only be global or the entire function block.

let Syntax:

let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];

The variable declared by let is only available in the block or sub-block in which it is declared. This is similar to var. The main difference between the two is that the scope of the variable declared with var is the entire enclosing function. Code example of the difference between

let and var:

function varTest() {
 var x = 1;
 if (true) {
  var x = 2; // 同样的变量!
  console.log(x); // 2
 }
 console.log(x); // 2
}

function letTest() {
 let x = 1;
 if (true) {
  let x = 2; // 不同的变量
  console.log(x); // 2
 }
 console.log(x); // 1
}

Related learning recommendations: javascript video tutorial

The above is the detailed content of A detailed explanation of JavaScript scope. For more information, please follow other related articles on the PHP Chinese website!