First, declare variables var only function-level scope and global scope, not block-level scope, in order to achieve the block-level scope, use the let.
1.2.1 The scope chain
When using a variable, js first to find this variable in the current scope, if not, go to the upper level. We illustrate with an example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
n0 = 0;
function Test1() {
where n1 is 1;
function Test2() {
where n 2 = 2;
Alert (n0); // has found global scope
Alert (N1); // find on a scope Test1
Alert (n2); // current scope
}
Test2 ();
}
Test1();
</script>
</head>
<body>
</body>
</html>
Print 0,1,2 respectively, in fact, nothing difficult to understand, layers up to find the pictures.
Variables 1.2.2 upgrade
Simply put, that is, variable declarations to the same place in advance of the beginning of the current scope, but the assignment will not improve.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Test1() {
where n1 is 1;
alert(n1);
alert(n2);
// was n2 = 2;
}
Test1();
</script>
</head>
<body>
</body>
</html>
This code will be executed to alert error (n2) time, if the release notes, prints undefined, the reason is variable lift. Note the release code similar to the following
function Test1() {
where n1 is 1;
where n 2;
alert(n1);
alert(n2);
n2 = 2;
}
Personal understanding of variable lift to serve the variable scope of this mechanism, but I think this mechanism to decrease the readability of the code, in order to circumvent this problem, the scope of variables declared in the head I find it easier to understand.
1.2.3 namespace
Because global variables are bound to the window scope, assuming a two page references js file js file defines these two global variables of the same name, it will cause a conflict, as follows:
File js1.js
var str = "js1";
File js2.js
var str = "js2";
When the following code is executed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js2.js"></script>
<script src="js1.js"></script>
<script>
alert(str);
</script>
</head>
<body>
</body>
</html>
When the last reference print results str js files, this case is js1; this makes the tag management is very confusing, the following
We resolve conflicts with the namespace variable
File js1.js
was ns1 = {};
ns1.str = "js1";
File js2.js
was ns2 = {};
ns2.str = "js2";
When the following code is executed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js2.js"></script>
<script src="js1.js"></script>
<script>
alert(ns1.str);
alert(ns2.str)
</script>
</head>
<body>
</body>
</html>
Normal print, in fact, this is also well understood, is that the variables for each js file is appended to the object is not the same name. As js objects of this concept, we will discuss in [2 object-oriented].
Block-level scope 1.2.4
The so-called block-level scope, in c # which is to say the braces, variable declaration will be released. But there js, var only functions and global scope, let implemented to use block-level scope. Ado, directly on the examples:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function Test(n1) {
if (n1 > 0) {
var str = "More than 0";
alert(str);
} else {
= str "Less Within last 0" // here did not declare str, but can be used normally
alert(str);
}
}
Test(10);
Test(-1);
</script>
</head>
<body>
</body>
</html>
Each print [ "More Within last 0" ] and [ "Less Within last 0" ], str out if you can still use braces, because in fact, caused by the variable lift, str statement promoted to the head of the function Test.
So we wanted to achieve brace of block-level scope how to do? let declare variables + [ use strict ] just fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
'use strict' ; // be in strict mode
function Test(n1) {
if (n1 > 0) {
let str = "More than 0";
alert(str);
} else {
= str "Less Within last 0" // execute this not being given, the variable is not defined, plus let just fine
alert(str);
}
}
Test(10);
Test(-1);
</script>
</head>
<body>
</body>
</html>