Various pitfalls and pitfall filling methods in JavaScript code writing_javascript skills

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:

Copy the code The code is as follows:

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:

Copy code The code is as follows:

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:

Copy code The code is as follows:

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:

Copy the code The code is as follows:

function foo() {
var myName;
alert(myName); // "undefined"
myName = "local";
alert(myName); // "local"
}

Use another pit to test whether you really understand pre-parsing:

Copy code The code is as follows:

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.

Copy code The code is as follows:

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

Copy code The code is as follows:

alert(typeof foo); // "function"

function foo() {
// body...
}

You can compare:

Copy the code The code is as follows:

alert(typeof foo); // "undefined"

var foo = function () {
// body...
};

After understanding this truth, will you still step into the following pitfalls?

Copy code The code is as follows:

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:

Copy code The code is as follows:

var bar = function foo() {
// body...
};

It should be noted that the function name is only visible inside its function. Such as the following pitfalls:

Copy code The code is as follows:

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:

Copy code The code is as follows:

// (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.

Copy code The code is as follows:

// 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:

Copy code The code is as follows:

   
   


   

when clicking links below, show the number of its sequence

   

       
• link #0

       
• link #1

       
• link #2

       
• link #3

       
• link #4

   

复制代码 代码如下:

var links = document.getElementsByTagName("ul")[0].getElementsByTagName("a");

for (var i = 0, l = links.length; i     links[i].onclick = function (e) {
        e.preventDefault();
        alert("You click link #" i);
    }       
}

我们预期当点击第 i 个链接时，得到此序列索引 i 的值，可实际无论点击哪个链接，得到的都是 i 在循环后的最终结果：”5”。

解释一下原因：当 alert 被调用时，for 循环内的匿名函数表达式，保持了对外部变量 i的引用（闭包），此时循环已结束，i 的值被修改为 “5”。

填坑：为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。以下演示正确的做法：

复制代码 代码如下:

   
   


   

when clicking links below, show the number of its sequence

   

       
• link #0

       
• link #1

       
• link #2

       
• link #3

       
• link #4