Explanation of basic knowledge of javascript

This article is suitable for JavaScript novices or students who have studied front-end for a while and have no clear concept of JS~~.

Learning purpose

This article is aimed at students with weak javascript foundation and can deepen their understanding of javascript.

This article will talk about the following pitfalls for beginners when starting to speak JavaScript (some of which are common in most languages)

The content of the explanation is as follows:

1. Waiting

2. i++

3. Packaging object

4. Reference type

5. && and ||

Explanation part

1. Even and so on

Little test

Even and so on are common expressions, but not all situations are suitable for even and so on. Even and so on are only applicable to literals and not literals. Applies to reference types.

// 字面量连等得到想要的结果
var a,b;
a = b = 2;
a // 2
b // 2
// 引用类型连等不可预测
var arr1, arr2;
arr1 = arr2 = []
arr1[0] = 10
arr2[0] // 10
//引用类型连等使得两个引用指向一个对象，操作其中一个，两个值都变

The above codes are common consecutive assignments. Sometimes we need two variables to be assigned to the same value at the same time. This is how we operate. However, if they are reference types, they cannot be assigned consecutively.

In addition, there will be a big loophole in continuous assignment, that is, the variable will be leaked to the global world. We did not leak it in the above code, but look at the following code:

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a // 报错
b // 10
// 我们并不没有定义全局变量b

Yes See, after we executed the fn function, the b variable appeared in the global scope. Why is this? Look at the sentence var a = b = num. This sentence can be divided into two sentences.

var a
a = b = num
//只声明了a

In fact, we only declared the a variable, and the consecutive b was not declared. From this, we can know that b is hung on the global window object, causing the variable to leak to the global world.

fledgling

The above is just a simple example, let’s look at a more complicated example

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

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

1. a and b refer to types, both pointing to an object {x: 1}

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

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

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

5. The assignment is completed.

Maybe you haven’t understood it yet, don’t worry, below we will dissect the javascript engine so that you can understand it clearly

Paoding Jieniu

The working principle of the engine: The engine is parsing When using JavaScript expressions, LHS query and RHS query will be performed (see "Javascript You Don't Know" for details). I understand them as LHS (assignment) and RHS (search).

Next, let’s demonstrate the workflow of the engine based on the above example

var a = {x: 1}
// 引擎：我将要对a变量LHS（赋值），内容是{x: 1}
// 作用域： 刚声明了a变量，给你。
var b = a
// 引擎： 我将要对a变量RHS（查找）
// 作用域： 你刚刚给它LHS了，给你吧
// 引擎： 我将要对b变量LHS（赋值），内容为a变量指向的对象
// 作用域：刚声明了b变量，给你。
a.x = a = {y: 1}
// 引擎：我将要对a进行LHS(赋值)，内容是另一个对象{y：1}
// 作用域：可以，给你，但好像还有其他命令，先不要赋值。
// 引擎： 是的，下一步我还需要对a.x 进行LHS（赋值），内容是将要改变的a变量
// 作用域： 可以，a变量指向的对象有x属性，不过马上a就改变了，不过没关系，b变量也指向那个对象，赋值完后，你可以用b变量引用旧对象。
// 引擎：了解了，我先把a变量赋值为一个新的对象，然后把原来的a变量指向的对象的x属性赋值为 新a。
a.x // undefined
// 引擎： 我需要拿到a变量指向的对象的x属性
// 作用域： 你刚刚改变了a的指向，现在的a指向的对象已经没有x属性了
b.x // {y: 1}
// 引擎： 我需要拿到b变量指向的对象的x属性
// 作用域： 你是想拿到你旧对象的x属性吧，给你，不过已经被你在之前改变了值，现在b.x的值就是a指向的新对象的值。

2. ++ operator

The ++ operator is the most commonly used by everyone. In fact, There is nothing very strange about him, but for a novice, do you really understand him?

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

Before ++ and after ++, one is to return the value after the expression is incremented, and the other is to return the value before the expression is incremented. We can break the two down and take a look at the process.

b = a++
// 等价于 ...
b = a
a = a + 1
//.........................
b = ++ a
// 等价于 ...
a = a + 1
b = a

It’s just a matter of the order of operations. This may be easy to understand, but there is also a pitfall, as follows.

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

I guess the first reaction of many people is 2, but this is totally wrong! Then why is it not equal to 2? In fact, 1++ reports an error and is not a legal expression. The reasons are as follows:

1 ++
// 等价于
1 = 1 + 1
// 引擎对 1 进行LHS（赋值），作用域发现他是非法变量，所以会报错 左值无效。

3. Packaging object

We are using a string to obtain the length, When using method interception and other behaviors, have you ever thought: A literal value is just a value. Why does it have method attributes? Isn’t it something that only objects have? It is true that objects only exist, but when the expression is executed, a packaging object is generated. Maybe you have read this knowledge point and can skip it.

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

We define a str string and get the length of 5, but we add an attribute aaa and cannot get it. This needs to be solved by the declaration cycle of the packaging object: the declaration cycle of the packaging object only exists in Within an expression

var str = 'hello'
str.length
// 等价于
new String(str).length
str.aaa = 5
//等价于
new String(str).aaa = 5
str.aaa
// 等价于
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 is completed, the object is released. It can be seen that the above two str.aaa are different objects. , so of course there is no aaa attribute obtained for the second time. If you don’t understand, you can search the js packaging object on Baidu for detailed answers.

4. Reference types

Most languages ​​have reference types, which are actually object variables. In C language, we understand the reference type as a pointer. This pointer dynamically points to a piece of memory. Through changes in the code, the pointer's pointing will change accordingly. The same goes for js.

When we write code, we must remember the difference between reference type variables and literal variables. They have different uses.

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 that global.color is blue, why not red? Here is the result for reference types.

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

2. When passed to the setColor function, obj refers to the object pointed to by global (hereinafter referred to as globalObj)

3. Assign a color attribute to globalObj as a 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’

可以看出，我们并没有对global对象的color进行'red'赋值，'red'赋值给了另一个对象的color属性。

结论：引用类型传递是将两个变量指向同一个对象，而字面量的传递仅仅是值的赋值传递。我们可以将引用类型传递到函数进行改变，不可以在函数内改变传递进来的字面值。

5. && 与 ||

两者的基本运用相信大家都了解，大部分用来if判断，如：

var a = 2;
var b = false
if (a && b) {
 
 alert('best')
}
if (a || b) {
 alret('good')  // 运行
}

他们的用法不局限于判断 左右两边的 && 和 || 关系，还可以用来提供代码的质量

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

如果仅仅判断obj.info.user 会报错造成程序终止，但是下面那样判断就大使得代码健壮，不会那么容易崩溃。

重点： && 和 || 并不会返回true和false，他会返回终止此表达式的那个变量值。

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

&&和||， &&优先级大于||。

&&操作符，如果左边为假，返回左边值，否则，始终返回右边值

||操作符，如果左边为真，返回左边值， 否则，始终返回右边值。

结尾

javascript基础本章简单的介绍在这里，内容并不全面，还请多多见谅。如有错误，请指出。。。。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多javascript基础知识讲解相关文章请关注PHP中文网！