javascript對(duì)象的property和prototype是這樣一種關(guān)系
更新時(shí)間:2007年03月24日 00:00:00 作者:
ECMAScript可以識(shí)別兩種類(lèi)型的對(duì)象,一種叫做Native Object屬于語(yǔ)言范疇;一種叫做Host Object,由運(yùn)行環(huán)境提供例如document對(duì)象,
Dom Node等
Native objects是一種松散的結(jié)構(gòu)并且可以動(dòng)態(tài)的增加屬性(property),所有的屬性都有一個(gè)名字和一個(gè)值,這個(gè)值可以是另一個(gè)對(duì)象的引用
或者是內(nèi)建的數(shù)據(jù)類(lèi)型(String, Number, Boolean, Null 或者 Undefined)
下面的這個(gè)簡(jiǎn)單的例子描述了一個(gè)javascript對(duì)象是如何設(shè)置一個(gè)屬性的值和如何讀取屬性的值的。
賦值操作
一個(gè)對(duì)象的屬性的創(chuàng)建非常簡(jiǎn)單,直接通過(guò)賦值操作就可以完成屬性的創(chuàng)建。
var objectRef = new Object(); //create a generic javascript object.
一個(gè)名為testNumber的屬性可以這樣創(chuàng)建。
objectRef.testNumber = 5;
/* - or:- */
objectRef["testNumber"] = 5;
如果復(fù)制的屬性名稱已經(jīng)存在那么不會(huì)再次創(chuàng)建這個(gè)屬性,賦值操作僅僅是重新設(shè)置屬性的值
objectRef.testNumber = 8;
/* - or:- */
objectRef["testNumber"] = 8;
js對(duì)象的原型(prototype)自己本身也可以是對(duì)象,也可以有屬性(property),對(duì)于js對(duì)象的(prototype)的賦值操作跟普通對(duì)象屬性的創(chuàng)建
沒(méi)什么不同。
取值操作
在取值操作中property和prototype就不一樣了,先看最簡(jiǎn)單的property取值操作。
/*為一個(gè)對(duì)象的屬性賦值,如果這個(gè)對(duì)象沒(méi)有這個(gè)屬性,那么在賦值操作后,這個(gè)對(duì)象就有這個(gè)屬性了 */
objectRef.testNumber = 8;
/* 讀出這個(gè)屬性的值 */
var val = objectRef.testNumber;
/* 現(xiàn)在val 就得到了剛才賦予objectRef的值8了*/
prototype揭密
但是所有的對(duì)象都可以有prototypes, prototypes自己也是對(duì)象,那么他也可以有prototypes,這樣循環(huán)下去就形成了一個(gè)prototype鏈,
這個(gè)鏈當(dāng)他遇到鏈中隊(duì)形的prototype是null時(shí)中止。(Object的默認(rèn)的prototype是null)
var objectRef = new Object(); //create a generic javascript object.
創(chuàng)建一個(gè)新的js對(duì)象,這時(shí)這個(gè)對(duì)象的prototype是Null,所以objectRef的prototype鏈只包含一個(gè)對(duì)象Object.prototype
我們?cè)诳聪旅娴?nbsp;
/* 構(gòu)建MyObject1這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testNumber
*/
this.testNumber = formalParameter;
}
/* 構(gòu)建MyObject2這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testString*/
this.testString = formalParameter;
}
/* 下一步的操作會(huì)用MyObject1對(duì)象替換掉MyObject2默認(rèn)的prototype屬性*/
MyObject2.prototype = new MyObject1( 8 );
/* 最后我們創(chuàng)建MyObject2類(lèi)型的一個(gè)對(duì)象*/
var objectRef = new MyObject2( "String_Value" );
objectRef這個(gè)MyObject2類(lèi)型的對(duì)象有一個(gè)prototype的鏈,鏈中的第一個(gè)對(duì)象是MyObject1對(duì)象,MyObject1對(duì)象也有prototype,
這個(gè)prototype是Object默認(rèn)的prototype,Object.prototype的prototype是null,至此這條prototype鏈結(jié)束。
當(dāng)一個(gè)取值操作發(fā)生時(shí),objectRef 的整個(gè)prototype鏈就開(kāi)始工作
var val = objectRef.testString;
objectRef這個(gè)對(duì)象的有一個(gè)屬性叫做testString,那么這句會(huì)把testString的值賦給val
var val = objectRef.testNumber;
在objectRef這個(gè)對(duì)象里并沒(méi)有testNumber這個(gè)屬性,但是val卻的到了值8,而不是undefine,這是因?yàn)榻忉屍髟跊](méi)有在當(dāng)前對(duì)象找到要找
的屬性后,就會(huì)去檢查這個(gè)對(duì)象的prototype,objectRef的prototype是MyObject1對(duì)象,這個(gè)對(duì)象有testNumber這個(gè)屬性,所以val得到8這個(gè)值。
var val = objectRef.toString;
現(xiàn)在val是個(gè)function的引用,這個(gè)function是Object.prototype的property,由于MyObject1和MyObject2都沒(méi)有定義toString這個(gè)property
所以O(shè)bject.prototype返回。
var val = objectRef.madeUpProperty;
最后val是undefined,因?yàn)镸yObject1和MyObject2,還有Object都沒(méi)有定義madeUpProperty這個(gè)property,所以得到的是undefine.
讀操作會(huì)讀取在obj自己和prototype 鏈上發(fā)現(xiàn)的第一個(gè)同名屬性值
寫(xiě)操作會(huì)為obj對(duì)象本身創(chuàng)建一個(gè)同名屬性(如果這個(gè)屬性名不存在
這就意味著objectRef.testNumber = 3會(huì)在objectRef對(duì)象上創(chuàng)建一個(gè)property,名字是testNumber,當(dāng)下一次在要讀取testNumber時(shí)
propertype鏈就不會(huì)工作,僅僅會(huì)得到objectRef的property 3,而MyObject1的testNumber屬性并不會(huì)被修改。下面的可以驗(yàn)證
/* 構(gòu)建MyObject1這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testNumber
*/
this.testNumber = formalParameter;
}
/* 構(gòu)建MyObject2這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testString*/
this.testString = formalParameter;
}
/* 下一步的操作會(huì)用MyObject1對(duì)象替換掉MyObject2默認(rèn)的prototype屬性*/
var obj1 = new MyObject1( 8 );
MyObject2.prototype = obj1;
/* 最后我們創(chuàng)建MyObject2類(lèi)型的一個(gè)對(duì)象*/
var objectRef = new MyObject2( "String_Value" );
alert(objectRef.testNumber);
objectRef.testNumber = 5;
alert(objectRef.testNumber);
alert(obj1.testNumber);
Dom Node等
Native objects是一種松散的結(jié)構(gòu)并且可以動(dòng)態(tài)的增加屬性(property),所有的屬性都有一個(gè)名字和一個(gè)值,這個(gè)值可以是另一個(gè)對(duì)象的引用
或者是內(nèi)建的數(shù)據(jù)類(lèi)型(String, Number, Boolean, Null 或者 Undefined)
下面的這個(gè)簡(jiǎn)單的例子描述了一個(gè)javascript對(duì)象是如何設(shè)置一個(gè)屬性的值和如何讀取屬性的值的。
賦值操作
一個(gè)對(duì)象的屬性的創(chuàng)建非常簡(jiǎn)單,直接通過(guò)賦值操作就可以完成屬性的創(chuàng)建。
var objectRef = new Object(); //create a generic javascript object.
一個(gè)名為testNumber的屬性可以這樣創(chuàng)建。
objectRef.testNumber = 5;
/* - or:- */
objectRef["testNumber"] = 5;
如果復(fù)制的屬性名稱已經(jīng)存在那么不會(huì)再次創(chuàng)建這個(gè)屬性,賦值操作僅僅是重新設(shè)置屬性的值
objectRef.testNumber = 8;
/* - or:- */
objectRef["testNumber"] = 8;
js對(duì)象的原型(prototype)自己本身也可以是對(duì)象,也可以有屬性(property),對(duì)于js對(duì)象的(prototype)的賦值操作跟普通對(duì)象屬性的創(chuàng)建
沒(méi)什么不同。
取值操作
在取值操作中property和prototype就不一樣了,先看最簡(jiǎn)單的property取值操作。
/*為一個(gè)對(duì)象的屬性賦值,如果這個(gè)對(duì)象沒(méi)有這個(gè)屬性,那么在賦值操作后,這個(gè)對(duì)象就有這個(gè)屬性了 */
objectRef.testNumber = 8;
/* 讀出這個(gè)屬性的值 */
var val = objectRef.testNumber;
/* 現(xiàn)在val 就得到了剛才賦予objectRef的值8了*/
prototype揭密
但是所有的對(duì)象都可以有prototypes, prototypes自己也是對(duì)象,那么他也可以有prototypes,這樣循環(huán)下去就形成了一個(gè)prototype鏈,
這個(gè)鏈當(dāng)他遇到鏈中隊(duì)形的prototype是null時(shí)中止。(Object的默認(rèn)的prototype是null)
var objectRef = new Object(); //create a generic javascript object.
創(chuàng)建一個(gè)新的js對(duì)象,這時(shí)這個(gè)對(duì)象的prototype是Null,所以objectRef的prototype鏈只包含一個(gè)對(duì)象Object.prototype
我們?cè)诳聪旅娴?nbsp;
/* 構(gòu)建MyObject1這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testNumber
*/
this.testNumber = formalParameter;
}
/* 構(gòu)建MyObject2這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testString*/
this.testString = formalParameter;
}
/* 下一步的操作會(huì)用MyObject1對(duì)象替換掉MyObject2默認(rèn)的prototype屬性*/
MyObject2.prototype = new MyObject1( 8 );
/* 最后我們創(chuàng)建MyObject2類(lèi)型的一個(gè)對(duì)象*/
var objectRef = new MyObject2( "String_Value" );
objectRef這個(gè)MyObject2類(lèi)型的對(duì)象有一個(gè)prototype的鏈,鏈中的第一個(gè)對(duì)象是MyObject1對(duì)象,MyObject1對(duì)象也有prototype,
這個(gè)prototype是Object默認(rèn)的prototype,Object.prototype的prototype是null,至此這條prototype鏈結(jié)束。
當(dāng)一個(gè)取值操作發(fā)生時(shí),objectRef 的整個(gè)prototype鏈就開(kāi)始工作
var val = objectRef.testString;
objectRef這個(gè)對(duì)象的有一個(gè)屬性叫做testString,那么這句會(huì)把testString的值賦給val
var val = objectRef.testNumber;
在objectRef這個(gè)對(duì)象里并沒(méi)有testNumber這個(gè)屬性,但是val卻的到了值8,而不是undefine,這是因?yàn)榻忉屍髟跊](méi)有在當(dāng)前對(duì)象找到要找
的屬性后,就會(huì)去檢查這個(gè)對(duì)象的prototype,objectRef的prototype是MyObject1對(duì)象,這個(gè)對(duì)象有testNumber這個(gè)屬性,所以val得到8這個(gè)值。
var val = objectRef.toString;
現(xiàn)在val是個(gè)function的引用,這個(gè)function是Object.prototype的property,由于MyObject1和MyObject2都沒(méi)有定義toString這個(gè)property
所以O(shè)bject.prototype返回。
var val = objectRef.madeUpProperty;
最后val是undefined,因?yàn)镸yObject1和MyObject2,還有Object都沒(méi)有定義madeUpProperty這個(gè)property,所以得到的是undefine.
讀操作會(huì)讀取在obj自己和prototype 鏈上發(fā)現(xiàn)的第一個(gè)同名屬性值
寫(xiě)操作會(huì)為obj對(duì)象本身創(chuàng)建一個(gè)同名屬性(如果這個(gè)屬性名不存在
這就意味著objectRef.testNumber = 3會(huì)在objectRef對(duì)象上創(chuàng)建一個(gè)property,名字是testNumber,當(dāng)下一次在要讀取testNumber時(shí)
propertype鏈就不會(huì)工作,僅僅會(huì)得到objectRef的property 3,而MyObject1的testNumber屬性并不會(huì)被修改。下面的可以驗(yàn)證
/* 構(gòu)建MyObject1這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject1 - type.
*/
function MyObject1(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testNumber
*/
this.testNumber = formalParameter;
}
/* 構(gòu)建MyObject2這個(gè)類(lèi)型的構(gòu)造函數(shù)
MyObject2 - type:-
*/
function MyObject2(formalParameter){
/* 為者對(duì)象創(chuàng)建一個(gè)屬性名字叫testString*/
this.testString = formalParameter;
}
/* 下一步的操作會(huì)用MyObject1對(duì)象替換掉MyObject2默認(rèn)的prototype屬性*/
var obj1 = new MyObject1( 8 );
MyObject2.prototype = obj1;
/* 最后我們創(chuàng)建MyObject2類(lèi)型的一個(gè)對(duì)象*/
var objectRef = new MyObject2( "String_Value" );
alert(objectRef.testNumber);
objectRef.testNumber = 5;
alert(objectRef.testNumber);
alert(obj1.testNumber);
您可能感興趣的文章:
- 比較詳細(xì)的javascript對(duì)象的property和prototype是什么一種關(guān)系
- JavaScript中Object和Function的關(guān)系小結(jié)
- javascript contains和compareDocumentPosition 方法來(lái)確定是否HTML節(jié)點(diǎn)間的關(guān)系
- in.js 一個(gè)輕量級(jí)的JavaScript顆?;K加載和依賴關(guān)系管理解決方案
- JavaScript中__proto__與prototype的關(guān)系深入理解
- javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類(lèi)型
- javascript引用類(lèi)型指針的工作方式
- 詳細(xì)分析JavaScript變量類(lèi)型
- JavaScript基本數(shù)據(jù)類(lèi)型及值類(lèi)型和引用類(lèi)型
- javascript中的五種基本數(shù)據(jù)類(lèi)型
- 簡(jiǎn)單談?wù)刯avascript Date類(lèi)型
- JavaScript各類(lèi)型的關(guān)系圖解
相關(guān)文章
由 element.appendChild(newNode) ,談開(kāi)去
由 element.appendChild(newNode) ,談開(kāi)去...2006-11-11
BootStrap select2 動(dòng)態(tài)改變值的方法
這篇文章主要介紹了BootStrap select2 動(dòng)態(tài)改變值的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02
JavaScript開(kāi)發(fā)人員的10個(gè)關(guān)鍵習(xí)慣小結(jié)
還在一味沒(méi)有目的的編寫(xiě)JavaScript代碼嗎?那么你就OUT了!讓我們一起來(lái)看看小編為大家搜羅的JavaScript開(kāi)發(fā)人員應(yīng)該具備的十大關(guān)鍵習(xí)慣吧2014-12-12
Javascript? Constructor構(gòu)造器模式與Module模塊模式
這篇文章主要介紹了Javascript? Constructor構(gòu)造器模式與Module模塊模式,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
webpack-dev-server 的 host 配置 0.0.0.0的方法
這篇文章主要介紹了webpack-dev-server 的 host 配置 0.0.0.0的方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,,需要的朋友可以參考下2024-01-01
前端JavaScript中l(wèi)ocation.reload刷新頁(yè)面用法詳解
這篇文章主要介紹了前端JavaScript中l(wèi)ocation.reload刷新頁(yè)面用法的相關(guān)資料,location.reload()是JavaScript中用于重新加載當(dāng)前頁(yè)面的方法,它可以接受一個(gè)布爾參數(shù),以決定是否忽略緩存,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02

