Full scope analysis of JavaScript variables_Basic knowledge

Variable scope is the area in the program where the variable is defined.
Let’s look at an example first:

/* Code 1 */

var scope = "global ";
function checkScope() {
 var scope = "local ";
 function childCheck() {
  var scope = "childLocal ";
  document.write(scope);
 }
 function childUndefined() {
  document.write(scope);
  var scope;
 }
 function childOverride() {
  scope = "childOverride ";
  document.write(scope);
 }
 document.write(scope); //输出"local"
 childCheck();   //输出"childLocal"
 childUndefined();  //输出"undefined"
 childOverride();  //输出"childOverride"
 document.write(scope); //输出"childOverride"
}
checkScope();    //输出"local childLocal undefinedchildOverride childOverride"
document.write(scope);  //输出"global "

Global scope and local scope
Global variables have a global scope and are defined everywhere in Javascript; variables declared inside a function are local variables, and their scope is local and are only defined inside the function body. . The following output should come as no surprise to readers.
/* Code 2 */

var scope = "global";
function checkScope() {
 var scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"global"

You can use variables in the global variable scope without the var statement, but you must use the var statement when declaring local variables, otherwise it will be regarded as a reference to the global variable. Look at the code below:
/* Code 3 */

var scope = "global";
function checkScope() {
 scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"local"

No block scope
Javascript does not have block-level scope, and variables declared in a function are defined throughout the function. The following code may be surprising to unfamiliar readers:
/* Code 4 */

var scope = "global";
function checkScope() {
 document.write(scope); //语句4.1
 var scope = "local"; //语句4.2
 document.write(scope);
}
checkScope();   //输出"undefinedlocal"

Since the variables declared in statement 4.1 (var scope = "local";) are valid within the entire checkScope function scope, when statement 4.2 (document.write(scope);) is executed, the scope refers to local variables. At this time, the local variable scope has not been defined, so "undefined" is output. Therefore a good programming practice is to group all variable declarations at the beginning of the function.

After understanding the above content, readers should not be confused if they look at Code 1.
Attribute variables of the object
The attribute variables of objects are relatively easy to understand. Readers who look at the following code should not be confused.
/* Code 5 */

var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
 var scope = "loacl ";
 document.write(scope);   //输出"loacl"
 document.write(this.scope);  //输出"object"
 document.write(window.scope); //输出"global"
}
obj.checkScope(); //输出"loacl object global"

The so-called scope refers to the valid range of this variable in the code block. If you don't understand JavaScript scoping, it can be difficult to debug your code.

In a function, if you use var to declare a variable, the scope of the variable is limited to the inside of the function, and code outside the function cannot access the variable. If you declare a function within this function, the internal function can also access this variable.

Conversely, if var is not used when declaring a variable, then the scope of this variable is not limited to this function. The JavaScript engine will check whether the variable has been defined in the global scope. If the variable has not been defined, it will be defined as a global variable.

Functions can access variables in the same scope:

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Code outside the scope of the variable cannot access the variable:

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

Do not use variables with the same name in the scope, but have different values:

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

After the function is defined, you can see the changes in the variable values ​​​​in the function:

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Scopes also traverse — closures

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用

Comprehensive

The so-called scope refers to the valid range of this variable in the code block. If you don't understand JavaScript scoping, it can be difficult to debug your code.

In a function, if you use var to declare a variable, the scope of the variable is limited to the inside of the function, and code outside the function cannot access the variable. If you declare a function within this function, the internal function can also access this variable.

Conversely, if var is not used when declaring a variable, then the scope of this variable is not limited to this function. The JavaScript engine will check whether the variable has been defined in the global scope. If the variable has not been defined, it will be defined as a global variable.

Functions can access variables in the same scope:

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

Code outside the scope of the variable cannot access the variable:

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

Do not use variables with the same name in the scope, but have different values:

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

After the function is defined, you can see the changes in the variable values ​​​​in the function:

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

Scopes also traverse — closures

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用