JavaScript內核之基本概念

本章主要講述JavaScript中的數據類型(基本類型與引用類型),變量(包括變量的作用域),操作符(主要是一些較爲常見,但是不容易從字面上理解的操作符)。由於JavaScript中的“一切皆對象”,在掌握了這些基本的概念之後,讀者就可以較爲輕鬆的理解諸如作用域,調用對象,閉包,currying等等較難理解的概念了。

[size=large][b]數據類型[/b][/size]

有程序設計經驗的讀者肯定知道,在C或者Java這樣的語言中,數據是有類型的,比如用以表示用戶名的屬性是字符串,而一個僱員的年齡則是一個數字,表示UI上的一個開關按鈕的數據模型則爲布爾值等等,對數字可能還可以細分爲浮點數,整型數,整型數又可能分爲長整型和短整型,總而言之,它們都表示語言中的數據的值的類型。

JavaScript中的數據類型分爲兩種:基本數據類型和對象類型,其中對象類型包含對象,數組,以及函數(事實上,函數,數組等也都是對象,這個在後邊的章節詳述)。

[b]1.1.1 基本數據類型[/b]

在JavaScript中,包含三種基本的數據類型,字符串(String),數值(Number),布爾值(boolean),下面是一些簡單的例子:

<strong>
var str = "Hello, world";//字符串
var i = 10;//整型數
var f = 2.3;//浮點數
var b = true;//布爾值</strong>

我們可以分別查看變量的值及變量的類型:


print(str);
print(i);
print(f);
print(b);
print(typeof str);
print(typeof i);
print(typeof f);
print(typeof b);


注意,在此處使用的print()函數爲rhino解釋器的頂層對象的方法,可以用來打印字符串,通常情況下,在客戶端,程序員多使用alert()進行類似的動作,alert()是瀏覽器中JavaScript解釋器的頂層對象(window)的一個方法。


Hello, world
10
2.3
true
string
number
number
Boolean


在JavaScript中,所有的數字,不論是整型浮點,都屬於“數字”基本類型。typeof是一個一元的操作符,在本章的另外一個小節會專門講到。

[b]1.1.2 對象類型[/b]

這裏提到的對象不是對象本身,而是指一種類型,我們在第三章會對對象進行詳細的討論,此處的對象包括,對象(屬性的集合,即鍵值的散列表),數組(有序的列表),函數(包含可執行的代碼)。

對象類型是一種複合的數據類型,其基本元素由基本數據類型組成,當然不限於基本類型,比如對象類型中的值可以是其他的對象類型實例,我們通過例子來說明:


var str = "Hello, world";
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,這些屬性的值可以是基本類型,事實上還可以更復雜,我們來看看他們的類型:


print(typeof obj);
print(typeof array);
print(typeof func);
//將打印出
object
object
function


讀者可能會對print(typeof array)打印出object感到奇怪,事實上,對象和數組的界限並不那麼明顯(事實上它們是屬於同一類型的),但是他們的行爲卻非常不同,本書的後續章節將兩個重要的數據類型做了分別介紹。

[b]2.1.3 兩者之間的轉換[/b]

類似與Java中基本數據類型的自動裝箱拆箱,JavaScript也有類似的動作,基本數據類型在做一些運算時,會臨時包裝一個對象,做完運算後,又自動釋放該對象。我們可以通過幾個例子來說明:


var str = "JavaScript Kernal";
print(str.length);
//打印17


str爲一個字符串,通過typeof運算符可知其type爲”string”,而:


var str2 = new String("JavaScript Kernal");
print(typeof str2);


可知,str2的type爲”object”,即這兩者並不相同,那麼爲什麼可以使用str.length來的到str的長度呢?事實上,當使用str.length時,JavaScript會自動包裝一個臨時的String對象,內容爲str的內容,然後獲取該對象的length屬性,最後,這個臨時的對象將被釋放。

而將對象轉換爲基本類型則是通過這樣的方式:通過調用對象的valueOf()方法來取得對象的值,如果和上下文的類型匹配,則使用該值。如果valueOf取不到值的話,則需要調用對象的toString()方法,而如果上下文爲數值型,則又需要將此字符串轉換爲數值。由於JavaScript是弱類型的,所以JavaScript引擎需要根據上下文來“猜測”對象的類型,這就使得JavaScript的效率比編譯型的語言要差一些。

valueOf()的作用是,將一個對象的值轉換成一種合乎上下文需求的基本類型,toString()則名副其實,可以打印出對象對應的字符串,當然前提是你已經“重載”了Object的toString()方法。

事實上,這種轉換規則會導致很多的問題,比如,所有的非空對象,在布爾值環境下,都會被轉成true,比如:


