[総括貼付]10個のJavaScriptの中で犯しやすい小さなエラー
今日では、JavaScriptはウェブページ編集の中心となっています.特に過去数年間、インターネットはSPAの開発、図形処理、インタラクティブなどの面で大量のJSライブラリの出現を目撃しました.
初めて付き合ったら、jsは簡単だと思う人が多いです.確かに経験のあるエンジニアや初心者にとっては基本的なJs機能の実現にはほとんど支障がありません.しかし、JSの本当の機能は多くの人が思っているより多様で複雑です.JavaScriptの多くの細部規定により、あなたのホームページには予想外のバグがたくさん出現します.これらのバグを把握することは、経験のあるJS開発者になるために重要です.
よくある誤りの一つ:thisキーワードの不正確な引用
あるコメディアンから聞いたことがあります.
私はここにいたことがありません.ここがどこか分かりません.そこ以外のところですか?
この言葉は、jsの開発で開発者がthisのキーワードを使っていることの誤りを多かれ少なかれ暗喩しています.Thisとは何ですか?日常英語の話し言葉の中のthisと同じ意味ですか?
ここ数年、jsプログラミングが複雑化し、機能が多様化するにつれて、一つのプログラム構造の内部ガイド、引用もだんだん多くなってきました.
このコードを一緒に見に行きましょう.
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(function(){ this.clearBoard(); }, 0);
};
：
Uncaught TypeError: undefined is not a function
？this 。 ， setTimeout() , window.setTimeout(). ， setTimeout() window ， window clearBoard() 。
。 ， this ， ：
Game.prototype.restart = function () { this.clearLocalStorage();
var self = this;
this.timer = setTimeout(function(){ self.clearBoard();}, 0); };
bind() ， ， bind() ： https://msdn.microsoft.com/zh-cn/library/ff841995
Game.prototype.restart = function () { this.clearLocalStorage();
this.timer = setTimeout(this.reset.bind(this), 0); };
Game.prototype.reset = function(){ this.clearBoard();};
， this Game.prototype。
：
， ， JS ， 。 ：
for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);
console.log() undefined ， 。 10 。
， ， ， 。 i 。 for ， 。 js ，i 。 variable hoisting。
， let 。
：
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);
， ， 1M ， GC（ ） 。 ， longstr replaceThing 。 ？
theThing longstr 。 replaceThing, priorThing. ， priorThing 。 replaceThing ， ， GC ， ， ？
longstr ， ，js ， ， （GC）。 JS http://javascript.info/tutorial/memory-leaks#memory-management-in-java...
:
JavaScript ， 。 ， ， ：
console.log(false == '0');
console.log(null == undefined);
console.log(" \t\r
" == 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 div = document.getElementsByTagName("my_div");
var fragment = document.createDocumentFragment();
for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true));
DOM 。 ， 。
： 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 。
：
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)
： setTimeout setInterval
， 。 。 ， ， ， 。 。
setInterval("logTime()", 1000);
setTimeout("logMessage('" + msgValue + "')", 1000);
：
setInterval(logTime, 1000);
setTimeout(function() {
logMessage(msgValue); }, 1000);
： “strict mode”
“strict mode” ， 。 ， ， 。
“strict mode” ：
-
Debug ： ，“strict mode” Debug 。
-
： ， 。 strict ， 。
-
this ： ， this null undefined 。 strict ， 。
-
： strict ， (e.g., var object = {foo: "bar", foo: "baz"};) ， ， (e.g., function foo(val1, val2, val1){}),
-
eval() 。
-
delete ：delete ， ， strict 。
， JavaScript ， ， ， 。 ， JS ， 。 JS ， 。
： http://www.toptal.com/javascript/10-most-common-javascript-mistakes
： http://1ke.co/course/136?utm_source=segment&utm_medium=1&utm_c...
142