JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
更新時(shí)間:2008年05月16日 22:46:21 作者:
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問(wèn)題,但注意一下,會(huì)使您的編程輕松些,即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。
1. 最后一個(gè)逗號(hào)
如這段代碼,注意最后一個(gè)逗號(hào),按語(yǔ)言學(xué)角度來(lái)說(shuō)應(yīng)該是不錯(cuò)的(python的類(lèi)似數(shù)據(jù)類(lèi)型辭典dictionary就允許如此)。IE會(huì)報(bào)語(yǔ)法錯(cuò)誤,但語(yǔ)焉不詳,你只能用人眼從幾千行代碼中掃描。
<script>
var theObj = {
city : "Boston",
state : "MA",
}
</script>
2. this的引用會(huì)改變
如這段代碼:
<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules";
this.ClickHandler = function() {
alert(this.alertMessage );
}
}();
document.getElementById(”theText”).onclick = MyObject.ClickHandler
</script>
并不如你所愿,答案并不是”JavaScript rules”。在執(zhí)行MyObject.ClickHandler時(shí),代碼中紅色這行,this的引用實(shí)際上指向的是document.getElementById("theText")的引用。可以這么解決:
<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick = MyObject.OnClick
</script>
實(shí)質(zhì)上,這就是JavaScript作用域的問(wèn)題。如果你看過(guò),你會(huì)發(fā)現(xiàn)解決方案不止一種。
3. 標(biāo)識(shí)盜賊
在JavaScript中不要使用跟HTML的id一樣的變量名。如下代碼:
<input type="button" id="TheButton">
<script>
TheButton = get("TheButton");
</script>
IE會(huì)報(bào)對(duì)象未定義的錯(cuò)誤。我只能說(shuō):IE sucks.
4. 字符串只替換第一個(gè)匹配
如下代碼:
<script>
var fileName = "This is a title".replace(" ","_");
</script>
而實(shí)際上,結(jié)果是”This_is a title“. 在JavaScript中,String.replace的第一個(gè)參數(shù)應(yīng)該是正則表達(dá)式。所以,正確的做法是這樣:
var fileName = "This is a title".replace(/ /g,"_");
如這段代碼,注意最后一個(gè)逗號(hào),按語(yǔ)言學(xué)角度來(lái)說(shuō)應(yīng)該是不錯(cuò)的(python的類(lèi)似數(shù)據(jù)類(lèi)型辭典dictionary就允許如此)。IE會(huì)報(bào)語(yǔ)法錯(cuò)誤,但語(yǔ)焉不詳,你只能用人眼從幾千行代碼中掃描。
<script>
var theObj = {
city : "Boston",
state : "MA",
}
</script>
2. this的引用會(huì)改變
如這段代碼:
<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules";
this.ClickHandler = function() {
alert(this.alertMessage );
}
}();
document.getElementById(”theText”).onclick = MyObject.ClickHandler
</script>
并不如你所愿,答案并不是”JavaScript rules”。在執(zhí)行MyObject.ClickHandler時(shí),代碼中紅色這行,this的引用實(shí)際上指向的是document.getElementById("theText")的引用。可以這么解決:
<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick = MyObject.OnClick
</script>
實(shí)質(zhì)上,這就是JavaScript作用域的問(wèn)題。如果你看過(guò),你會(huì)發(fā)現(xiàn)解決方案不止一種。
3. 標(biāo)識(shí)盜賊
在JavaScript中不要使用跟HTML的id一樣的變量名。如下代碼:
<input type="button" id="TheButton">
<script>
TheButton = get("TheButton");
</script>
IE會(huì)報(bào)對(duì)象未定義的錯(cuò)誤。我只能說(shuō):IE sucks.
4. 字符串只替換第一個(gè)匹配
如下代碼:
<script>
var fileName = "This is a title".replace(" ","_");
</script>
而實(shí)際上,結(jié)果是”This_is a title“. 在JavaScript中,String.replace的第一個(gè)參數(shù)應(yīng)該是正則表達(dá)式。所以,正確的做法是這樣:
var fileName = "This is a title".replace(/ /g,"_");
您可能感興趣的文章:
- JavaScript中for..in循環(huán)陷阱介紹
- 比較搞笑的js陷阱題
- JavaScript性能陷阱小結(jié)(附實(shí)例說(shuō)明)
- Javascript 陷阱 window全局對(duì)象
- JavaScript 存在陷阱 刪除某一區(qū)域所有節(jié)點(diǎn)
- 幫助避免錯(cuò)誤的Javascript陷阱清單
- 錯(cuò)誤剖析之JavaScript的9個(gè)陷阱及評(píng)點(diǎn)
- JavaScript中常見(jiàn)陷阱小結(jié)
- 在JavaScript中遭遇級(jí)聯(lián)表達(dá)式陷阱
- JavaScript中常見(jiàn)的八個(gè)陷阱總結(jié)
相關(guān)文章
JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效
這篇文章主要為大家詳細(xì)介紹了JS與JQuery分別實(shí)現(xiàn)淘寶五星好評(píng)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
JS常見(jiàn)創(chuàng)建類(lèi)的方法小結(jié)【工廠(chǎng)方式,構(gòu)造器方式,原型方式,聯(lián)合方式等】
這篇文章主要介紹了JS常見(jiàn)創(chuàng)建類(lèi)的方法,結(jié)合實(shí)例形式總結(jié)分析了工廠(chǎng)方式,構(gòu)造器方式,原型方式,聯(lián)合方式等常見(jiàn)的javascript創(chuàng)建類(lèi)的常用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
微信小程序基礎(chǔ)教程之worker線(xiàn)程的使用方法
這篇文章主要給大家介紹了關(guān)于微信小程序基礎(chǔ)教程之worker線(xiàn)程的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
購(gòu)物車(chē)前端開(kāi)發(fā)(jQuery和bootstrap3)
針對(duì)購(gòu)物車(chē)的操作,進(jìn)行產(chǎn)品數(shù)量的增加減少,刪除購(gòu)物車(chē)中產(chǎn)品項(xiàng),本文使用JQuery1.11和bootstrap3進(jìn)行購(gòu)物車(chē)開(kāi)發(fā),感興趣的小伙伴們2016-08-08
淺析BootStrap中Modal(模態(tài)框)使用心得
Bootstrap Modals(模態(tài)框)是使用定制的 Jquery 插件創(chuàng)建的。本文給大家分享BootStrap中Modal(模態(tài)框)使用心得,一起看看吧2016-12-12

