javascript Basic Knowledge Explanation

This article is suitable for javascript novice or learned the front-end for a period of time, the concept of js is not clear students ~ ~.

Purpose of learning

This article aims at students with weak foundation of javascript, which can deepen their understanding of javascript.

This article will talk about the following points for beginners to talk about javascript (some of which are available in most languages)

The explanation is as follows:

1. Continuous wait

2. i++

3. Wrap objects

4. Reference type

5. & & And

Explanatory section

1. Continuous wait

A small trial

Contiguous is a common expression, but not all cases are suitable for contiguous. Contiguous applies only to literals and not to reference types.

//  Literally equal to get the desired result 
var a,b;
a = b = 2;
a // 2
b // 2
//  Reference type concatenation is unpredictable 
var arr1, arr2;
arr1 = arr2 = []
arr1[0] = 10
arr2[0] // 10
// Reference type concatenation so that two references point to 1 Objects that manipulate the 1 Two, both values change 

The above code is common even, sometimes we need to assign two variables to one value, we will operate in this way, but if it is a reference type, we can't even assign values.

In addition, even the assignment will have a big vulnerability, that is, it will disclose variables to the global situation. We did not disclose the above code, but look at the following code:

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a //  Report an error 
b // 10
//  We don't have global variables defined b

You can see that after we execute the fn function, the b variable appears in the global scope. Why? Look at the sentence var a = b = num, which can be divided into two sentences

var a
a = b = num
// Only declared a

In fact, we only declare a variables, but even b is not declared, so we can know that b is hung on the global window object, which causes the variables to leak to the global.

Venturing from one's thatched hut for the first time

The above is just a simple example. Next, let's look at a complicated example

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

This example is seen in a test question. At first glance, it seems unclear, but it is not difficult to understand one point.

1. a and b refer to a type and both point to an object {x: 1}

2. a. x references the x property of the original object, while a is a reference variable

3. a = {y: 1} simply points the pointer to the reference variable a to another object {y: 1}

4. a. x = a, which 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 don't understand, don't worry, we will dissect the javascript engine below to make you understand clearly

Dismember an ox as skillfully as a butcher

How the engine works: When the engine parses javascript expressions, it will perform LHS queries and RHS queries (see "javascript you don't know" for details), which I understand as LHS (assignment) and RHS (lookup).

Below, with the above example, let's demonstrate the workflow of the engine under 1

var a = {x: 1}
//  Engine: I'm going to check a Variable LHS (Assignment), the content is {x: 1}
//  Scope:   Just made a statement a Variables, here you are. 
var b = a
//  Engine:   I'm going to be right a Variable RHS (Find) 
//  Scope:   You just gave it LHS Yes, here you are 
//  Engine:   I'm going to be right b Variable LHS (Assignment), with the content of a Object pointed to by variable 
//  Scope: Just declared b Variables, here you are. 
a.x = a = {y: 1}
//  Engine: I'm going to check a Go on LHS( Assignment ) The content is another 1 Objects {y : 1}
//  Scope: Yes, here you are, but it seems that there are other commands, so don't assign values yet. 
//  Engine:   Yes, under 1 Step I still need to be right a.x  Go on LHS (Assignment), the content is to be changed a Variable 
//  Scope:   Yes, a Objects pointed to by variables are x Property, but immediately a It changed, but it doesn't matter, b Variable also points to that object. After assignment, you can use b Variable refers to an old object. 
//  Engine: Got it. I'll put it first a Variable is assigned to 1 A new object, and then put the original a Object of the object pointed to by the variable x Property is assigned to   New a . 
a.x // undefined
//  Engine:   I need to get a Object of the object pointed to by the variable x Attribute 
//  Scope:   You just changed a The direction of, now a Points to an object that no longer exists x Attribute 
b.x // {y: 1}
//  Engine:   I need to get b Object of the object pointed to by the variable x Attribute 
//  Scope:   You want to get your old date x Attribute, here you are, but you have changed the value before, now b.x The value of is a Gets or sets the value of the new object to point to. 

