Zehn häufige Fehler in JavaScript, wie viele haben Sie gemacht?

Vorwort

Heute ist JavaScript zum Kern der Webbearbeitung geworden. Insbesondere in den letzten Jahren ist im Internet eine große Anzahl von JS-Bibliotheken in den Bereichen SPA-Entwicklung, Grafikverarbeitung, Interaktion usw. entstanden.

Wenn Sie sich zum ersten Mal damit befassen, werden viele Leute denken, dass js sehr einfach ist. Tatsächlich gibt es für viele erfahrene Ingenieure oder sogar Anfänger fast kein Hindernis, grundlegende js-Funktionen zu implementieren. Doch die wahren Funktionen von JS sind vielfältiger und komplexer, als sich viele Menschen vorstellen. Viele detaillierte JavaScript-Vorschriften führen dazu, dass auf Ihren Webseiten viele unerwartete Fehler auftreten. Um ein erfahrener JS-Entwickler zu werden, ist es sehr wichtig, diese Fehler zu verstehen.

Häufiger Fehler eins: falscher Verweis auf dieses Schlüsselwort

Ich hörte einmal einen Komiker sagen:

„Das habe ich Ich war noch nie hier, weil ich nicht weiß, wo das ist. Ist es irgendwo anders als dort? Worauf bezieht sich das? Hat es im alltäglichen Englisch die gleiche Bedeutung?

Da die js-Programmierung in den letzten Jahren immer komplizierter und funktionaler geworden ist, gibt es immer mehr interne Richtlinien und Verweise auf eine Programmstruktur.

Schauen wir uns gemeinsam diesen Absatz an :

Das Ausführen des obigen Codes führt zu folgendem Fehler:

Game.prototype.restart = function () {   this.clearLocalStorage(); 

    this.timer = setTimeout(function(){     this.clearBoard();        }, 0);

 };

Warum ist das so? Der Ruf dazu hängt eng mit der Umgebung zusammen, in der er sich befindet. Der Grund, warum der obige Fehler auftritt, liegt darin, dass Sie beim Aufrufen der Funktion setTimeout() tatsächlich window.setTimeout() aufrufen. Daher ist die in setTimeout() definierte Funktion tatsächlich im Fensterkontext definiert. ) Funktionsmethode im Fenster.

Uncaught TypeError: undefined is not a function

Nachfolgend finden Sie zwei Lösungen. Die erste relativ einfache und direkte Methode besteht darin, dies in einer Variablen zu speichern, damit es in verschiedenen Umgebungshintergründen vererbt werden kann:

Die zweite Methode ist die Verwendung der bind()-Methode, die jedoch komplizierter ist als das vorherige. Für Studenten, die mit bind() nicht vertraut sind, können Sie die Verwendung auf der offiziellen Website von Microsoft überprüfen: http://www.php.cn/

Game.prototype.restart = function () {   this.clearLocalStorage();  

    var self = this;

    this.timer = setTimeout(function(){     self.clearBoard();}, 0); };

Im obigen Beispiel: beides bezieht sich auf Game.prototype.

Game.prototype.restart = function () {   this.clearLocalStorage();  

    this.timer = setTimeout(this.reset.bind(this), 0); };      

Game.prototype.reset = function(){     this.clearBoard();};

Häufiger Fehler 2: Missverständnis des Lebenszyklus traditioneller Programmiersprachen

Ein weiterer Fehler, der leicht gemacht werden kann, ist zu glauben, dass es in JS einen Lebenszyklus mit dem Denken anderer gibt Programmiersprachen. Bitte schauen Sie sich den folgenden Code an:

Wenn Sie denken, dass beim Ausführen von console.log() definitiv ein undefinierter Fehler gemeldet wird, dann liegen Sie völlig falsch. Ich sage Ihnen, es gibt tatsächlich 10 zurück.

for (var i = 0; i < 10; i++) {   /* ... */ } console.log(i);

Natürlich wird in vielen anderen Sprachen beim Auftreffen auf solchen Code definitiv ein Fehler gemeldet. Weil ich offensichtlich seinen Lebenszyklus überschritten habe. Die Lebensdauer der in for definierten Variablen endet nach dem Ende der Schleife. Aber in js wird das Leben von i weitergehen. Dieses Phänomen wird als variables Heben bezeichnet.

Und wenn wir Variablen mit einem Lebenszyklus in einem bestimmten logischen Modul wie in anderen Sprachen implementieren möchten, können wir das Schlüsselwort let verwenden.

Häufiger Fehler Drei: Speicherverlust

Speicherverlust ist fast ein unvermeidbares Problem bei der JS-Programmierung. Wenn Sie nicht besonders vorsichtig sind, kommt es bei der Endkontrolle mit Sicherheit zu verschiedenen Speicherlecks. Lassen Sie uns unten ein Beispiel geben:

