Javascript學(xué)習(xí)筆記5 類(lèi)和對(duì)象
更新時(shí)間:2010年01月11日 00:31:20 作者:
首先,不得不說(shuō),我無(wú)法達(dá)到拋開(kāi)類(lèi)和對(duì)象的概念來(lái)看Javascript的境界,對(duì)于Javascript是否是面向?qū)ο蟮恼f(shuō)法有很多,不過(guò)我最認(rèn)同的還是Javascript是一種“基于prototype的面向?qū)ο笳Z(yǔ)言”。
面向?qū)ο笳Z(yǔ)言三大特點(diǎn):繼承,多態(tài),封裝,這三點(diǎn)雖然Javascript沒(méi)有提供天然的語(yǔ)法實(shí)現(xiàn),但是我們都可以通過(guò)prototype等技巧來(lái)實(shí)現(xiàn),因此這種說(shuō)法似乎不過(guò)分。
在Javascript中,構(gòu)造對(duì)象有三種方式:
1. 首先,我們要明確一個(gè)概念,Javascript是一種弱類(lèi)型的語(yǔ)言,一方面體現(xiàn)在Javascript的變量,返回類(lèi)型都是沒(méi)有強(qiáng)類(lèi)型約束的,另一方面,Javascript可以為對(duì)象任意添加屬性和方法。根據(jù)這個(gè),我們可以寫(xiě)出這樣的代碼:
<script type="text/javascript">
var person = {};
person.name = "飛林沙";
person.age = 21;
person.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
person.Introduce();
</script>
這里的person就是我們構(gòu)造出的一個(gè)對(duì)象。
2. 我們也可以利用JSON的形式來(lái)構(gòu)造一個(gè)對(duì)象。
<script type="text/javascript">
var person = {
name: "飛林沙",
age: 21,
Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
};
person.Introduce();
</script>
這個(gè)是不是很像我們?cè)贑#3.0里提出的匿名對(duì)象呢?
protected void Page_Load(object sender, EventArgs e)
{
var person = new
{
name = "飛林沙",
age = 21
};
Response.Write("My name is " + person.name + ".I'm " + person.age);
}
不同的是在Javascript中,函數(shù)是一種類(lèi)型,所以可以賦給某個(gè)變量,但是C#不可以。
但是上面兩種方法我們看到,我們都是單獨(dú)定義了一個(gè)對(duì)象。接下來(lái)讓我們把他們抽象出來(lái)成為一個(gè)類(lèi)。
<script type="text/javascript">
var Person = function () {
this.name = "飛林沙";
this.age = 21;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person = new Person();
person.Introduce();
</script>
可是在這里,我們看到,屬性都已經(jīng)被寫(xiě)死了,我們根本沒(méi)辦法為每個(gè)對(duì)象單獨(dú)訂制,解決辦法很簡(jiǎn)單:
<script type="text/javascript">
var Person = function (name, age) {
this.name = name;
this.age = age;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person = new Person("飛林沙", 21);
person.Introduce();
</script>
好,我們來(lái)對(duì)比一下第二種和第三種寫(xiě)法,兩者是等效的。在第二種寫(xiě)法中,實(shí)際上是構(gòu)建了一個(gè)JSON對(duì)象,而我們又知道JSON本質(zhì)上其實(shí)就是一個(gè)鍵值對(duì),那么我們是否也可以用同樣的方式來(lái)理解一個(gè)對(duì)象呢?
我們來(lái)寫(xiě)出這樣的測(cè)試代碼試試:
<script type="text/javascript">
var Person = function (name, age) {
this.name = name;
this.age = age;
this.Introduce = function () {
alert("My name is " + name + ".I'm " + age);
};
};
var person = new Person("飛林沙", 21);
for (var p in person) {
alert(p);
}
alert(person["name"]);
</script>
這樣的代碼沒(méi)偶任何問(wèn)題,首先用遍歷的方式來(lái)找到person所有的key(屬性和方法名)。然后我們用索引的方式來(lái)訪問(wèn)person對(duì)象的name屬性。
這些都沒(méi)有問(wèn)題,可是我們是不是看到了一個(gè)引申的問(wèn)題,從傳統(tǒng)面向?qū)ο蟮恼Z(yǔ)言來(lái)看,name和age應(yīng)該屬于私有變量,那么這樣用person簡(jiǎn)簡(jiǎn)單單的訪問(wèn),是不是破壞了封裝性呢?
還記得我們?cè)谇拔闹姓f(shuō)過(guò)的么?var的叫變量,沒(méi)有var的叫屬性。那么我們?nèi)绻v代碼改成這個(gè)樣子。
<script type="text/javascript">
var Person = function (name, age) {
var name = name;
var age = age;
this.GetName = function () {
return name;
}
this.GetAge = function () {
return age;
}
this.Introduce = function () {
alert("My name is " + name + ".I'm " + age);
};
};
var person = new Person("飛é林?沙3", 21);
alert(person["name"]);
alert(person.GetName());
</script>
這樣就可以封裝得很好了,這也是在Javascript中的封裝方式。
好,關(guān)于Javascript的類(lèi)和對(duì)象就說(shuō)到這,但是這里面仍然有一些問(wèn)題。我們會(huì)在下文中提及。
在Javascript中,構(gòu)造對(duì)象有三種方式:
1. 首先,我們要明確一個(gè)概念,Javascript是一種弱類(lèi)型的語(yǔ)言,一方面體現(xiàn)在Javascript的變量,返回類(lèi)型都是沒(méi)有強(qiáng)類(lèi)型約束的,另一方面,Javascript可以為對(duì)象任意添加屬性和方法。根據(jù)這個(gè),我們可以寫(xiě)出這樣的代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var person = {};
person.name = "飛林沙";
person.age = 21;
person.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
person.Introduce();
</script>
這里的person就是我們構(gòu)造出的一個(gè)對(duì)象。
2. 我們也可以利用JSON的形式來(lái)構(gòu)造一個(gè)對(duì)象。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var person = {
name: "飛林沙",
age: 21,
Introduce: function () { alert("My name is " + this.name + ".I'm " + this.age); }
};
person.Introduce();
</script>
這個(gè)是不是很像我們?cè)贑#3.0里提出的匿名對(duì)象呢?
復(fù)制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
var person = new
{
name = "飛林沙",
age = 21
};
Response.Write("My name is " + person.name + ".I'm " + person.age);
}
不同的是在Javascript中,函數(shù)是一種類(lèi)型,所以可以賦給某個(gè)變量,但是C#不可以。
但是上面兩種方法我們看到,我們都是單獨(dú)定義了一個(gè)對(duì)象。接下來(lái)讓我們把他們抽象出來(lái)成為一個(gè)類(lèi)。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Person = function () {
this.name = "飛林沙";
this.age = 21;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person = new Person();
person.Introduce();
</script>
可是在這里,我們看到,屬性都已經(jīng)被寫(xiě)死了,我們根本沒(méi)辦法為每個(gè)對(duì)象單獨(dú)訂制,解決辦法很簡(jiǎn)單:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Person = function (name, age) {
this.name = name;
this.age = age;
this.Introduce = function () {
alert("My name is " + this.name + ".I'm " + this.age);
};
};
var person = new Person("飛林沙", 21);
person.Introduce();
</script>
好,我們來(lái)對(duì)比一下第二種和第三種寫(xiě)法,兩者是等效的。在第二種寫(xiě)法中,實(shí)際上是構(gòu)建了一個(gè)JSON對(duì)象,而我們又知道JSON本質(zhì)上其實(shí)就是一個(gè)鍵值對(duì),那么我們是否也可以用同樣的方式來(lái)理解一個(gè)對(duì)象呢?
我們來(lái)寫(xiě)出這樣的測(cè)試代碼試試:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Person = function (name, age) {
this.name = name;
this.age = age;
this.Introduce = function () {
alert("My name is " + name + ".I'm " + age);
};
};
var person = new Person("飛林沙", 21);
for (var p in person) {
alert(p);
}
alert(person["name"]);
</script>
這樣的代碼沒(méi)偶任何問(wèn)題,首先用遍歷的方式來(lái)找到person所有的key(屬性和方法名)。然后我們用索引的方式來(lái)訪問(wèn)person對(duì)象的name屬性。
這些都沒(méi)有問(wèn)題,可是我們是不是看到了一個(gè)引申的問(wèn)題,從傳統(tǒng)面向?qū)ο蟮恼Z(yǔ)言來(lái)看,name和age應(yīng)該屬于私有變量,那么這樣用person簡(jiǎn)簡(jiǎn)單單的訪問(wèn),是不是破壞了封裝性呢?
還記得我們?cè)谇拔闹姓f(shuō)過(guò)的么?var的叫變量,沒(méi)有var的叫屬性。那么我們?nèi)绻v代碼改成這個(gè)樣子。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var Person = function (name, age) {
var name = name;
var age = age;
this.GetName = function () {
return name;
}
this.GetAge = function () {
return age;
}
this.Introduce = function () {
alert("My name is " + name + ".I'm " + age);
};
};
var person = new Person("飛é林?沙3", 21);
alert(person["name"]);
alert(person.GetName());
</script>
這樣就可以封裝得很好了,這也是在Javascript中的封裝方式。
好,關(guān)于Javascript的類(lèi)和對(duì)象就說(shuō)到這,但是這里面仍然有一些問(wèn)題。我們會(huì)在下文中提及。
您可能感興趣的文章:
- 一步一步學(xué)習(xí)PHP(5) 類(lèi)和對(duì)象
- C++中對(duì)象的賦值與復(fù)制操作詳細(xì)解析
- C++對(duì)象的動(dòng)態(tài)建立與釋放詳解
- C++中對(duì)象的常引用總結(jié)
- C++中的對(duì)象指針總結(jié)
- JS創(chuàng)建類(lèi)和對(duì)象的兩種不同方式
- C++模板類(lèi)的用法實(shí)例
- C++封裝線程類(lèi)的實(shí)現(xiàn)方法
- C++基礎(chǔ)入門(mén)教程(六):為什么創(chuàng)建類(lèi)的時(shí)候要用new?
- JavaScript定義類(lèi)和對(duì)象的方法
- C++實(shí)現(xiàn)的鏈表類(lèi)實(shí)例
- C++之類(lèi)的靜態(tài)變量
- C++中的string類(lèi)的用法小結(jié)
- C++類(lèi)和對(duì)象實(shí)例解析(二)
相關(guān)文章
可簡(jiǎn)單避免的三個(gè)JS發(fā)布錯(cuò)誤的詳細(xì)介紹
這篇文章詳細(xì)介紹了可簡(jiǎn)單避免的三個(gè)JS發(fā)布錯(cuò)誤,有需要的朋友可以參考一下2013-08-08JavaScript cookie詳解及簡(jiǎn)單實(shí)例應(yīng)用
這篇文章主要介紹了JavaScript cookie詳解及簡(jiǎn)單實(shí)例應(yīng)用的相關(guān)資料,這里對(duì)js cookie 的介紹及基本屬性和簡(jiǎn)單應(yīng)用做了詳解,需要的朋友可以參考下2016-12-12javascript語(yǔ)言結(jié)構(gòu)小記(一)
今天看了點(diǎn)js語(yǔ)言結(jié)構(gòu)的一部分,我將我比較感興趣地記錄如下,想學(xué)習(xí)js的朋友可以看下。2011-09-09JavaScript全局函數(shù)使用簡(jiǎn)單說(shuō)明
JavaScript下比較常用的一些字符處理等函數(shù),學(xué)習(xí)js的朋友經(jīng)常用得到。2011-03-03