10 kesilapan biasa dalam JavaScript

Jika anda menghadapinya buat kali pertama, ramai orang akan menganggap bahawa js sangat mudah. Malah, bagi ramai jurutera berpengalaman, atau pun pemula, hampir tiada halangan untuk melaksanakan fungsi js asas. Tetapi fungsi sebenar JS lebih pelbagai dan kompleks daripada yang dibayangkan oleh ramai orang. Banyak peraturan terperinci JavaScript akan menyebabkan banyak pepijat yang tidak dijangka muncul pada halaman web anda Memahami pepijat ini sangat penting untuk menjadi pembangun JS yang berpengalaman.

Kesilapan Biasa 1: Rujukan yang salah bagi kata kunci ini

Saya pernah mendengar seorang pelawak berkata: "Saya tidak pernah di sini kerana saya tidak Adakah anda tahu di mana ini ialah, adakah ia di tempat lain selain daripada di sana? Ini merujuk kepada apa? Adakah ia mempunyai maksud yang sama seperti ini dalam bahasa Inggeris pertuturan harian?

Memandangkan pengaturcaraan js terus menjadi lebih kompleks dan berfungsi dalam beberapa tahun kebelakangan ini, semakin banyak garis panduan dalaman dan rujukan dalaman secara beransur-ansur kepada struktur program

Mari kita lihat perenggan ini bersama-sama Kod:

Game.prototype.restart = function () {  this.clearLocalStorage(); 
  this.timer = setTimeout(function(){   this.clearBoard();    }, 0);
 };

Menjalankan kod di atas akan mengakibatkan ralat berikut:

Uncaught TypeError: undefined is not a function Kenapa ni? Seruan untuk ini berkait rapat dengan persekitaran di mana ia berada. Sebab ralat di atas berlaku adalah kerana apabila anda memanggil fungsi setTimeout(), anda sebenarnya memanggil window.setTimeout() Oleh itu, fungsi yang ditakrifkan dalam setTimeout() sebenarnya ditakrifkan dalam konteks tetingkap(). ) kaedah fungsi dalam tetingkap.

Dua penyelesaian disediakan di bawah.

Pertama

kaedah yang agak mudah dan langsung ialah menyimpan ini dalam pembolehubah supaya ia boleh diwarisi dalam persekitaran yang berbeza:

Game.prototype.restart = function () {  this.clearLocalStorage(); 
var self = this;
this.timer = setTimeout(function(){   self.clearBoard();}, 0); };

Yang kedua kaedah

ialah menggunakan kaedah bind(), tetapi ini lebih rumit daripada yang sebelumnya.

Game.prototype.restart = function () {  this.clearLocalStorage(); 
this.timer = setTimeout(this.reset.bind(this), 0); };   
Game.prototype.reset = function(){   this.clearBoard();};

Dalam contoh di atas, kedua-dua ini merujuk kepada Game.prototype.

Kesilapan Biasa 2: Salah Tanggapan tentang Kitaran Hayat Bahasa Pengaturcaraan Tradisional

Satu lagi kesilapan biasa ialah berfikir dari segi JS dengan pemikiran bahasa pengaturcaraan yang lain , terdapat juga kitaran hidup. Sila lihat kod berikut:

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

Jika anda berpendapat bahawa ralat tidak ditentukan pasti akan dilaporkan semasa menjalankan console.log(), maka anda silap sama sekali. Saya akan memberitahu anda sebenarnya ia kembali 10.

Sudah tentu, dalam banyak bahasa lain, apabila menemui kod sedemikian, ralat pasti akan dilaporkan. Kerana saya jelas telah melebihi kitaran hayatnya. Hayat pembolehubah yang ditakrifkan dalam untuk hujung selepas gelung tamat. Tetapi dalam js, kehidupan i akan diteruskan. Fenomena ini dipanggil pengangkat berubah-ubah.

Dan jika kita ingin melaksanakan pembolehubah dengan kitaran hayat dalam modul logik tertentu seperti bahasa lain, kita boleh menggunakan kata kunci let.

Kesilapan Biasa Tiga: Kebocoran Memori

Kebocoran memori hampir merupakan masalah yang tidak dapat dielakkan dalam pengaturcaraan js. Jika anda tidak berhati-hati, pelbagai kebocoran memori pasti akan berlaku semasa proses pemeriksaan akhir. Mari berikan contoh di bawah:

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);

Jika anda menjalankan kod di atas, anda akan mendapati bahawa anda telah menyebabkan sejumlah besar kebocoran memori, membocorkan 1M memori sesaat , hanya Bergantung pada GC (pengumpul sampah) tidak dapat membantu anda. Berdasarkan kod di atas, nampaknya longstr tidak dikitar semula setiap kali replaceThing dipanggil. kenapa ni?

Setiap struktur theThing mengandungi senarai struktur longstr. Setiap saat apabila kita memanggil replaceThing, ia akan menghantar penunjuk semasa kepada priorityThing Tetapi di sini kita juga akan melihat bahawa tidak ada masalah, kerana priorityThing akan menyahsekat penunjuk fungsi terakhir setiap kali sebelum menerima Tugasan yang baru. Dan semua ini berlaku dalam badan fungsi replaceThing Menurut akal, apabila badan fungsi tamat, pembolehubah tempatan dalam fungsi juga akan dikitar semula oleh GC, jadi tidak akan ada masalah kebocoran memori, tetapi mengapa? kesilapan di atas?

Ini kerana longstr ditakrifkan dalam penutupan, dan ia dirujuk oleh penutupan lain js menetapkan bahawa apabila pembolehubah luaran kepada penutupan diperkenalkan dalam penutupan, apabila penutupan Objek ini tidak boleh dikumpul (. GC) pada penghujungnya.

Kesilapan Biasa 4: Operator Perbandingan

Tempat yang sesuai dalam JavaScript ialah ia boleh memaksa pembolehubah hasil setiap operasi perbandingan ditukar kepada jenis Boolean. Tetapi dari perspektif lain, kadangkala ia juga membawa banyak kesulitan kepada kita Contoh berikut ialah beberapa contoh kod yang telah mengganggu ramai pengaturcara:

最后两行的代码虽然条件判断为空（经常会被人误认为转化为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”的优势：

1. 让Debug更加容易：在正常模式下很多错误都会被忽视掉，“strict mode”模式会让Debug极致更加严谨。

2. 防止默认的全局变量：在正常模式下，给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下，我们取消了这个默认机制。

3. 取消this的默认转换：在正常模式下，给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下，我们取消了这个默认机制。

4. 防止重复的变量声明和参数声明：在strict模式下进行重复的变量声明会被抱错，如(e.g., var object = {foo: "bar", foo: "baz"};) 同时，在函数声明中重复使用同一个参数名称也会报错，如 (e.g., function foo(val1, val2, val1){}),

5. 让eval()函数更加安全。

6. 当遇到无效的delete指令的事后报错：delete指令不能对类中未有的属性执行，在正常情况下这种情况只是默默地忽视掉，而在strict模式是会报错的。

正如和其他的技术语言一样，你对JavaScript了解的的越深，知道它是如何运作，为什么这样运作，你才会熟练地掌握并且运用这门语言。相反地，如果你缺少对JS模式的认知的话，你就会碰上很多的问题。了解JS的一些细节上的语法或者功能将会有助于你提高编程的效率，减少变成中遇到的问题。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程