淺析JavaScript中的類型和對(duì)象
JavaScript是基于對(duì)象的,任何元素都可以看成對(duì)象。然而,類型和對(duì)象是不同的。本文中,我們除了討論類型和對(duì)象的一些特點(diǎn)之外,更重要的是研究如何寫(xiě)出好的并且利于重用的類型。畢竟,JavaScript這種流行的腳本語(yǔ)言如果能夠進(jìn)行良好的封裝,并形成一個(gè)龐大的類型庫(kù),對(duì)于重用是非常有意義的。
網(wǎng)上對(duì)于prototype的文章很多,一直沒(méi)明白核心的思想。最后寫(xiě)了很多例子代碼后才明白:prototype只能用在類型上。
以下是一些關(guān)于類型和對(duì)象的例子,大家看完例子后可能更容易理解類型和對(duì)象之間的聯(lián)系:
|
例子代碼 |
說(shuō)明 |
1 |
Object.prototype.Property = 1;
Object.prototype.Method = function () {
alert(1);
}
var obj = new Object();
alert(obj.Property);
obj.Method(); |
可以在類型上使用proptotype來(lái)為類型添加行為。這些行為只能在類型的實(shí)例上體現(xiàn)。 JS中允許的類型有Array, Boolean, Date, Enumerator, Error, Function, Number, Object, RegExp, String |
2 |
var obj = new Object();
obj.prototype.Property = 1; //Error //Error
obj.prototype.Method = function()
{
alert(1);
} |
在實(shí)例上不能使用prototype,否則發(fā)生編譯錯(cuò)誤 |
3 |
Object.Property = 1;
Object.Method = function()
{
alert(1);
}
alert(Object.Property);
Object.Method(); |
可以為類型定義“靜態(tài)”的屬性和方法,直接在類型上調(diào)用即可 |
4 |
Object.Property = 1;
Object.Method = function()
{
alert(1);
}
var obj = new Object();
alert(obj.Property); //Error
obj.Method(); //Error |
實(shí)例不能調(diào)用類型的靜態(tài)屬性或方法,否則發(fā)生對(duì)象未定義的錯(cuò)誤。 |
5 |
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
alert(obj.Property);
obj.Method(); |
這個(gè)例子演示了通常的在JavaScript中定義一個(gè)類型的方法 |
6 |
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
Aclass.prototype.Property2 = 2;
Aclass.prototype.Method2 = function
{
alert(2);
}
var obj = new Aclass();
alert(obj.Property2);
obj.Method2(); |
可以在外部使用prototype為自定義的類型添加屬性和方法。 |
7 |
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
Aclass.prototype.Property = 2;
Aclass.prototype.Method = function
{
alert(2);
}
var obj = new Aclass();
alert(obj.Property);
obj.Method(); |
在外部不能通過(guò)prototype改變自定義類型的屬性或方法。
該例子可以看到:調(diào)用的屬性和方法仍是最初定義的結(jié)果。 |
8 |
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
obj.Property = 2;
obj.Method = function()
{
alert(2);
}
alert(obj.Property);
obj.Method(); |
可以在對(duì)象上改變屬性。(這個(gè)是肯定的)
也可以在對(duì)象上改變方法。(和普遍的面向?qū)ο蟮母拍畈煌?/DIV> |
9 |
function Aclass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
var obj = new Aclass();
obj.Property2 = 2;
obj.Method2 = function()
{
alert(2);
}
alert(obj.Property2);
obj.Method2(); |
可以在對(duì)象上增加屬性或方法 |
10 |
function AClass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
function AClass2()
{
this.Property2 = 2;
this.Method2 = function()
{
alert(2);
}
}
AClass2.prototype = new AClass();
var obj = new AClass2();
alert(obj.Property);
obj.Method();
alert(obj.Property2);
obj.Method2(); |
這個(gè)例子說(shuō)明了一個(gè)類型如何從另一個(gè)類型繼承。 |
11 |
function AClass()
{
this.Property = 1;
this.Method = function()
{
alert(1);
}
}
function AClass2()
{
this.Property2 = 2;
this.Method2 = function()
{
alert(2);
}
}
AClass2.prototype = new AClass();
AClass2.prototype.Property = 3;
AClass2.prototype.Method = function()
{
alert(4);
}
var obj = new AClass2();
alert(obj.Property);
obj.Method(); |
這個(gè)例子說(shuō)明了子類如何重寫(xiě)父類的屬性或方法。 |
·例子1:JavaScript中允許添加行為的類型
·例子2:prototype使用的限制
·例子3:如何定義類型上的靜態(tài)成員
·例子7:prototype在重定義類型的成員上的限制
·例子10:如何讓一個(gè)類型繼承于另一個(gè)類型
·例子11:如何在子類中重新定義父類的成員
JavaScript能夠?qū)崿F(xiàn)的面向?qū)ο蟮奶卣饔校?BR>·公有屬性(public field)
·公有方法(public Method)
·私有屬性(private field)
·私有方法(private field)
·方法重載(method overload)
·構(gòu)造函數(shù)(constructor)
·事件(event)
·單一繼承(single inherit)
·子類重寫(xiě)父類的屬性或方法(override)
·靜態(tài)屬性或方法(static member)
- 淺析JavaScript中兩種類型的全局對(duì)象/函數(shù)
- JavaScript中創(chuàng)建類/對(duì)象的幾種方法總結(jié)
- JavaScript中判斷對(duì)象類型的幾種方法總結(jié)
- javascript中怎么做對(duì)象的類型判斷
- Javascript delete 引用類型對(duì)象
- JavaScript創(chuàng)建類/對(duì)象的幾種方式概述及實(shí)例
- JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十三) js定義類或?qū)ο?/a>
- javascript 基礎(chǔ)篇3 類,回調(diào)函數(shù),內(nèi)置對(duì)象,事件處理
- JavaScript 類型的包裝對(duì)象(Typed Wrappers)
- 關(guān)于JavaScript定義類和對(duì)象的幾種方式
- javascript 面向?qū)ο?function類
- JavaScript定義類和對(duì)象的方法
相關(guān)文章
js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06微信小程序利用云函數(shù)獲取手機(jī)號(hào)碼
這篇文章主要介紹了微信小程序利用云函數(shù)獲取手機(jī)號(hào)碼功能,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果
這篇文章主要介紹了js實(shí)現(xiàn)兼容性好的微軟官網(wǎng)導(dǎo)航下拉菜單效果,涉及JavaScript基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-09-09bootstrap switch開(kāi)關(guān)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap switch開(kāi)關(guān)組件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08es7學(xué)習(xí)教程之fetch解決異步嵌套問(wèn)題的方法示例
這篇文章主要給大家介紹了關(guān)于es7學(xué)習(xí)教程之fetch解決異步嵌套問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-07-07