The word "pit" here means "trap". Due to the "weak language" nature of JavaScript, it is extremely loose and flexible during use, but it is also extremely easy to "fall into". These pitfalls are often hidden , so you must keep your eyes open so that you can have a smooth journey on the road to learning and applying JS
1. Global variables
JavaScript manages scope through functions. Variables declared inside a function are only available inside the function and are not available outside the function. On the other hand, global variables are those declared outside any function or simply used without being declared.
"Simple use without declaration" refers to declaring variables without using the var keyword. We already know this very well. The way to avoid implicitly generating global variables is to use the var keyword when declaring variables.
But do you think using var is ok? Let’s take a look at this pit:
function foo() {
var a = b = 0;
// body...
}
Maybe you expected two local variables, but b is a real global variable. why? Because assignment operations are from right to left, so this is equivalent to:
function foo() {
var a = (b = 0);
// body...
}
So b is a global variable.
Fill in the pit: variable declarations, it’s best to do it one by one, don’t do wholesale~_~;
2. Variable declaration
Let’s look at the pitfalls first:
myName = "global";
function foo() {
alert(myName);
var myName = "local";
alert(myName);
}
foo();
At first glance, we expect that the results of the two alerts are "global" and "local", but the real The results are "undefined" and "local". why? Because variables are in the same scope (same function), declarations are raised to the top of the scope and parsed first.
So the execution behavior of the above code snippet might be like this:
function foo() {
var myName;
alert(myName); // "undefined"
myName = "local";
alert(myName); // "local"
}
Use another pit to test whether you really understand pre-parsing:
if (!("a" in window)) {
var a = 1;
}
alert(a);
The declaration of a variable is advanced to the top of the code and has not yet been assigned a value. Next, enter the if statement. The judgment condition "a" in window has been established (a has been declared as a global variable), so the judgment statement evaluates to false and jumps out of the if statement directly, so the value of a is undefined.
var a; // "undefined"
console .log("a" in window); // true
if (!("a" in window)) {
var a = 1; // Do not execute
}
alert(a); // "undefined"
Fill in the pit: variable declaration, it is best to manually place it at the top of the scope. For variables that cannot be assigned at the moment, you can adopt the method of declaring first and then assigning the value.
3. Function declaration
Function declarations are also advanced to the top of the scope, parsed and evaluated before any expressions and statements
alert(typeof foo); // "function"
function foo() {
// body...
}
You can compare:
alert(typeof foo); // "undefined"
var foo = function () {
// body...
};
After understanding this truth, will you still step into the following pitfalls?
function test() {
alert("1 ");
}
test();
function test() {
alert("2");
}
test( );
Run the above code snippet, and the two pop-up windows you see display "2". Why are they not "1" and "2" respectively? It's simple. The declaration of test is parsed before test(). Since the latter overrides the former, the result of both executions is "2".
Fill in the pit: In most cases, I use function expressions instead of function declarations, especially in some statement blocks.
4. Function expressions
Let’s first look at named function expressions. Of course, it must have a name, for example:
var bar = function foo() {
// body...
};
It should be noted that the function name is only visible inside its function. Such as the following pitfalls:
var bar = function foo() {
foo(); // Normal operation
};
foo(); // Error: ReferenceError
Fill the pit: Use named function expressions as little as possible (except for some recursion and debugging purposes), and never use function names externally.
5. Self-execution of functions
For function expressions, you can self-execute by adding () after it, and you can pass parameters in parentheses, but function declarations cannot. Pitfall:
// (1) This is just a grouping operation symbol, not a function call!
// So the function here has not been executed, it is still a statement
function foo(x) {
alert(x);
}(1);
The following code snippets are respectively The pop-up window displays "1" during execution, because everything before (1) is a function expression, so () here is not a grouping operator, but an operator, indicating call execution.
// Standard anonymous function expression
var bar = function foo(x) {
alert(x);
}(1);
// The previous () converts the function declaration into an expression
(function foo(x) {
alert(x);
})(1);
// The whole () is the expression
(function foo(x) {
alert(x);
}(1));
// new expression
new function foo(x) {
alert(x);
}(1);
// &&, ||, !, , -, ~ operators (and commas), disambiguate function expressions and function declarations
// so once the parser knows that one of them is already an expression , and everything else defaults to expressions
true && function foo(x) {
alert(x);
}(1);
Fill the pit: This pit The key is to understand the essence of various functional expressions.
6. Closures in loops
The following demonstrates a common pitfall:
Document when clicking links below, show the number of its sequence
var links = document.getElementsByTagName("ul")[0].getElementsByTagName("a");
for (var i = 0, l = links.length; i < l; i ) {
links[i].onclick = function (e) {
e.preventDefault();
alert("You click link #" i);
}
}
我们预期当点击第 i 个链接时，得到此序列索引 i 的值，可实际无论点击哪个链接，得到的都是 i 在循环后的最终结果：”5”。
解释一下原因：当 alert 被调用时，for 循环内的匿名函数表达式，保持了对外部变量 i的引用（闭包），此时循环已结束，i 的值被修改为 “5”。
填坑：为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。以下演示正确的做法：
Document when clicking links below, show the number of its sequence
