比較詳細的javascript對象的property和prototype是什么一種關系
更新時間:2007年08月06日 22:14:32 作者:
ECMAScript可以識別兩種類型的對象,一種叫做Native Object屬于語言范疇;一種叫做Host Object,由運行環(huán)境提供例如document對象,
Dom Node等
Native objects是一種松散的結(jié)構(gòu)并且可以動態(tài)的增加屬性(property),所有的屬性都有一個名字和一個值,這個值可以是另一個對象的引用
或者是內(nèi)建的數(shù)據(jù)類型(String, Number, Boolean, Null 或者 Undefined)
下面的這個簡單的例子描述了一個javascript對象是如何設置一個屬性的值和如何讀取屬性的值的。
賦值操作
一個對象的屬性的創(chuàng)建非常簡單,直接通過賦值操作就可以完成屬性的創(chuàng)建。
代碼
1. var objectRef = new Object(); //create a generic javascript object.
一個名為testNumber的屬性可以這樣創(chuàng)建。
代碼
1. objectRef.testNumber = 5;
2. /* - or:- */
3. objectRef["testNumber"] = 5;
如果復制的屬性名稱已經(jīng)存在那么不會再次創(chuàng)建這個屬性,賦值操作僅僅是重新設置屬性的值
代碼
1. objectRef.testNumber = 8;
2. /* - or:- */
3. objectRef["testNumber"] = 8;
js對象的原型(prototype)自己本身也可以是對象,也可以有屬性(property),對于js對象的(prototype)的賦值操作跟普通對象屬性的創(chuàng)建
沒什么不同。
取值操作
在取值操作中property和prototype就不一樣了,先看最簡單的property取值操作。
代碼
1. /*為一個對象的屬性賦值,如果這個對象沒有這個屬性,那么在賦值操作后,這個對象就有這個屬性了 */
2. objectRef.testNumber = 8;
3. /* 讀出這個屬性的值 */
4. var val = objectRef.testNumber;
5.
6. /* 現(xiàn)在val 就得到了剛才賦予objectRef的值8了*/
prototype揭密
但是所有的對象都可以有prototypes, prototypes自己也是對象,那么他也可以有prototypes,這樣循環(huán)下去就形成了一個prototype鏈,
這個鏈當他遇到鏈中隊形的prototype是null時中止。(Object的默認的prototype是null)
代碼
1. var objectRef = new Object(); //create a generic javascript object.
創(chuàng)建一個新的js對象,這時這個對象的prototype是Null,所以objectRef的prototype鏈只包含一個對象Object.prototype
我們在看下面的代碼
代碼
1. /* 構(gòu)建MyObject1這個類型的構(gòu)造函數(shù)
2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* 為者對象創(chuàng)建一個屬性名字叫testNumber
6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* 構(gòu)建MyObject2這個類型的構(gòu)造函數(shù)
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* 為者對象創(chuàng)建一個屬性名字叫testString*/
15. this.testString = formalParameter;
16. }
17.
18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/
19. MyObject2.prototype = new MyObject1( 8 );
20.
21. /* 最后我們創(chuàng)建MyObject2類型的一個對象*/
22.
23. var objectRef = new MyObject2( "String_Value" );
objectRef這個MyObject2類型的對象有一個prototype的鏈,鏈中的第一個對象是MyObject1對象,MyObject1對象也有prototype,
這個prototype是Object默認的prototype,Object.prototype的prototype是null,至此這條prototype鏈結(jié)束。
當一個取值操作發(fā)生時,objectRef 的整個prototype鏈就開始工作
代碼
1. var val = objectRef.testString;
objectRef這個對象的有一個屬性叫做testString,那么這句代碼會把testString的值賦給val
代碼
1. var val = objectRef.testNumber;
在objectRef這個對象里并沒有testNumber這個屬性,但是val卻的到了值8,而不是undefine,這是因為解釋器在沒有在當前對象找到要找
的屬性后,就會去檢查這個對象的prototype,objectRef的prototype是MyObject1對象,這個對象有testNumber這個屬性,所以val得到8這個值。
代碼
1. var val = objectRef.toString;
現(xiàn)在val是個function的引用,這個function是Object.prototype的property,由于MyObject1和MyObject2都沒有定義toString這個property
所以Object.prototype返回。
代碼
1. var val = objectRef.madeUpProperty;
最后val是undefined,因為MyObject1和MyObject2,還有Object都沒有定義madeUpProperty這個property,所以得到的是undefine.
讀操作會讀取在obj自己和prototype 鏈上發(fā)現(xiàn)的第一個同名屬性值
寫操作會為obj對象本身創(chuàng)建一個同名屬性(如果這個屬性名不存在
這就意味著objectRef.testNumber = 3會在objectRef對象上創(chuàng)建一個property,名字是testNumber,當下一次在要讀取testNumber時
propertype鏈就不會工作,僅僅會得到objectRef的property 3,而MyObject1的testNumber屬性并不會被修改。下面的代碼可以驗證
代碼
1. /* 構(gòu)建MyObject1這個類型的構(gòu)造函數(shù)
2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* 為者對象創(chuàng)建一個屬性名字叫testNumber
6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* 構(gòu)建MyObject2這個類型的構(gòu)造函數(shù)
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* 為者對象創(chuàng)建一個屬性名字叫testString*/
15. this.testString = formalParameter;
16. }
17.
18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/
19. var obj1 = new MyObject1( 8 );
20. MyObject2.prototype = obj1;
21.
22. /* 最后我們創(chuàng)建MyObject2類型的一個對象*/
23.
24. var objectRef = new MyObject2( "String_Value" );
25.
26. alert(objectRef.testNumber);
27. objectRef.testNumber = 5;
28. alert(objectRef.testNumber);
29. alert(obj1.testNumber);
Dom Node等
Native objects是一種松散的結(jié)構(gòu)并且可以動態(tài)的增加屬性(property),所有的屬性都有一個名字和一個值,這個值可以是另一個對象的引用
或者是內(nèi)建的數(shù)據(jù)類型(String, Number, Boolean, Null 或者 Undefined)
下面的這個簡單的例子描述了一個javascript對象是如何設置一個屬性的值和如何讀取屬性的值的。
賦值操作
一個對象的屬性的創(chuàng)建非常簡單,直接通過賦值操作就可以完成屬性的創(chuàng)建。
代碼
1. var objectRef = new Object(); //create a generic javascript object.
一個名為testNumber的屬性可以這樣創(chuàng)建。
代碼
1. objectRef.testNumber = 5;
2. /* - or:- */
3. objectRef["testNumber"] = 5;
如果復制的屬性名稱已經(jīng)存在那么不會再次創(chuàng)建這個屬性,賦值操作僅僅是重新設置屬性的值
代碼
1. objectRef.testNumber = 8;
2. /* - or:- */
3. objectRef["testNumber"] = 8;
js對象的原型(prototype)自己本身也可以是對象,也可以有屬性(property),對于js對象的(prototype)的賦值操作跟普通對象屬性的創(chuàng)建
沒什么不同。
取值操作
在取值操作中property和prototype就不一樣了,先看最簡單的property取值操作。
代碼
1. /*為一個對象的屬性賦值,如果這個對象沒有這個屬性,那么在賦值操作后,這個對象就有這個屬性了 */
2. objectRef.testNumber = 8;
3. /* 讀出這個屬性的值 */
4. var val = objectRef.testNumber;
5.
6. /* 現(xiàn)在val 就得到了剛才賦予objectRef的值8了*/
prototype揭密
但是所有的對象都可以有prototypes, prototypes自己也是對象,那么他也可以有prototypes,這樣循環(huán)下去就形成了一個prototype鏈,
這個鏈當他遇到鏈中隊形的prototype是null時中止。(Object的默認的prototype是null)
代碼
1. var objectRef = new Object(); //create a generic javascript object.
創(chuàng)建一個新的js對象,這時這個對象的prototype是Null,所以objectRef的prototype鏈只包含一個對象Object.prototype
我們在看下面的代碼
代碼
1. /* 構(gòu)建MyObject1這個類型的構(gòu)造函數(shù)
2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* 為者對象創(chuàng)建一個屬性名字叫testNumber
6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* 構(gòu)建MyObject2這個類型的構(gòu)造函數(shù)
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* 為者對象創(chuàng)建一個屬性名字叫testString*/
15. this.testString = formalParameter;
16. }
17.
18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/
19. MyObject2.prototype = new MyObject1( 8 );
20.
21. /* 最后我們創(chuàng)建MyObject2類型的一個對象*/
22.
23. var objectRef = new MyObject2( "String_Value" );
objectRef這個MyObject2類型的對象有一個prototype的鏈,鏈中的第一個對象是MyObject1對象,MyObject1對象也有prototype,
這個prototype是Object默認的prototype,Object.prototype的prototype是null,至此這條prototype鏈結(jié)束。
當一個取值操作發(fā)生時,objectRef 的整個prototype鏈就開始工作
代碼
1. var val = objectRef.testString;
objectRef這個對象的有一個屬性叫做testString,那么這句代碼會把testString的值賦給val
代碼
1. var val = objectRef.testNumber;
在objectRef這個對象里并沒有testNumber這個屬性,但是val卻的到了值8,而不是undefine,這是因為解釋器在沒有在當前對象找到要找
的屬性后,就會去檢查這個對象的prototype,objectRef的prototype是MyObject1對象,這個對象有testNumber這個屬性,所以val得到8這個值。
代碼
1. var val = objectRef.toString;
現(xiàn)在val是個function的引用,這個function是Object.prototype的property,由于MyObject1和MyObject2都沒有定義toString這個property
所以Object.prototype返回。
代碼
1. var val = objectRef.madeUpProperty;
最后val是undefined,因為MyObject1和MyObject2,還有Object都沒有定義madeUpProperty這個property,所以得到的是undefine.
讀操作會讀取在obj自己和prototype 鏈上發(fā)現(xiàn)的第一個同名屬性值
寫操作會為obj對象本身創(chuàng)建一個同名屬性(如果這個屬性名不存在
這就意味著objectRef.testNumber = 3會在objectRef對象上創(chuàng)建一個property,名字是testNumber,當下一次在要讀取testNumber時
propertype鏈就不會工作,僅僅會得到objectRef的property 3,而MyObject1的testNumber屬性并不會被修改。下面的代碼可以驗證
代碼
1. /* 構(gòu)建MyObject1這個類型的構(gòu)造函數(shù)
2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* 為者對象創(chuàng)建一個屬性名字叫testNumber
6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* 構(gòu)建MyObject2這個類型的構(gòu)造函數(shù)
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* 為者對象創(chuàng)建一個屬性名字叫testString*/
15. this.testString = formalParameter;
16. }
17.
18. /* 下一步的操作會用MyObject1對象替換掉MyObject2默認的prototype屬性*/
19. var obj1 = new MyObject1( 8 );
20. MyObject2.prototype = obj1;
21.
22. /* 最后我們創(chuàng)建MyObject2類型的一個對象*/
23.
24. var objectRef = new MyObject2( "String_Value" );
25.
26. alert(objectRef.testNumber);
27. objectRef.testNumber = 5;
28. alert(objectRef.testNumber);
29. alert(obj1.testNumber);
您可能感興趣的文章:
- javascript prototype的深度探索不是原型繼承那么簡單
- 為JS擴展Array.prototype.indexOf引發(fā)的問題探討及解決
- 深入了解javascript中的prototype與繼承
- js使用Array.prototype.sort()對數(shù)組對象排序的方法
- javascript Array.prototype.slice使用說明
- 判斷js中各種數(shù)據(jù)的類型方法之typeof與0bject.prototype.toString講解
- JavaScript為對象原型prototype添加屬性的兩種方式
- javascript Prototype 對象擴展
- JavaScript中的prototype.bind()方法介紹
- JavaScript中的原型prototype完全解析
相關文章
BootStrap實現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實現(xiàn)帶有增刪改查功能的表格,表格封裝了3個版本,接下來通過本文給大家展示下樣式及代碼,對bootstrap增刪改查相關知識感興趣的朋友一起通過本文學習吧2016-10-10javascript實現(xiàn)將文件保存到本地方法匯總
本文給大家匯總介紹了3中使用javascript實現(xiàn)將文件保存到本地的方法,非常的簡單實用,有需要的小伙伴可以參考下。2015-07-07Javascript 模擬mvc實現(xiàn)點餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實現(xiàn)點餐程序案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12JavaScript中函數(shù)聲明優(yōu)先于變量聲明的實例分析
同一個標示符,先后用var和function聲明它。最后它是什么呢2012-03-03