Erläuterung der Grundkenntnisse von Javascript

Dieser Artikel eignet sich für JavaScript-Neulinge oder Studenten, die sich schon eine Weile mit Frontend beschäftigt haben und kein klares Konzept von JS haben~~.

Zweck des Lernens

Dieser Artikel richtet sich an Schüler mit schwachen JavaScript-Grundlagen, um ihr Verständnis von JavaScript zu vertiefen.

In diesem Artikel werden die folgenden Fallstricke für Anfänger beim Einstieg in das Sprechen von JavaScript beschrieben (von denen einige in den meisten Sprachen üblich sind)

Der Inhalt der Erklärung lautet wie folgt:

1. Warten

2. i++

4. Referenztyp

5 >Erklärungsteil

1 Literale und keine Literale. Gilt für Referenztypen.

Die oben genannten Codes sind übliche aufeinanderfolgende Zuweisungen. Wenn es sich jedoch um Referenztypen handelt, ist dies nicht möglich nacheinander vergeben.

Darüber hinaus gibt es eine große Lücke bei der kontinuierlichen Zuweisung, nämlich dass die Variable an die globale Welt weitergegeben wird. Wir haben sie im obigen Code nicht durchgesickert, aber schauen Sie sich den folgenden Code an:

Wie Sie sehen können, erscheint die Variable b im globalen Gültigkeitsbereich. Schauen Sie sich den Satz an: var a = b = num

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

Wir haben tatsächlich nur die Variable a deklariert und das nachfolgende b wurde nicht deklariert. Daraus können wir erkennen, dass b am globalen Fensterobjekt hängt, was dazu führt, dass die Variable an die Welt weitergegeben wird.

Neuling

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

Das obige ist nur ein einfaches Beispiel. Schauen wir uns als nächstes ein komplexeres Beispiel an.

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

Dieses Beispiel wurde in einer Testfrage gesehen erster Blick Auf den ersten Blick scheint es unklar, aber es ist überhaupt nicht schwer zu verstehen.

1. a und b beziehen sich auf Typen, die beide auf ein Objekt verweisen

3. a = {y: 1} zeigt nur den Zeiger der Referenzvariablen a auf ein anderes Objekt {y: 1}

4, ersteres repräsentiert immer noch das Original Das x-Attribut des Objekts, das heißt das x-Attribut des Objekts, auf das b verwiesen wird

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

5 Die Zuweisung ist abgeschlossen.

Vielleicht haben Sie es noch nicht verstanden, keine Sorge, im Folgenden werden wir die Javascript-Engine analysieren, damit Sie es klar verstehen können

庖丁解牛

Die Funktionsprinzip der Engine: Die Engine analysiert. Bei der Verwendung von JavaScript-Ausdrücken werden LHS-Abfragen und RHS-Abfragen ausgeführt (Einzelheiten finden Sie unter „Javascript, das Sie nicht kennen“). .

Als nächstes demonstrieren wir den Arbeitsablauf der Engine anhand des obigen Beispiels

2 ++-Operator

Der ++-Operator wird am häufigsten verwendet Tatsächlich ist daran nichts sehr Seltsames, aber verstehen Sie ihn als Neuling wirklich?

Vor ++ und Post ++ besteht einer darin, den Wert zurückzugeben, nachdem der Ausdruck erhöht wurde, und der andere besteht darin, den Wert zurückzugeben, bevor der Ausdruck erhöht wurde. Wir können die beiden aufschlüsseln und einen Blick auf den Prozess werfen.

Es ist nur eine Frage der Reihenfolge der Operationen. Das mag leicht zu verstehen sein, aber es gibt auch eine Falle, wie folgt.

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指向的新对象的值。

Vor ein paar Tagen fragte jemand: Was ist 1++? Antwort: 2

Ich denke, die erste Reaktion vieler Menschen ist 2, aber das ist völlig falsch! Warum ist es dann nicht gleich 2? Tatsächlich meldet 1++ einen Fehler und ist kein zulässiger Ausdruck. Die Gründe sind wie folgt:

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

3 Wir verwenden Zeichenfolgen, um die Länge zu ermitteln, mithilfe von Methoden abzufangen usw. Haben Sie jemals darüber nachgedacht: Ein Literalwert ist nur ein Wert. Warum hat er Methodenattribute, die nicht nur Objekte haben? Zwar existieren nur Objekte, aber wenn der Ausdruck ausgeführt wird, wird ein Verpackungsobjekt generiert. Vielleicht haben Sie diesen Wissenspunkt gelesen und können ihn überspringen.

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

Wir definieren einen str-String und erhalten die Länge 5, aber wir fügen selbst ein Attribut aaa hinzu und können es nicht erhalten. Dies muss durch den Deklarationszyklus des Verpackungsobjekts gelöst werden: den Deklarationszyklus des Verpackungsobjekts ist nur in einem Ausdruck vorhanden

Mit anderen Worten, jedes Mal, wenn das str-Attribut verwendet wird, wird es zunächst in ein String-Objekt gepackt. Nach Abschluss des Vorgangs wird das Objekt freigegeben Es ist ersichtlich, dass die beiden oben genannten str.aaa Es handelt sich um ein anderes Objekt, daher wird das aaa-Attribut beim zweiten Mal natürlich nicht abgerufen. Wenn Sie es nicht verstehen, können Sie das js-Verpackungsobjekt auf Baidu nach detaillierten Antworten durchsuchen.

4. Referenztypen

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

Die meisten Sprachen haben Referenztypen, bei denen es sich tatsächlich um Objektvariablen handelt. In der C-Sprache verstehen wir den Referenztyp als Zeiger. Dieser Zeiger zeigt dynamisch auf einen Teil des Speichers. Durch Änderungen im Code ändert sich die Zeigerrichtung entsprechend. Das Gleiche gilt für js.

Wenn wir Code schreiben, müssen wir uns an den Unterschied zwischen Referenztypvariablen und Literalvariablen erinnern. Sie haben unterschiedliche Verwendungszwecke.

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

Dies ist ein Beispiel in „Javascript Advanced Programming“. Wir übergeben ein Objekt global an die setColor-Funktion und führen die oben genannten Operationen intern aus. Wir geben aus, dass global.color rot ist ? Hier ist das Ergebnis des Referenztyps.

var str = 'hello'
str.length
// 等价于
new String(str).length
str.aaa = 5
//等价于
new String(str).aaa = 5
str.aaa
// 等价于
new String(str).aaa

1. Die globale Variable ist ein Referenztyp, der auf ein Objekt zeigt,

2. Bei der Übergabe an die setColor-Funktion bezieht sich obj auf das Objekt, auf das global verwiesen wird (im Folgenden bezeichnet). als globalObj)

3. Weisen Sie globalObj ein Farbattribut als blaue Zeichenfolge zu, dann ist global.color blau

4. Zeigen Sie obj auf ein anderes neues Objekt, localObj, sodass obj nicht mit diesem verknüpft ist global.

5. Weisen Sie „localObj.color“ „rot“ zu

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

可以看出，我们并没有对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中文网！