Wenn Sie den obigen Code ausführen, werden Sie feststellen, dass Sie eine große Anzahl von Speicherlecks verursacht haben und 1 MB Speicher pro Sekunde verloren haben, was offensichtlich auf GC (Garbage Collector) zurückzuführen ist ) ) kann Ihnen nicht weiterhelfen. Dem obigen Code nach zu urteilen, scheint longstr nicht jedes Mal recycelt zu werden, wenn replaceThing aufgerufen wird. Warum ist das so?

var theThing = null; 

var replaceThing = function () {   

        var priorThing = theThing; 

        var unused = function () { 

                  if (priorThing) {       console.log("hi");     }   

       }; 

       theThing = {     longStr: new Array(1000000).join('*'),  // 

                  someMethod: function () {       console.log(someMessage);     }   
       }; 
};   
setInterval(replaceThing, 1000);

Jede theThing-Struktur enthält eine Liste von Longstr-Strukturen. Wenn wir „replaceThing“ aufrufen, wird jede Sekunde der aktuelle Zeiger an „priorityThing“ übergeben. Aber auch hier werden wir sehen, dass es kein Problem gibt, da „priorityThing“ jedes Mal zuerst den Zeiger der letzten Funktion entsperrt, bevor die neue Zuweisung angenommen wird. Und das alles geschieht im Funktionskörper replaceThing, wenn der Funktionskörper endet, werden auch die lokalen Variablen in der Funktion von GC recycelt, sodass es kein Problem mit Speicherverlusten gibt, aber warum? der obige Fehler?

Dies liegt daran, dass longstr in einem Abschluss definiert ist und von anderen Abschlüssen darauf verwiesen wird. JS legt fest, dass dieses Objekt nicht durch Müll gesammelt werden kann, wenn eine Variable außerhalb des Abschlusses in den Abschluss eingeführt wird. GC) am Ende. Informationen zum Problem des Speicherverlusts in JS finden Sie unter http://www.php.cn/

Häufiger Fehler vier: Vergleichsoperator

Eine der bequemeren Stellen in JavaScript ist diese Each Die Ergebnisvariable in einer Vergleichsoperation kann zwangsweise in einen booleschen Typ konvertiert werden. Aber aus einer anderen Perspektive bringt es uns manchmal auch große Unannehmlichkeiten. Die folgenden Beispiele sind einige Codebeispiele, die viele Programmierer gestört haben:

console.log(false == '0'); 

console.log(null == undefined); 

console.log(" \t\r\n" == 0); 

console.log('' == 0);  // And these do too! 

if ({}) // ... 

if ([]) // ...

　　最后两行的代码虽然条件判断为空（经常会被人误认为转化为false），但是其实不管是{ }还是[ ]都是一个实体类，而任何的类其实都会转化为true。就像这些例子所展示的那样，其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=， 以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样，只不过他们不会发生类型强制转换。另外需要注意的一点是，当任何值与 NaN 比较的时候，甚至包括他自己，结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:

console.log(NaN == NaN);    // false 

console.log(NaN === NaN);   // false 

console.log(isNaN(NaN));    // true

　　常见错误五：低效的DOM操作

　　js中的DOM基本操作非常简单，但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments ：

var p = document.getElementsByTagName("my_p");  

var fragment = document.createDocumentFragment(); 

 for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } p.appendChild(fragment.cloneNode(true));

　　直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。

　　常见错误6:在for循环中的不正确函数调用

　　请大家看以下代码：

var elements = document.getElementsByTagName('input');

var n = elements.length; 

for (var i = 0; i < n; i++) {     

elements[i].onclick = function() {         

console.log("This is element #" + i);     }; }

　　运行以上代码，如果页面上有10个按钮的话，点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候，for循环早已执行完毕，i的值也已经从0变成了。

　　我们可以通过下面这段代码来实现真正正确的效果：

var elements = document.getElementsByTagName('input'); 

var n = elements.length; 

var makeHandler = function(num) {  // outer function

      return function() { 

console.log("This is element #" + num);      }; }; 

for (var i = 0; i < n; i++) 

{     elements[i].onclick = makeHandler(i+1); }

　　在这个版本的代码中， makeHandler 在每回循环的时候都会被立即执行，把i＋1传递给变量num。外面的函数返回里面的函数，而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。

　　常见错误7:原型继承问题

　　很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：

BaseObject = function(name) {     

if(typeof name !== "undefined") 

{         this.name = name;     } 

else 

{         this.name = 'default'     } };

　　这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用 ‘default’:

var firstObj = new BaseObject(); 

var secondObj = new BaseObject('unique');  

console.log(firstObj.name);  // -> 结果是'default' 

