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