JavaScript 地雷部分與實作建議:JavaScript 是一個很容易寫出很難除錯的程式語言;遵循一些準則可以減低這些困擾。
JavaScript 地雷部分與實作建議@denkeni
View Slide
Published in2008
Declare all variables at top and don't code in global scope!Use "var"
num = 1; (function () { num = 2; })(); console.log(num);Bad example 1
window.num = 1; (function () { window.num = 2; })(); console.log(window.num); // 2What actually happened
num = 1; (function () { var num = 2; })(); console.log(num); // 1Better example 1use "var"
(function () { var num = 1; (function () { var num = 2; })(); console.log(num); // 1 })();Even Better example 1don't code in global scope
Bad example 2(function () { var num = 1; (function () { console.log(num); // 1; function has closure. num = 2; console.log(num); // 2 })(); console.log(num); // 2 })();
Bad example 2(function () { var num = 1; (function () { console.log(num); var num = 2; // no warning here! console.log(num); })(); console.log(num); })();
Bad example 2(function () { var num = 1; (function () { console.log(num); // undefined var num = 2; console.log(num); // 2 })(); console.log(num); // 1 })();var num
What actually happened(function () { var num = 1; (function () { ; console.log(num); // undefined num = 2; console.log(num); // 2 })(); console.log(num); // 1 })();var num
Better example 2(function () { var num = 1; (function () { console.log(num); // 1 var num2 = 2; console.log(num2); // 2 })(); console.log(num); // 1 })();
Even Better example 2(function () { var num = 1; (function () { var num2 = 2; console.log(num); // 1 console.log(num2); // 2 })(); console.log(num); // 1 })();
Even Better example 3(function () { var num = 1; (function () { var num = 2; console.log(num); // 2 })(); console.log(num); // 1 })();
• There's no block scope! • Use functional scope to avoid globalOnly Functional Scope
(因為很重要所以要說三次)Javascript 只有 Functional Scope! Javascript 只有 Functional Scope! Javascript 只有 Functional Scope!
(function () { var num = 1; console.log(num); // 1 if (true) { var num = 2; console.log(num); // 2 } console.log(num); // 2 })();Bad example
(function () { var num = 1; console.log(num); // 1 if (true) { (function () { var num = 2; console.log(num); // 2 })(); } console.log(num); // 1 })();Better example
"==" does not check type!Use "==="
var num = 0; if (num) { console.log("1st"); } num = num + 1; if (num) { console.log("2nd"); } num = num - 1; if (num) { console.log("3rd") }Result: "2nd"
var num = "0"; // mistake here if (num) { console.log("1st"); } num = num + 1; if (num) { console.log("2nd"); } num = num - 1; if (num) { console.log("3rd") }
var num = "0"; // console.log(num) -> "0" if (num) { console.log("1st"); } num = num + 1; // console.log(num) -> "01" if (num) { console.log("2nd"); } num = num - 1; // console.log(num) -> 0 if (num) { console.log("3rd") }Result: "1st" "2nd"
var num = "0"; // typeof(num) === "string" if (num) { console.log("1st"); } num = num + 1; // typeof(num) === "string" if (num) { console.log("2nd"); } num = num - 1; // typeof(num) === "number" if (num) { console.log("3rd") }Result: "1st" "2nd"
var num = "0"; if (num != 0) { console.log("1st"); } num = num + 1; if (num != 0) { console.log("2nd"); } num = num - 1; if (num != 0) { console.log("3rd") }Result: "2nd"
var num = "0"; if (num != 0) { console.log("1st"); } num = num + 1; if (num != 0) { console.log("2nd"); } num = num - 1; if (num != 0) { console.log("3rd") }Result: "2nd"Bad example
0.1 * 0.2 !== 0.02(純小數乘以純小數)
var num = 0.1 * 2; if (num === 0.2) { console.log("Correct."); // Correct. } else { console.log(num); }
var num = 0.1 * 0.2; if (num === 0.02) { console.log("Correct."); } else { console.log(num); // 0.020000000000000004 }Bad example
var resultString = (0.1 * 0.2).toFixed(2); if (resultString === "0.02") { console.log("Correct."); // Correct. } else { console.log(num); }Better example
Sum up• Use "var" and declare all variables at top • Only functional scope • Use "===" • 0.1*0.2 !==0.3 so use .toFixed()