Basic javascript knowledge and basic javascript knowledge

Basic javascript knowledge and basic javascript knowledge

This article is suitable for beginners of javascript or those who have been learning the front-end for a while and are not clear about the js concept ~~.

Objective

This article is intended for students with weak javascript foundations to deepen their understanding of javascript.

This article will introduce the following pitfalls for beginners to start to speak javascript (some are in most languages ).

The description is as follows:

1. Connection

2. I ++

3. Packaging objects

4. Reference Type

5. & |

Description

1. Connection

Test Tool

Connection is a common expression, but not all cases are suitable for connection,Only applies to the literal and not the reference type..

// Obtain the expected result var a, B, a = B = 2, a // 2b // 2 // unpredictable var arr1, such as reference type connection, arr2; arr1 = arr2 = [] arr1 [0] = 10arr2 [0] // 10 // reference type connection so that two references point to one object and one of them is operated, both values change

The above code is a common connection, and sometimes we need to assign values to one value for two variables, so we can perform this operation. However, if it is a reference type, it is not possible to assign values to other variables.

In addition, the assignment of concatenation has a major vulnerability, that is, the variables are leaked to the global environment. The above code is not leaked, but the following code is used:

Function fn (num) {var a = B = num; a // num B // num} fn (10) a // error B // 10 // We have not defined global variable B

We can see that after executing the fn function, the B variable appears in the global scope. Why? Let's look at the sentence var a = B = num, which can be divided into two sentences.

Var aa = B = num // only declares

In fact, we only declare the variable, and the connected B does not declare it. As a result, we can know that B is mounted to the global window object, causing the variable to leak to the global.

The first time

The above is just a simple example. Let's look at a complex example.

var a = {x: 1}var b = aa.x = a = {y: 1}a.x // undefinedb.x // {y: 1}

This example is shown in a test question. At first glance, it seems that it is not clear, but it is not hard to understand at all.

1. a and B refer to the type and point to an object {x: 1}

2. a. x references the x attribute of the original object, and a is a reference variable.

3. a = {y: 1} Just points the pointer of the referenced variable a to another object {y: 1}

4. a. x = a. The former still represents the x attribute of the original object, that is, the x attribute of the object referenced by B.

5. The assignment is complete.

Maybe you haven't understood it yet. Don't worry. Next we will dissect the javascript engine to make it clear to you.

Ding jieniu

How the engine works: when parsing javascript expressions, the engine performs LHS queries and RHS queries (For details, refer to javascript you Don't know). I understand them as LHS (assignment ), RHS (search ).

The following is an example of the engine workflow.

Var a = {x: 1} // engine: I'm going to assign a value to variable a LHS. The content is {x: 1} // scope: variable a has just been declared, here you are. Var B = a // engine: I'm going to apply the variable RHS (Search) // scope: You just gave it LHS, give it to you // engine: i'm going to assign a value to variable B (LHS). The content is the object to which variable a points // scope: I just declared variable B, and I will give it to you. A. x = a = {y: 1} // engine: I'm going to assign a value to a. The content is another object {y: 1} // scope: Yes, yes, but it seems that there are other commands. Do not assign values first. // Engine: Yes. In the next step. x is used for LHS (Value assignment). The content is the variable to be changed // scope: Yes, the object pointed to by variable a has the x attribute, but it changes immediately after a, but it doesn't matter, variable B also points to that object. After the value is assigned, you can use variable B to reference the old object. // Engine: Now, I first assign a value to a new object, and then assign a value to the x attribute of the object to which the original a variable points. A. x // undefined // engine: I need to get the x attribute of the object pointed to by variable a // scope: You just changed the point of, the object that a points to does not have the x attribute. x // {y: 1} // engine: I need to get the x attribute of the object pointed to by the B Variable // scope: Do you want to get the x attribute of your old object, yes, but you have changed the value before. B. the value of x is the value of the new object pointed to by.

The above is my understanding and there is no authoritative certification. For more information about the execution process, see javascript that you don't know. If this section contains errors, please note.

2. ++ Operators

The ++ operator is the most commonly used operator. In fact, there is nothing special about it, but do you really know about it for beginners.

var a = 1;var b = a++a // 2b // 1var c = 1;var d = ++ c;c // 2d // 2

Before ++ and after ++, one is to return the value before the expression auto-increment. Let's take a look at the process.

B = a ++ // equivalent... B = aa = a + 1 //......................... B = ++ a // is equivalent... a = a + 1b =

It's just a matter of operational order. This may be easy to understand, but there is also a pitfall, as shown below.

A person asked a few days ago: what is the value of 1 ++? Answer: 2

It is estimated that the first response of many people is 2, but this is a big mistake! Why is it not equal to 2? In fact, 1 ++ reports an error and is not a legal expression. The reason is as follows:

1 ++ // equivalent to 1 = 1 + 1 // The engine performs an LHS (Value assignment) on 1, and the scope finds that it is an invalid variable. Therefore, an error is reported, and the left value is invalid.

3. Packaging objects

When we use a string to get the length and use the method to intercept, have you ever thought that the literal value is only a value? Why does it have a method attribute, not an object? It is indeed only available to objects, but a packaging object is generated when an expression is executed. You may have read this knowledge point and can skip it.

var str = 'hello'str.length // 5str.aaa = 5str.aaa // undefined

We define a str string with a length of 5, but we cannot obtain it by adding an attribute aaa missing. This requires the Declaration cycle of the wrapped object to answer:The declaration period of the wrapped object only exists in one expression.

Var str = 'hello' str. length // equivalent to new String (str ). lengthstr. aaa = 5 // equivalent to new String (str ). aaa = 5str. aaa // equivalent to new String (str ). aaa

That is to say, every time the str attribute is used, it is first packaged into a String object. After the operation, the object is released. It can be seen that the preceding two str. aaa is a different object, so the second request to obtain the aaa property is useless. If you are not familiar with the Javascript packaging objects of Baidu, please have a detailed answer.

4. Reference Type

Most languages have reference types, which are actually object variables. In C language, we understand the reference type as a pointer, which dynamically points to a piece of memory. Through code changes, the Pointer Points will change accordingly. The same is true for js.

In our writing code, we must remember the differences between referenced type variables and nominal value variables. They are of different use.

var global = new Object()function setColor (obj) { obj.color = 'blue' obj = new Object() obj.color = 'red'}setColor(global)global.color // blue

This is an example in javascript advanced programming. We pass an object global to the setColor function and perform the above operations internally. We print out global. the color is blue. Why not red? Here is the result of the reference type.

1. The global variable is of the reference type and points to an object,

2. After being passed to the setColor function, obj references the global Object (globalObj)

3. assign a color attribute to globalObj as a blue string. At this time, global. color is blue.

4. Point obj to another new object localObj to disconnect obj from global.

5. Assign localObj. color to 'red'

We can see that the color of the global object is not assigned a 'red' value, and the 'red' value is assigned to the color attribute of another object.

Conclusion: the transfer of the reference type directs two variables to the same object, while the transfer of the literal value is only the transfer of the value. We can pass the reference type to the function for change, and cannot change the passed Literal Value in the function.

5. & |

I believe everyone knows the basic application of the two. Most of them are used for if judgment, for example:

Var a = 2; var B = falseif (a & B) {alert ('best')} if (a | B) {alret ('good ') // run}

Their usage is not limited to determining the & | relationship between the left and right sides, but also to providing code quality.

var obj = {}if (obj.info.user === 'xu') { // terrible // ..}if (obj.info && obj.info.user === 'xu' ) { // good // ... }

If you only judge obj.info. user, an error will be reported and the program will be terminated. However, the following judgment will make the code robust and won't crash easily.

Note: & | does not return true or false. It returns the variable value that terminates the expression.

true && 6 // 6NaN && false // NaN'0' || 6 // '0'false || true // truefalse || 0 && 1 // 0false || 1 && 0 // 0

& |, & The priority is greater than |.

& Operator. If the left side is false, the left side is returned. Otherwise, the right side is always returned.

| Operator. If the left side is true, the left side is returned. Otherwise, the right side is always returned.

End

This chapter briefly introduces the basics of javascript. The content here is not comprehensive. If any error occurs, please note ....

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!