JavaScript的面向?qū)ο?一)
更新時(shí)間:2006年11月09日 00:00:00 作者:
一。傳統(tǒng)的基于原型(Prototype)的做法
確切地說Javascrīpt的“類”在嚴(yán)格意義上來講并不能算真正的類,從其聲明的對(duì)象到類(估切這么說)有這樣一個(gè)關(guān)系:
Instance.__proto__=InstanceClass.prototype(ie不支持)
以上說明:實(shí)例的屬性(__proto__)等于類的prototpye,我們可以看出,實(shí)例的"__proto__"正好巧接在類的"prototype"上,通過原型鏈(prototype)來查找其方法并擴(kuò)展,我們會(huì)發(fā)現(xiàn)其方法(Method)與其屬性(Property)都是Public(當(dāng)然你也可以用Private,即不用this),而prototype其實(shí)就是一對(duì)象,用來記錄方法做為一個(gè)集合
假設(shè)我們聲明一個(gè)類A,可以如此
function A(){
this.className="ClassA"; //添加Public屬性,正確來說類名應(yīng)該是Private的
}
//添加一方法
A.prototype.getClassName=function(){
return this.className; //this指代A,而不是prototype
}
//聲明一對(duì)象
var AObj=new A();
alert(AObj.__proto__==A.prototype); //ie下無效,ff下為true,說明上面的驗(yàn)證是正確的
//我們來看看對(duì)象屬性
/*
由于用了this,className即為Public,即可以隨意修改或讀取
如果要保護(hù)起來,就要用到Private,那么可以去掉其this前綴,做為保護(hù)
讀的時(shí)候用一公開方法,即prototype下的方法:
A.prototype.getClassName=function(){
return className; //行不通,不存在,className是undefined
}
在這兒也只能約定一下,給className加上this,不要去直接去訪問。在這一點(diǎn)上,的確不如第二種方法,稍
后會(huì)說明
*/
關(guān)于"prototype"
由于Javascrīpt并沒有在系統(tǒng)內(nèi)部并未使用過“繼承”(很大可能),所以class下的prototype得到的全是
頂層Object,后期在繼承的時(shí)候,我們可以看到這樣的一個(gè)式子:
child.prototype=new parent();
繼承兩字帶引號(hào)的意思是說就算有繼承也并非真正意義上的繼承,也只是通過prototype巧接得到。
用實(shí)例擴(kuò)展一個(gè)方法到類,這兒不得不提及__proto__這個(gè)屬性
s.__proto__.hjk=function(){
return "hjk";
}
alert(s.hjk());
for(var t in abc.prototype){
alert("prototype指向:"+t+"="+abc.prototype[t]);
}
這下應(yīng)該明白了吧。
確切地說Javascrīpt的“類”在嚴(yán)格意義上來講并不能算真正的類,從其聲明的對(duì)象到類(估切這么說)有這樣一個(gè)關(guān)系:
Instance.__proto__=InstanceClass.prototype(ie不支持)
以上說明:實(shí)例的屬性(__proto__)等于類的prototpye,我們可以看出,實(shí)例的"__proto__"正好巧接在類的"prototype"上,通過原型鏈(prototype)來查找其方法并擴(kuò)展,我們會(huì)發(fā)現(xiàn)其方法(Method)與其屬性(Property)都是Public(當(dāng)然你也可以用Private,即不用this),而prototype其實(shí)就是一對(duì)象,用來記錄方法做為一個(gè)集合
假設(shè)我們聲明一個(gè)類A,可以如此
function A(){
this.className="ClassA"; //添加Public屬性,正確來說類名應(yīng)該是Private的
}
//添加一方法
A.prototype.getClassName=function(){
return this.className; //this指代A,而不是prototype
}
//聲明一對(duì)象
var AObj=new A();
alert(AObj.__proto__==A.prototype); //ie下無效,ff下為true,說明上面的驗(yàn)證是正確的
//我們來看看對(duì)象屬性
/*
由于用了this,className即為Public,即可以隨意修改或讀取
如果要保護(hù)起來,就要用到Private,那么可以去掉其this前綴,做為保護(hù)
讀的時(shí)候用一公開方法,即prototype下的方法:
A.prototype.getClassName=function(){
return className; //行不通,不存在,className是undefined
}
在這兒也只能約定一下,給className加上this,不要去直接去訪問。在這一點(diǎn)上,的確不如第二種方法,稍
后會(huì)說明
*/
關(guān)于"prototype"
由于Javascrīpt并沒有在系統(tǒng)內(nèi)部并未使用過“繼承”(很大可能),所以class下的prototype得到的全是
頂層Object,后期在繼承的時(shí)候,我們可以看到這樣的一個(gè)式子:
child.prototype=new parent();
繼承兩字帶引號(hào)的意思是說就算有繼承也并非真正意義上的繼承,也只是通過prototype巧接得到。
用實(shí)例擴(kuò)展一個(gè)方法到類,這兒不得不提及__proto__這個(gè)屬性
復(fù)制代碼 代碼如下:
<scrīpt LANGUAGE="Javascrīpt">
<!--
function abc(){
var ōwner=this;
owner.k="pp";
owner.abc=function(){
}
}
abc.prototype.def=function(){
}
var s=new abc();
for(var t in abc.prototype){
alert("prototype指向:"+t+"="+abc.prototype[t]);
}
for(var t in s.__proto__){
alert("__proto__指向:"+t+"="+s.__proto__[t]);
}
//-->
</scrīpt>
在ff下我看可以看到實(shí)例名.__proto__=類.prototype,現(xiàn)在通過實(shí)例擴(kuò)展一個(gè)方法,這兒在實(shí)際應(yīng)用當(dāng)中并不推薦這樣做,下例: <!--
function abc(){
var ōwner=this;
owner.k="pp";
owner.abc=function(){
}
}
abc.prototype.def=function(){
}
var s=new abc();
for(var t in abc.prototype){
alert("prototype指向:"+t+"="+abc.prototype[t]);
}
for(var t in s.__proto__){
alert("__proto__指向:"+t+"="+s.__proto__[t]);
}
//-->
</scrīpt>
s.__proto__.hjk=function(){
return "hjk";
}
alert(s.hjk());
for(var t in abc.prototype){
alert("prototype指向:"+t+"="+abc.prototype[t]);
}
這下應(yīng)該明白了吧。
相關(guān)文章
獲取HTML DOM節(jié)點(diǎn)元素的方法的總結(jié)
在Web應(yīng)用程序特別是Web2.0程序開發(fā)中,經(jīng)常要獲取頁(yè)面中某個(gè)元素,然后更新該元素的樣式、內(nèi)容等。如何獲取要更新的元素,是首先要解決的問題。2009-08-08
原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)隨機(jī)點(diǎn)名,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
使用wxapp-img-loader自定義組件實(shí)現(xiàn)微信小程序圖片預(yù)加載功能
由于微信小程序沒有提供類似 Image 這樣的 JS 對(duì)象,要實(shí)現(xiàn)圖片的預(yù)加載要麻煩一些,wxapp-img-loader自定義組件可以在微信小程序中實(shí)現(xiàn)圖片預(yù)加載功能,需要的朋友可以參考下2018-10-10
在JavaScript中生成不可修改屬性對(duì)象的方法
這篇文章主要介紹了在 JavaScript 中生成不可修改屬性對(duì)象的方法,包括相關(guān)函數(shù)及原理,并列舉了在狀態(tài)管理、數(shù)據(jù)緩存、函數(shù)式編程等場(chǎng)景中的實(shí)際應(yīng)用,還通過代碼示例進(jìn)行了詳細(xì)說明,需要的朋友可以參考下2024-12-12
淺談js控制li標(biāo)簽排序問題 js調(diào)用php函數(shù)的方法
下面小編就為大家?guī)硪黄獪\談js控制li標(biāo)簽排序問題 js調(diào)用php函數(shù)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
js+CSS簡(jiǎn)單實(shí)現(xiàn)瀑布流布局
瀑布流布局,是一種視覺表現(xiàn)為參差不齊的多欄布局,常用于內(nèi)容以圖片為主的頁(yè)面展示,本文將使用css和js兩種方式來實(shí)現(xiàn)瀑布流布局,需要的可以參考下2023-11-11
webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)
這篇文章主要介紹了js實(shí)現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁(yè)面元素的獲取,屬性判斷及樣式設(shè)置等技巧,并附帶html5的相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01

