今日、JavaScriptはWebページ編集の中核となっています。特にここ数年、インターネットでは、SPA 開発、グラフィックス処理、インタラクションなどで多数の JS ライブラリが登場しています。
初めて扱う場合、多くの人は js がとても簡単だと思うでしょう。実際、多くの経験豊富なエンジニア、あるいは初心者であっても、基本的な js 関数を実装するのにほとんど障害はありません。しかし、JS の実際の機能は、多くの人が想像しているよりも多様で複雑です。 JavaScript の多くの詳細な規制により、Web ページに多くの予期せぬバグが発生することがあります。これらのバグを理解することは、経験豊富な JS 開発者になるために非常に重要です。
あるコメディアンが次のように言うのを聞いたことがあります。
」 この文は、多かれ少なかれ、開発者による JS 開発におけるこのキーワードの使用に対する誤解を比喩しています。これは何を指しますか?日常的に話される英語でもこれと同じ意味でしょうか？ 近年のjsプログラミングの継続的な複雑化と機能の多様化に伴い、プログラム構造に対する内部ガイドラインや参照が徐々に増えてきています
このコードを一緒に見てみましょう:
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(function(){ this.clearBoard(); }, 0);
};上記を実行してください。コードにエラーが表示されます:
Uncaught TypeError: undefined is not a function
これはなぜですか?この呼び出しは、それが置かれている環境と密接に関係しています。上記のエラーが発生する理由は、setTimeout() 関数を呼び出すときに実際には window.setTimeout() を呼び出しているためです。そのため、setTimeout() で定義された関数は実際にはウィンドウ コンテキストで定義されていません。 ) ウィンドウ内の関数メソッド。
以下に2つの解決策を示します。最初の比較的単純で直接的な方法は、これを変数に保存して、さまざまな環境背景で継承できるようにすることです:
Game.prototype.restart = function () { this.clearLocalStorage();
var self = this;
this.timer = setTimeout(function(){ self.clearBoard();}, 0); };2 番目の方法は、bind() メソッドを使用することですが、これは前の方法よりも複雑ですbind() に詳しくない学生は、Microsoft 公式 Web サイトでその使用法を確認できます: http://www.php.cn/
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(this.reset.bind(this), 0); };
Game.prototype.reset = function(){ this.clearBoard();};上記の例では、両方とも Game.prototype を参照しています。
よくある間違い 2: 従来のプログラミング言語のライフサイクルについての誤解
もう 1 つの犯しやすい間違いは、JS には他のプログラミング言語の考え方でライフサイクルがあると考えることです。以下のコードを見てください:
for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);もちろん、他の多くの言語では、そのようなコードに遭遇すると、間違いなくエラーが報告されます。明らかにライフサイクルを超えているからです。 for で定義された変数の寿命は、ループの終了後に終了します。でもjsではiの人生は続きます。この現象を変数巻き上げといいます。
そして、他の言語と同様に、特定の論理モジュールでライフサイクルを持つ変数を実装したい場合は、 let キーワードを使用できます。
よくある間違い 3: メモリ リーク
メモリ リークは、js プログラミングではほぼ避けられない問題です。特に注意しないと、最終検査工程でさまざまなメモリリークが必ず発生します。以下に例を示します。
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);各 theThing 構造には、longstr 構造のリストが含まれています。 replaceThing を呼び出すと、毎秒現在のポインタが priorityThing に渡されます。ただし、priorityThing は新しい割り当てを受け入れる前に毎回最後の関数のポインタのブロックを解除するため、問題がないこともわかります。そして、これはすべて replaceThing 関数本体で発生します。常識によれば、関数本体が終了すると、関数内のローカル変数も GC によってリサイクルされるため、メモリ リークの問題は発生しません。上記のエラーは？
これは、longstr がクロージャで定義されており、他のクロージャから参照されているためです。JS では、クロージャの外部の変数がクロージャに導入されると、クロージャの終了時にこのオブジェクトが使用されると規定されています。 (GC)。 JS のメモリ リークの問題については、http://www.php.cn/
よくある間違い 4: 比較演算子
JavaScript のより便利な場所は、各比較演算子を与えることができることです。結果変数は強制されます。ブール型に変換されます。しかし、別の観点から見ると、多くの不便をもたらすこともあります。次の例は、多くのプログラマーを悩ませているコード例です。
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
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元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来，再把它们全部添加上去就会高效很多。
请大家看以下代码：
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值了。
很大一部分的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'
我们来看下面一段代码:
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)首先我们要声明，用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说，当你用字符串的时候，它会被传进构造函数，并且重新调用另一个函数。这样会拖慢程序的进度。
setInterval("logTime()", 1000);
setTimeout("logMessage('" + msgValue + "')", 1000);另一种方法是直接将函数作为参数传递进去：
setInterval(logTime, 1000);
setTimeout(function() {
logMessage(msgValue); }, 1000);“strict mode” 是一种更加严格的代码检查机制，并且会让你的代码更加安全。当然，不选择这个模式并不意味着是一个错误，但是使用这个模式可以确保你的代码更加准确无误。
下面我们总结几条“strict mode”的优势：
1. デバッグを容易にする: 通常モードでは多くのエラーが無視され、「厳密モード」モードではデバッグがより厳密になります。
2. デフォルトのグローバル変数を防止する: 通常モードでは、宣言された変数に名前を付けると、その変数が自動的にグローバル変数として設定されます。厳密モードでは、このデフォルトのメカニズムをキャンセルします。
3. this のデフォルトの変換をキャンセルします。 通常モードでは、this キーワードを null または unknown に指定すると、自動的にグローバルに変換されます。厳密モードでは、このデフォルトのメカニズムをキャンセルします。
4. 重複した変数宣言とパラメータ宣言を防ぐ: strict モードで重複した変数宣言を行うと、同時に (例: var object = {foo: "bar", foo: "baz"};) などのエラーがスローされます。 time 、関数宣言で同じパラメータ名を再利用すると、(例: function foo(val1, val2, val1){}) などのエラーが発生します
5. eval() 関数をより安全にします。
6. 無効な削除命令に遭遇すると、後でエラーが報告されます: クラスに存在しない属性に対して削除命令は実行できません。 通常の状況では、この状況は単に無視されますが、厳密モードでは、エラーが報告されます。
他の技術言語と同様に、JavaScript の仕組みとその理由を理解すればするほど、この言語を習得し、上手に使用できるようになります。逆に、JS パターンの知識が不足している場合は、多くの問題が発生します。 JS の詳細な構文や機能を理解すると、プログラミングの効率が向上し、プログラミング中に発生する問題が軽減されます。
上記は JavaScript でよくある 10 個の間違いです。いくつ犯したことがありますか?関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