The above is my understanding, there is no authoritative certification. Refer to "javascript You Don't Know" for more details on the execution process, and point out if there is an error in this section.

2. + + Operator

The + + operator is the most commonly used operator, which is not very strange, but for beginners, do you really know him?

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

Before + + and after + +, 1 is the value before the return expression self-increment and 1 is the value before the return expression self-increment. We can break down the two and look at the next process.

b = a++
//  Equivalent to  ...
b = a
a = a + 1
//.........................
b = ++ a
//  Equivalent to  ...
a = a + 1
b = a

It's just a question of operation sequence, which may be easy to understand, but there is also a pit, as follows.

A few days ago, a person asked: What is 1 + +? Answer: 2

It is estimated that many people's first reaction is 2, but this is a big mistake! Then why is it not equal to 2? In fact, 1 + + is an error and is not a legal expression for the following reasons:

1 ++
//  Equivalent to 
1 = 1 + 1
//  Engine pair  1  Go on LHS (Assignment), the scope finds that it is an illegal variable, so it will report an error   Invalid left value. 

3. Wrap objects

When we use strings to get lengths, method interceptions, etc., have you ever wondered: A literal value is just a value, why does it have method attributes, which should not be available to objects? It is indeed unique to objects, but when the expression is executed, a wrapper object is produced. Maybe you have seen this knowledge point and can skip it.

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

We define an str string with a length of 5, but we can't get it by adding an attribute aaa, which needs to be solved by the declaration period of the wrapper object: the declaration period of the wrapper object only exists in one expression

var str = 'hello'
str.length
//  Equivalent to 
new String(str).length
str.aaa = 5
// Equivalent to 
new String(str).aaa = 5
str.aaa
//  Equivalent to 
new String(str).aaa

That is to say, every time the str attribute is used, it is first wrapped into an String object, and after the operation, the object is released. It can be seen that the above two str. aaa are different objects, so the second time to obtain the aaa attribute is of course gone. I don't know the object that can be packaged by js under Baidu 1, and I 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 block of memory. Through the change of code, the pointer's pointing will change accordingly. js is also one.

In our writing code, we must remember the difference between reference type variables and literal variables, and they have different uses.

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a //  Report an error 
b // 10
//  We don't have global variables defined b

0

This is an example in "javascript Advanced Programming". We pass an object global to setColor function, and do the above operation internally. We print out global. color is blue, why not red? This is the result of the reference type.

1. The global variable is a reference type that points to an object,

2. Pass it into the setColor function, and obj references the object pointed to by global (hereinafter referred to as globalObj)

3. Assign globalObj an color attribute as an blue string, then global. color is blue

4. Point obj to another new object, localObj, so that obj is disconnected from global.

5. Assign localObj. color to 'red'

As you can see, we did not assign 'red' to the color of the global object, and 'red' was assigned to the color attribute of another object.

Conclusion: Reference type passing refers to two variables pointing to the same object, while literal quantity passing is only value assignment passing. We can pass the reference type to the function to change, but we can't change the literal value passed in the function.

5. & & And

I believe everyone knows the basic application of the two, and most of them are used for if judgment, such as:

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a //  Report an error 
b // 10
//  We don't have global variables defined b

1

Their usage is not limited to judging the left and right sides & & And relationships, and can also be used to provide code quality

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a //  Report an error 
b // 10
//  We don't have global variables defined b

2

Simply judging obj. info. user will report an error and cause the program to terminate, but the following judgment will make the code robust and less prone to crash.

Key points: & & And does not return true and false, it returns the value of the variable that terminates the expression.

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

& & And, & & Priority is greater than.

& & Operator, if the left side is false, returns the left value, otherwise, always returns the right value

Operator, if the left is true, returns the left value, otherwise, always returns the right value.

End

javascript Basis This chapter is briefly introduced here, the content is not comprehensive, please forgive me. If there are any errors, please point them out. . . .