JavaScript內(nèi)核之基本概念
數(shù)據(jù)類型
有程序設(shè)計(jì)經(jīng)驗(yàn)的讀者肯定知道,在C或者Java這樣的語言中,數(shù)據(jù)是有類型的,比如用以表示用戶名的屬性是字符串,而一個(gè)雇員的年齡則是一個(gè)數(shù)字,表示UI上的一個(gè)開關(guān)按鈕的數(shù)據(jù)模型則為布爾值等等,對數(shù)字可能還可以細(xì)分為浮點(diǎn)數(shù),整型數(shù),整型數(shù)又可能分為長整型和短整型,總而言之,它們都表示語言中的數(shù)據(jù)的值的類型。
JavaScript中的數(shù)據(jù)類型分為兩種:基本數(shù)據(jù)類型和對象類型,其中對象類型包含對象,數(shù)組,以及函數(shù)(事實(shí)上,函數(shù),數(shù)組等也都是對象,這個(gè)在后邊的章節(jié)詳述)。
1.1.1 基本數(shù)據(jù)類型
在JavaScript中,包含三種基本的數(shù)據(jù)類型,字符串(String),數(shù)值(Number),布爾值(boolean),下面是一些簡單的例子:
var i = 10;//整型數(shù)
var f = 2.3;//浮點(diǎn)數(shù)
var b = true;//布爾值
我們可以分別查看變量的值及變量的類型:
print(str);
print(i);
print(f);
print(b);
print(typeof str);
print(typeof i);
print(typeof f);
print(typeof b);
注意,在此處使用的print()函數(shù)為rhino解釋器的頂層對象的方法,可以用來打印字符串,通常情況下,在客戶端,程序員多使用alert()進(jìn)行類似的動作,alert()是瀏覽器中JavaScript解釋器的頂層對象(window)的一個(gè)方法。
Hello, world
10
2.3
true
string
number
number
Boolean
在JavaScript中,所有的數(shù)字,不論是整型浮點(diǎn),都屬于“數(shù)字”基本類型。typeof是一個(gè)一元的操作符,在本章的另外一個(gè)小節(jié)會專門講到。
1.1.2 對象類型
這里提到的對象不是對象本身,而是指一種類型,我們在第三章會對對象進(jìn)行詳細(xì)的討論,此處的對象包括,對象(屬性的集合,即鍵值的散列表),數(shù)組(有序的列表),函數(shù)(包含可執(zhí)行的代碼)。
對象類型是一種復(fù)合的數(shù)據(jù)類型,其基本元素由基本數(shù)據(jù)類型組成,當(dāng)然不限于基本類型,比如對象類型中的值可以是其他的對象類型實(shí)例,我們通過例子來說明:
var obj = new Object();
obj.str = str;
obj.num = 2.3;
var array = new Array("foo", "bar", "zoo");
var func = function(){
print("I am a function here");
}
可以看到,對象具有屬性,如obj.str, obj.num,這些屬性的值可以是基本類型,事實(shí)上還可以更復(fù)雜,我們來看看他們的類型:
print(typeof obj);
print(typeof array);
print(typeof func);
//將打印出
object
object
function
讀者可能會對print(typeof array)打印出object感到奇怪,事實(shí)上,對象和數(shù)組的界限并不那么明顯(事實(shí)上它們是屬于同一類型的),但是他們的行為卻非常不同,本書的后續(xù)章節(jié)將兩個(gè)重要的數(shù)據(jù)類型做了分別介紹。
2.1.3 兩者之間的轉(zhuǎn)換
類似與Java中基本數(shù)據(jù)類型的自動裝箱拆箱,JavaScript也有類似的動作,基本數(shù)據(jù)類型在做一些運(yùn)算時(shí),會臨時(shí)包裝一個(gè)對象,做完運(yùn)算后,又自動釋放該對象。我們可以通過幾個(gè)例子來說明:
print(str.length);//打印17
str為一個(gè)字符串,通過typeof運(yùn)算符可知其type為”string”,而:
print(typeof str2);
可知,str2的type為”object”,即這兩者并不相同,那么為什么可以使用str.length來的到str的長度呢?事實(shí)上,當(dāng)使用str.length時(shí),JavaScript會自動包裝一個(gè)臨時(shí)的String對象,內(nèi)容為str的內(nèi)容,然后獲取該對象的length屬性,最后,這個(gè)臨時(shí)的對象將被釋放。
而將對象轉(zhuǎn)換為基本類型則是通過這樣的方式:通過調(diào)用對象的valueOf()方法來取得對象的值,如果和上下文的類型匹配,則使用該值。如果valueOf取不到值的話,則需要調(diào)用對象的toString()方法,而如果上下文為數(shù)值型,則又需要將此字符串轉(zhuǎn)換為數(shù)值。由于JavaScript是弱類型的,所以JavaScript引擎需要根據(jù)上下文來“猜測”對象的類型,這就使得JavaScript的效率比編譯型的語言要差一些。
valueOf()的作用是,將一個(gè)對象的值轉(zhuǎn)換成一種合乎上下文需求的基本類型,toString()則名副其實(shí),可以打印出對象對應(yīng)的字符串,當(dāng)然前提是你已經(jīng)“重載”了Object的toString()方法。
事實(shí)上,這種轉(zhuǎn)換規(guī)則會導(dǎo)致很多的問題,比如,所有的非空對象,在布爾值環(huán)境下,都會被轉(zhuǎn)成true,比如:
function convertTest(){
if(new Boolean(false) && new Object() &&
new String("") && new Array()){
print("convert to boolean")
}
}
convertTest();//convert to Boolean
初學(xué)者容易被JavaScript中的類型轉(zhuǎn)換規(guī)則搞暈掉,很多情況下會覺得那種寫法看著非常別扭,其實(shí)只需要掌握了規(guī)則,這些古怪的寫法會大大的提高代碼的性能,我們通過例子來學(xué)習(xí)這些規(guī)則:
var x = 3;
var y = x + "2";// => 32
var z = x + 2;// => 5
print(y);
print(z);
通常可以在JS代碼中發(fā)現(xiàn)這樣的代碼:
//do something...
}else{
datamodel.item = new Item();
}
這種寫法事實(shí)上具有更深層次的含義:
應(yīng)該注意到,datamodel.item是一個(gè)對象(字符串,數(shù)字等),而if需要一個(gè)boolean型的表達(dá)式,所以這里進(jìn)行了類型轉(zhuǎn)換。在JavaScript中,如果上下文需要boolean型的值,則引擎會自動將對象轉(zhuǎn)換為boolean類型。轉(zhuǎn)換規(guī)則為,如果該對象非空,則轉(zhuǎn)換為true,否則為false.因此我們可以采取這種簡寫的形式。
而在傳統(tǒng)的編程語言(強(qiáng)類型)中,我們則需要:
//do something...
}else{
datamodel.item = new Item();
}
2.1.4類型的判斷
前面講到JavaScript特性的時(shí)候,我們說過,JavaScript是一個(gè)弱類型的語言,但是有時(shí)我們需要知道變量在運(yùn)行時(shí)的類型,比如,一個(gè)函數(shù)的參數(shù)預(yù)期為另一個(gè)函數(shù):
return handle(message);
}
當(dāng)調(diào)用handleMessage的函數(shù)傳遞的handle不是一個(gè)函數(shù)則JavaScript引擎會報(bào)錯(cuò),因此我們有必要在調(diào)用之前進(jìn)行判斷:
if(typeof handle == "function"){
return handle(message);
}else{
throw new Error("the 2nd argument should be a function");
}
}
但是,typeof并不總是有效的,比如下面這種情況:
var array = ["one", "two", "three", "four"];
print(typeof obj);//object
print(typeof array); //object
運(yùn)行結(jié)果顯示,對象obj和數(shù)組array的typeof值均為”object”,這樣我們就無法準(zhǔn)確判斷了,這時(shí)候,可以通過調(diào)用instanceof來進(jìn)行進(jìn)一步的判斷:
print(obj instanceof Array);//false
print(array instanceof Array);//true
第一行代碼返回false,第二行則返回true。因此,我們可以將typeof操作符和instanceof操作符結(jié)合起來進(jìn)行判斷。
2.2 變量
變量,即通過一個(gè)名字將一個(gè)值關(guān)聯(lián)起來,以后通過變量就可以引用到該值,比如:
var num = 2.345;
當(dāng)我們下一次要引用”Hello, Wrold”這個(gè)串進(jìn)行某項(xiàng)操作時(shí),我們只需要使用變量str即可,同樣,我們可以用10*num來表示10*2.345。變量的作用就是將值“存儲”在這個(gè)變量上。
2.2.1基本類型和引用類型
在上一小節(jié),我們介紹了JavaScript中的數(shù)據(jù)類型,其中基本類型如數(shù)字,布爾值,它們在內(nèi)存中都有固定的大小,我們通過變量來直接訪問基本類型的數(shù)據(jù)。而對于引用類型,如對象,數(shù)組和函數(shù),由于它們的大小在原則上是不受任何限制的,故我們通過對其引用的訪問來訪問它們本身,引用本身是一個(gè)地址,即指向真實(shí)存儲復(fù)雜對象的位置。
基本類型和引用類型的區(qū)別是比較明顯的,我們來看幾個(gè)例子:
var y = x;//數(shù)字y,基本類型
print(x);
print(y);
x = 2;//修改x的值
print(x);//x的值變?yōu)?
print(y);//y的值不會變化
運(yùn)行結(jié)果如下:
1
1
2
1
這樣的運(yùn)行結(jié)果應(yīng)該在你的意料之內(nèi),沒有什么特別之處,我們再來看看引用類型的例子,由于數(shù)組的長度非固定,可以動態(tài)增刪,因此數(shù)組為引用類型:
var arrayRef = array;
array.push(6);
print(arrayRef);
引用指向的是地址,也就是說,引用不會指向引用本身,而是指向該引用所對應(yīng)的實(shí)際對象。因此通過修改array指向的數(shù)組,則arrayRef指向的是同一個(gè)對象,因此運(yùn)行效果如下:
1,2,3,4,5,6
2.2.2變量的作用域
變量被定義的區(qū)域即為其作用域,全局變量具有全局作用域;局部變量,比如聲明在函數(shù)內(nèi)部的變量則具有局部作用域,在函數(shù)的外部是不能直接訪問的。比如:
function func(){
var variable = "in";
print(variable);//打印”in”
}
func();
print(variable);//打印”out”
應(yīng)該注意的是,在函數(shù)內(nèi)var關(guān)鍵字是必須的,如果使用了變量而沒有寫var關(guān)鍵字,則默認(rèn)的操作是對全局對象的,比如:
function func(){
variable = "in";//注意此variable前沒有var關(guān)鍵字
print(variable);
}
func();
print(variable);//全局的變量variable被修改
由于函數(shù)func中使用variable而沒有關(guān)鍵字var,則默認(rèn)是對全局對象variable屬性做的操作(修改variable的值為in),因此此段代碼會打?。?
in
in
2.3運(yùn)算符
運(yùn)算符,通常是容易被忽略的一個(gè)內(nèi)容,但是一些比較古怪的語法現(xiàn)象仍然可能需要用到運(yùn)算符的結(jié)合率或者其作用來進(jìn)行解釋,JavaScript中,運(yùn)算符是一定需要注意的地方,有很多具有JS編程經(jīng)驗(yàn)的人仍然免不了被搞得暈頭轉(zhuǎn)向。
我們在這一節(jié)主要講解這樣幾個(gè)運(yùn)算符:
2.3.1中括號運(yùn)算符([])
[]運(yùn)算符可用在數(shù)組對象和對象上,從數(shù)組中按下標(biāo)取值:
array[0]
而[]同樣可以作用于對象,一般而言,對象中的屬性的值是通過點(diǎn)(.)運(yùn)算符來取值,如:
field : "self",
printInfo : function(){
print(this.field);
}
}
object.field;
object.printInfo();
但是考慮到這樣一種情況,我們在遍歷一個(gè)對象的時(shí)候,對其中的屬性的鍵(key)是一無所知的,我們怎么通過點(diǎn)(.)來訪問呢?這時(shí)候我們就可以使用[]運(yùn)算符:
print(key + ":" + object[key]);
}
運(yùn)行結(jié)果如下:
field:slef
printInfo:function (){
print(this.field);
}
2.3.2點(diǎn)運(yùn)算符(.)
點(diǎn)運(yùn)算符的左邊為一個(gè)對象(屬性的集合),右邊為屬性名,應(yīng)該注意的是右邊的值除了作為左邊的對象的屬性外,同時(shí)還可能是它自己的右邊的值的對象:
field : "self",
printInfo : function(){
print(this.field);
},
outter:{
inner : "inner text",
printInnerText : function(){
print(this.inner);
}
}
}
object.outter.printInnerText();
這個(gè)例子中,outter作為object的屬性,同時(shí)又是printInnerText()的對象。
2.3.3 == 和 === 以及 != 和 !==
運(yùn)算符==讀作相等,而運(yùn)算符===則讀作等同。這兩種運(yùn)算符操作都是在JavaScript代碼中經(jīng)常見到的,但是意義則不完全相同,簡而言之,相等操作符會對兩邊的操作數(shù)做類型轉(zhuǎn)換,而等同則不會。我們還是通過例子來說明:
print(1 == true);
print(1 === true);
print("" == false);
print("" === false);
print(null == undefined);
print(null === undefined);
運(yùn)行結(jié)果如下:
false
true
false
true
false
相等和等同運(yùn)算符的規(guī)則分別如下:
相等運(yùn)算符
如果操作數(shù)具有相同的類型,則判斷其等同性,如果兩個(gè)操作數(shù)的值相等,則返回true(相等),否則返回false(不相等).
如果操作數(shù)的類型不同,則按照這樣的情況來判斷:
◆ null和undefined相等
◆ 其中一個(gè)是數(shù)字,另一個(gè)是字符串,則將字符串轉(zhuǎn)換為數(shù)字,在做比較
◆ 其中一個(gè)是true,先轉(zhuǎn)換成1(false則轉(zhuǎn)換為0)在做比較
◆ 如果一個(gè)值是對象,另一個(gè)是數(shù)字/字符串,則將對象轉(zhuǎn)換為原始值(通過toString()或者valueOf()方法)
◆ 其他情況,則直接返回false
等同運(yùn)算符
如果操作數(shù)的類型不同,則不進(jìn)行值的判斷,直接返回false
如果操作數(shù)的類型相同,分下列情況來判斷:
◆ 都是數(shù)字的情況,如果值相同,則兩者等同(有一個(gè)例外,就是NaN,NaN與其本身也不相等),否則不等同
◆ 都是字符串的情況,與其他程序設(shè)計(jì)語言一樣,如果串的值不等,則不等同,否則等同
◆ 都是布爾值,且值均為true/false,則等同,否則不等同
◆ 如果兩個(gè)操作數(shù)引用同一個(gè)對象(數(shù)組,函數(shù)),則兩者完全等同,否則不等同
◆ 如果兩個(gè)操作數(shù)均為null/undefined,則等同,否則不等同
比如:
id : "self",
name : "object"
};
var oa = obj;
var ob = obj;
print(oa == ob);
print(oa === ob);
會返回:
true
true
再來看一個(gè)對象的例子:
id : "self",
name : "object",
toString : function(){
return "object 1";
}
}
var obj2 = "object 1";
print(obj1 == obj2);
print(obj1 === obj2);
返回值為:
true
false
obj1是一個(gè)對象,而obj2是一個(gè)結(jié)構(gòu)與之完全不同的字符串,而如果用相等操作符來判斷,則兩者是完全相同的,因?yàn)閛bj1重載了頂層對象的toString()方法。
而!=不等和!==不等同,則與==/!==相反。因此,在JavaScript中,使用相等/等同,不等/不等同的時(shí)候,一定要注意類型的轉(zhuǎn)換,這里推薦使用等同/不等同來進(jìn)行判斷,這樣可以避免一些難以調(diào)試的bug。
- JavaScript基本概念初級講解論壇貼的學(xué)習(xí)記錄
- javascript,jquery閉包概念分析
- javascript學(xué)習(xí)筆記(二) js一些基本概念
- JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
- JavaScript的作用域和塊級作用域概念理解
- JavaScript 基本概念
- javascript中幾個(gè)容易混淆的概念總結(jié)
- javascript相關(guān)事件的幾個(gè)概念
- 通過實(shí)例理解javascript中沒有函數(shù)重載的概念
- 深入理解JavaScript編程中的原型概念
- 深入剖析JavaScript編程中的對象概念
- 帶領(lǐng)大家學(xué)習(xí)javascript基礎(chǔ)篇(一)之基本概念
相關(guān)文章
深入理解JavaScript系列(45):代碼復(fù)用模式(避免篇)詳解
這篇文章主要介紹了深入理解JavaScript系列(45):代碼復(fù)用模式(避免篇)詳解,本文講解了默認(rèn)模式、借用構(gòu)造函數(shù)、借用構(gòu)造函數(shù)并設(shè)置原型、共享原型、臨時(shí)構(gòu)造函數(shù)、klass等內(nèi)容,需要的朋友可以參考下2015-03-03javascript彈出窗口 window.open使用方法以及參數(shù)說明分析篇
window.open是網(wǎng)頁中經(jīng)常遇到的彈出窗口代碼,不是網(wǎng)絡(luò)中比較反感的那類彈出代碼。用于新頁面?zhèn)髦?,回傳等?/div> 2009-12-12Javascript全局變量var與不var的區(qū)別深入解析
這篇文章主要介紹了Javascript全局變量var與不var的區(qū)別。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JavaScript onclick 和 click 的區(qū)別詳解
onclick是綁定事件,click本身是方法作用是觸發(fā)onclick事件,只要執(zhí)行了元素的click()方法,本片文章講的很詳細(xì),大家可以看看,希望能夠給你帶來幫助2021-10-10在firefox和Chrome下關(guān)閉瀏覽器窗口無效的解決方法
首先IE是可以通過window.close()來關(guān)閉瀏覽器窗口的,但是在firefox和Chrome下是無效的,但是可以通過一些特殊的手段進(jìn)行關(guān)閉2014-01-01JavaScript高級程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記8 js函數(shù)(中)
接著看函數(shù)——這個(gè)具有魔幻色彩的對象。在上篇文章中說函數(shù)內(nèi)部屬性時(shí),還遺留了一個(gè)this內(nèi)部屬性沒有解釋,不過在說this之前,我想先說一說執(zhí)行環(huán)境和作用域的概念2012-10-10詳解JavaScript函數(shù)callee、call、apply的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)callee、call、apply的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03總結(jié)JavaScript設(shè)計(jì)模式編程中的享元模式使用
享元模式最適合于解決因創(chuàng)建大量類似對象而累及性能的問題,本文將來總結(jié)JavaScript設(shè)計(jì)模式編程中的享元模式使用,包括在DOM操作時(shí)的利用示例:2016-05-05