console.log(secondObj.name); // -> 结果是 'unique'

　　但是如果我们执行delete语句呢:

delete secondObj.name;

　　我们会得到:

console.log(secondObj.name); // -> 结果是 'undefined'

　　但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:

BaseObject = function (name) 

{     if(typeof name !== "undefined") 

{         this.name = name;     } };  

BaseObject.prototype.name = 'default';

　　在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为 default。相同地，如果name 属性被从BaseObject移出，系统将会自动寻找原型链，并且获得 'default'值：

 var thirdObj = new BaseObject('unique'); 

 console.log(thirdObj.name);  

 delete thirdObj.name;

 console.log(thirdObj.name);  // -> 结果是 'default'

　　常见错误8:为实例方法创建错误的指引

　　我们来看下面一段代码:

var MyObject = function() {} 

 MyObject.prototype.whoAmI = function() {     

console.log(this === window ? "window" : "MyObj"); }; 

 var obj = new MyObject();

　　现在为了方便起见，我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():

var whoAmI = obj.whoAmI;

　　接下来为了确保一切都如我们所预测的进行，我们可以将 whoAmI 打印出来:

console.log(whoAmI);

　　结果是：

function () {     console.log(this === window ? "window" : "MyObj"); }

　　没有错误！

　　但是现在我们来查看一下两种引用的方法：

obj.whoAmI();  // 输出 "MyObj" (as expected) 

whoAmI();      // 输出 "window" (uh-oh!)

　　哪里出错了呢？

　　原理其实和上面的第二个常见错误一样，当我们执行 var whoAmI = obj.whoAmI;的时候，新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj！

　　正确的编码方式应该是：

var MyObject = function() {}  

MyObject.prototype.whoAmI = function() {     

      console.log(this === window ? "window" : "MyObj"); }; 

var obj = new MyObject(); 

obj.w = obj.whoAmI;   // still in the obj namespace  obj.whoAmI();  // 输出 "MyObj" (as expected) 

obj.w();       // 输出 "MyObj" (as expected)

　　常见错误9:用字符串作为setTimeout 或者 setInterval的第一个参数

　　首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。

setInterval("logTime()", 1000); 

setTimeout("logMessage('" + msgValue + "')", 1000);

　　另一种方法是直接将函数作为参数传递进去：

setInterval(logTime, 1000);   

setTimeout(function() { 

logMessage(msgValue); }, 1000);

　　常见错误10:忽略 “strict mode”的作用

 　　“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。

　　下面我们总结几条“strict mode”的优势：

1. Erleichtern Sie das Debuggen: Im normalen Modus werden viele Fehler ignoriert. Der „strenge Modus“ macht das Debuggen strenger.

　2. Standardmäßige globale Variablen verhindern: Im Normalmodus wird die Variable durch Benennen einer deklarierten Variablen automatisch als globale Variable festgelegt. Im strikten Modus heben wir diesen Standardmechanismus auf.

3. Brechen Sie die Standardkonvertierung von this ab: Wenn Sie im normalen Modus das Schlüsselwort this auf null oder undefiniert setzen, wird es automatisch in global konvertiert. Im strikten Modus heben wir diesen Standardmechanismus auf.

4. Verhindern Sie doppelte Variablendeklarationen und Parameterdeklarationen: Doppelte Variablendeklarationen im strikten Modus werden in einen Fehler geworfen, wie zum Beispiel (z. B. var object = {foo: "bar", foo: "baz" }; ) Gleichzeitig wird ein Fehler gemeldet, wenn derselbe Parametername in der Funktionsdeklaration wiederverwendet wird, z. B. (z. B. Funktion foo(val1, val2, val1){}),

5. Machen Die Funktion eval() bietet mehr Sicherheit.

6. Wenn eine ungültige Löschanweisung auftritt, wird anschließend ein Fehler gemeldet: Die Löschanweisung kann nicht für Attribute ausgeführt werden, die in der Klasse nicht vorhanden sind. Unter normalen Umständen wird diese Situation einfach ignoriert Im strengen Modus wird ein Fehler gemeldet.

Fazit

Je besser Sie JavaScript verstehen, wie es funktioniert und warum es funktioniert, desto besser werden Sie die Sprache beherrschen und geschickt einsetzen. Im Gegenteil, wenn Sie keine Kenntnisse über JS-Muster haben, werden Sie auf viele Probleme stoßen. Das Verständnis einiger detaillierter Syntax oder Funktionen von JS wird Ihnen helfen, Ihre Programmiereffizienz zu verbessern und die Probleme zu reduzieren, auf die Sie beim Programmieren stoßen.

Die oben genannten zehn häufigen Fehler in JavaScript. Wie viele Fehler haben Sie gemacht? Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!