Javascript 學(xué)習(xí)書 推薦
Ø Javascript語法中常見的陷阱
² 區(qū)分大小寫
² 單引號(hào)和雙引號(hào)實(shí)際上是沒有特殊的區(qū)別的,這點(diǎn)我是從看了這本書才開始真正的知道,雖然在以前寫程序時(shí)寫過‘'號(hào)的字符串形式,但是卻沒有先覺性的發(fā)現(xiàn)“哦,原來這樣也可以?!?
另外大多數(shù)情況下還都是用‘'來表示字符串的,因?yàn)閄HTML規(guī)范要求所有XHTML屬性值都用“”括起來。這樣混合代碼時(shí)會(huì)很清晰。
² 換行,千萬不要忽略這一點(diǎn)。因?yàn)槿绻谝粋€(gè)字符串中你用了回車做換行那么對(duì)不起了,瀏覽器會(huì)告訴你我不認(rèn)識(shí)你的字符串。因?yàn)樗鼤?huì)自動(dòng)將回車轉(zhuǎn)換成”;“但是為了解決這個(gè)問題,還好它提供了一個(gè)轉(zhuǎn)義字符作為替代。如下所示:
var='<h2 class=”a”>A list</h2>\
<ol>\
<li class=”a”></li>\
</ol>'
有人會(huì)說可以用加號(hào)的,這些我知道。用加號(hào)作為字符串的操作符。估計(jì)是底層進(jìn)行了+號(hào)的重載(??。?
² 可選的分號(hào)和花括號(hào)
如果你不相信,我告訴你這是可以的??梢哉f這點(diǎn)javascript做的還是比較智能的。但是和前述那本書作者一樣,我想我們做程序員還是規(guī)規(guī)矩矩些比較好。
² 重載
有時(shí)候或許你會(huì)突發(fā)奇想曲做一個(gè)javascript的重載函數(shù),你會(huì)發(fā)現(xiàn)這時(shí)候竟然只有最后一個(gè)可以運(yùn)行,前面的都沒有得到錄用機(jī)會(huì)。這是什么原因呢?
原來,先前的某某已經(jīng)被后面的給替換掉了。也就是通常說的覆蓋。再進(jìn)一步說就是程序只引用作用域鏈中的最后一個(gè)同名函數(shù)。
² 匿名函數(shù)
不得不說這個(gè)家伙很有用。
² 作用域解析和閉包
這個(gè)作用域相信大家都比較熟悉,因?yàn)槊總€(gè)編程語言都有這樣的概念。
而作用域鏈?zhǔn)怯脕砻枋鲆环N路徑的屬于,沿著該路徑可以確定變量的值(或者當(dāng)函數(shù)被調(diào)用時(shí)要使用的方法)
閉包是與作用域相關(guān)的一個(gè)概念,它指的是內(nèi)部函數(shù)即使在外部哈數(shù)執(zhí)行完成并終止以后,仍然可以訪問其外部函數(shù)的屬性。當(dāng)引用一個(gè)變量或方法時(shí),javascript會(huì)沿著由對(duì)象執(zhí)行路徑構(gòu)成的作用域鏈進(jìn)行解析,查找變量最近定義的值。一旦找到,即使用該值。
² 迭代對(duì)象
不要懷疑這用的不好的話,很可能會(huì)產(chǎn)生錯(cuò)誤。不信就看這一個(gè)例子:
var all=document.getElementsByTagName(‘*');
for(i in all){
//對(duì)all[i]元素進(jìn)行操作。
}
由于返回的會(huì)分別等于length、item和namedItem,而這個(gè)很可能會(huì)導(dǎo)致代碼中出現(xiàn)意外錯(cuò)誤。
這時(shí)要做一下處理。用hasOwnProperty進(jìn)行屬性過濾,這個(gè)函數(shù)在對(duì)象的屬性或方法是非繼承的時(shí)返回true。方法如下:
var all=document.getElementsByTagName(‘*');
for(i in all){
if(!all.hasOwnProperty(i)){continue;}
//對(duì)all[i]元素進(jìn)行操作。
}
² 函數(shù)的調(diào)用和引用。
注意了,這是不同的,調(diào)用會(huì)執(zhí)行,引用只會(huì)給變量一個(gè)copy(好像可以這樣理解吧?)
看下這個(gè):
var foo=exampleFunction();
var foo=exampleFunction;
這兩句式不一樣的。前一個(gè)是執(zhí)行exampleFunction這個(gè)函數(shù)并將返回值賦給變量foo,而后一個(gè)卻是將exampleFunction這個(gè)函數(shù)的引用賦給foo。
Ø Javascript對(duì)象
屬性和方法的概念相信大家都曉得。下面講下javascript中的對(duì)象和其中的玄奧妙義(講的跟武俠似的)。
1. 繼承
Javascript的繼承讓我很奇怪,但是想過之后感覺還是有道理的。而且和其他的還是一樣的思想。其實(shí)javascript就是做了一個(gè)復(fù)制的操作。閑話不說看一個(gè)例子相信大家都會(huì)清楚了。
//創(chuàng)建一個(gè)person對(duì)象的實(shí)例
var person={};
person.getName=function(){……};
person.getAge=function(){……};
//創(chuàng)建一個(gè)employee對(duì)象的實(shí)例
var employee={};
employee.getTitle=function(){……};
enployee.getSalary=function(){……};
//從person對(duì)象中繼承方法
employee.getName=person.getName;
employ.getAge=person.getAge;
2. 創(chuàng)建自己的對(duì)象
有兩種方式可以創(chuàng)建自己的對(duì)象:
第一種:var myObject =new Object();
第二種:var myObject={};//是第一種的簡寫形式。實(shí)際上面已經(jīng)用到了。
3. 創(chuàng)建構(gòu)造函數(shù)
第一種:function myConstructor(a){
//代碼
}
不要驚訝,想象前面說的javascript中到處都是對(duì)象,雖然有些夸張。這個(gè)函數(shù)一時(shí)一個(gè)對(duì)象。
第二種:
或許聰明的讀者已經(jīng)猜出來了,就是函數(shù)定義的另外兩種類型:
var myConstructor=function(a){};
第三種也一起寫出來吧:var myConstructor=new Function(‘a(chǎn)',/*某些代碼*/);
不過對(duì)于這種方式,因?yàn)闀?huì)導(dǎo)致性能問題,所以還是用function比較妥當(dāng)。
最后給個(gè)書中的例子:
function myConstructor(message){
alert(message);
this.myMessage=message;
}
var myObject =new myConstructor(‘Instantiating myObject!');
4. 添加靜態(tài)方法
var myObject={};
//添加屬性
myObject.name=”Jeff”;
//添加方法
myObject.alertName=function(){
alert(this.name);
}
//執(zhí)行方法
myObject.alertName();
相信大家都能看明白,不說了。
5. 想原型中添加公有方法
添加公有方法的方式是用prototype,注意這里的prototype可不是那個(gè)js庫。
//創(chuàng)建構(gòu)造函數(shù)
function myConstructor(message){
alert(message);
this.myMessage=message;
}
//添加一個(gè)公有方法
myConstructor.prototype.clearMessage=function(string){
this.myMessage+=''+string;
}
這里面要提的一點(diǎn)是 構(gòu)造函數(shù)中凡是以var開頭的變量全部是私有變量,不是以.號(hào)和prototype添加而是直接寫入構(gòu)造函數(shù)中的為私有函數(shù)。
6. 最后提一下對(duì)象字面量
對(duì)象字面量對(duì)于代碼的重構(gòu),冗余度的減小都很有幫助。所以如果可能的話最好用這種
看下下面的例子:
var myObject={
propertyA:'value',
propertyB:'value',
methodA:function(){}
}
不得不同意作者的觀點(diǎn),這種方式很優(yōu)雅。
怎么樣?是不是對(duì)Javascript中的對(duì)象和陷阱有了一些基本的認(rèn)識(shí)?希望這篇文章對(duì)你有所幫助。
相關(guān)文章
Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例
這篇文章主要介紹了Javascript設(shè)計(jì)模式之觀察者模式的多個(gè)實(shí)現(xiàn)版本實(shí)例,本文給出3種實(shí)現(xiàn)版本代碼,同時(shí)給出了Jquery實(shí)現(xiàn)版本,需要的朋友可以參考下2015-03-03微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解
這篇文章主要介紹了微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)贊業(yè)務(wù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系
比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系...2007-08-08js 失去焦點(diǎn)時(shí)關(guān)閉層實(shí)現(xiàn)代碼
失去焦點(diǎn)時(shí)關(guān)閉層實(shí)現(xiàn)代碼。大家可以參考下。2009-05-05微信小程序解除10個(gè)請(qǐng)求并發(fā)限制
這篇文章主要介紹了微信小程序解除10個(gè)請(qǐng)求并發(fā)限制,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作示例【測試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作,涉及javascript簡單json數(shù)組遍歷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12