function convertTest(){
if(new Boolean(false) && new Object() && new String("") && new Array()){
print("convert to boolean")
}
}
convertTest();//convert to Boolean


初學者容易被JavaScript中的類型轉換規則搞暈掉,很多情況下會覺得那種寫法看着非常彆扭,其實只需要掌握了規則,這些古怪的寫法會大大的提高代碼的性能,我們通過例子來學習這些規則:


var x = 3;
var y = x + "2";// => 32
var z = x + 2;// => 5
print(y);
print(z);


通常可以在JS代碼中發現這樣的代碼:


if(datamodel.item){
//do something...
}else{
datamodel.item = new Item();
}


這種寫法事實上具有更深層次的含義:

應該注意到,datamodel.item是一個對象(字符串,數字等),而if需要一個boolean型的表達式,所以這裏進行了類型轉換。在JavaScript中,如果上下文需要boolean型的值,則引擎會自動將對象轉換爲boolean類型。轉換規則爲,如果該對象非空,則轉換爲true,否則爲false.因此我們可以採取這種簡寫的形式。

而在傳統的編程語言(強類型)中,我們則需要:


if(datamodel.item != null){
//do something...
}else{
datamodel.item = new Item();
}


[b]2.1.4類型的判斷[/b]

前面講到JavaScript特性的時候,我們說過,JavaScript是一個弱類型的語言,但是有時我們需要知道變量在運行時的類型,比如,一個函數的參數預期爲另一個函數:


function handleMessage(message, handle){
return handle(message);
}

當調用handleMessage的函數傳遞的handle不是一個函數則JavaScript引擎會報錯,因此我們有必要在調用之前進行判斷:


function handleMessage(message, handle){
if(typeof handle == "function"){
return handle(message);
}else{
throw new Error("the 2nd argument should be a function");
}
}


但是,typeof並不總是有效的,比如下面這種情況:


var obj = {};
var array = ["one", "two", "three", "four"];
print(typeof obj);//object
print(typeof array); //object


運行結果顯示,對象obj和數組array的typeof值均爲”object”,這樣我們就無法準確判斷了,這時候,可以通過調用instanceof來進行進一步的判斷:


print(obj instanceof Array);//false
print(array instanceof Array);//true

第一行代碼返回false,第二行則返回true。因此,我們可以將typeof操作符和instanceof操作符結合起來進行判斷。

[size=large][b]2.2 變量[/b][/size]

變量,即通過一個名字將一個值關聯起來,以後通過變量就可以引用到該值,比如:


var str = "Hello, World";
var num = 2.345;

當我們下一次要引用”Hello, Wrold”這個串進行某項操作時,我們只需要使用變量str即可,同樣,我們可以用10*num來表示10*2.345。變量的作用就是將值“存儲”在這個變量上。

[b]2.2.1基本類型和引用類型[/b]

在上一小節,我們介紹了JavaScript中的數據類型,其中基本類型如數字,布爾值,它們在內存中都有固定的大小,我們通過變量來直接訪問基本類型的數據。而對於引用類型,如對象,數組和函數,由於它們的大小在原則上是不受任何限制的,故我們通過對其引用的訪問來訪問它們本身,引用本身是一個地址,即指向真實存儲複雜對象的位置。

基本類型和引用類型的區別是比較明顯的,我們來看幾個例子:


var x = 1;//數字x,基本類型
var y = x;//數字y,基本類型
print(x);
print(y);
x = 2;//修改x的值
print(x);//x的值變爲2
print(y);//y的值不會變化


運行結果如下:


1

1

2

1


這樣的運行結果應該在你的意料之內,沒有什麼特別之處,我們再來看看引用類型的例子,由於數組的長度非固定,可以動態增刪,因此數組爲引用類型:


var array = [1,2,3,4,5];
var arrayRef = array;
array.push(6);
print(arrayRef);


引用指向的是地址,也就是說,引用不會指向引用本身,而是指向該引用所對應的實際對象。因此通過修改array指向的數組,則arrayRef指向的是同一個對象,因此運行效果如下:

1,2,3,4,5,6


[b]2.2.2變量的作用域[/b]

變量被定義的區域即爲其作用域,全局變量具有全局作用域;局部變量,比如聲明在函數內部的變量則具有局部作用域,在函數的外部是不能直接訪問的。比如:


var variable = "out";
function func(){
var variable = "in";
print(variable);//打印”in”
}
func();
print(variable);//打印”out”


應該注意的是,在函數內var關鍵字是必須的,如果使用了變量而沒有寫var關鍵字,則默認的操作是對全局對象的,比如:


var variable = "out";
function func(){
variable = "in";//注意此variable前沒有var關鍵字
print(variable);
}
func();
print(variable);//全局的變量variable被修改


由於函數func中使用variable而沒有關鍵字var,則默認是對全局對象variable屬性做的操作(修改variable的值爲in),因此此段代碼會打印:


in

in


[size=large][b]2.3運算符[/b][/size]

運算符,通常是容易被忽略的一個內容,但是一些比較古怪的語法現象仍然可能需要用到運算符的結合率或者其作用來進行解釋,JavaScript中,運算符是一定需要注意的地方,有很多具有JS編程經驗的人仍然免不了被搞得暈頭轉向。

我們在這一節主要講解這樣幾個運算符:

2.3.1中括號運算符([])

[]運算符可用在數組對象和對象上,從數組中按下標取值:


var array = ["one", "two", "three", "four"];
array[0]


而[]同樣可以作用於對象,一般而言,對象中的屬性的值是通過點(.)運算符來取值,如:


var object =
{
field : "self", printInfo : function(){
print(this.field);
}
}
object.field;
object.printInfo();


但是考慮到這樣一種情況,我們在遍歷一個對象的時候,對其中的屬性的鍵(key)是一無所知的,我們怎麼通過點(.)來訪問呢?這時候我們就可以使用[]運算符:


for(var key in object){
print(key + ":" + object[key]);
}


運行結果如下:


field:slef
printInfo:function (){ print(this.field); }


[b]2.3.2點運算符(.)[/b]

點運算符的左邊爲一個對象(屬性的集合),右邊爲屬性名,應該注意的是右邊的值除了作爲左邊的對象的屬性外,同時還可能是它自己的右邊的值的對象:

<strong>var object = { field : "self", printInfo : function(){ print(this.field); }, outter:{ inner : "inner text", printInnerText : function(){ print(this.inner); } } } object.outter.printInnerText();</strong> 這個例子中,outter作爲object的屬性,同時又是printInnerText()的對象。

2.3.3 == 和 === 以及 != 和 !==

運算符==讀作相等,而運算符===則讀作等同。這兩種運算符操作都是在JavaScript代碼中經常見到的,但是意義則不完全相同,簡而言之,相等操作符會對兩邊的操作數做類型轉換,而等同則不會。我們還是通過例子來說明:


print(1 == true);
print(1 === true);
print("" == false);
print("" === false);
print(null == undefined);
print(null === undefined);


運行結果如下:


true
false
true
false
true
false


相等和等同運算符的規則分別如下:

相等運算符

如果操作數具有相同的類型,則判斷其等同性,如果兩個操作數的值相等,則返回true(相等),否則返回false(不相等).

如果操作數的類型不同,則按照這樣的情況來判斷:

◆ null和undefined相等

◆ 其中一個是數字,另一個是字符串,則將字符串轉換爲數字,再做比較

◆ 其中一個是true,先轉換成1(false則轉換爲0)在做比較

◆ 如果一個值是對象,另一個是數字/字符串,則將對象轉換爲原始值(通過toString()或者valueOf()方法)

◆ 其他情況,則直接返回false

等同運算符

如果操作數的類型不同,則不進行值的判斷,直接返回false

如果操作數的類型相同,分下列情況來判斷:

◆ 都是數字的情況,如果值相同,則兩者等同(有一個例外,就是NaN,NaN與其本身也不相等),否則不等同

◆ 都是字符串的情況,與其他程序設計語言一樣,如果串的值不等,則不等同,否則等同

◆ 都是布爾值,且值均爲true/false,則等同,否則不等同

◆ 如果兩個操作數引用同一個對象(數組,函數),則兩者完全等同,否則不等同

◆ 如果兩個操作數均爲null/undefined,則等同,否則不等同

比如:


var obj = {
id : "self",
name : "object" };
var oa = obj;
var ob = obj;
print(oa == ob);
print(oa === ob);

會返回:


true

true


再來看一個對象的例子:


var obj1 = {
id : "self",
name : "object",
toString : function(){
return "object 1";
}
}
var obj2 = "object 1";
print(obj1 == obj2);
print(obj1 === obj2);


返回值爲:


true

false


obj1是一個對象,而obj2是一個結構與之完全不同的字符串,而如果用相等操作符來判斷,則兩者是完全相同的,因爲obj1重載了頂層對象的toString()方法。

而!=不等和!==不等同,則與==/!==相反。因此,在JavaScript中,使用相等/等同,不等/不等同的時候,一定要注意類型的轉換,這裏推薦使用等同/不等同來進行判斷,這樣可以避免一些難以調試的bug。

原文:http://abruzzi.iteye.com/blog/632010
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章