搜尋
首頁web前端js教程javascript物件的property和prototype關係

ECMAScript可以識別兩種類型的對象,一種叫做Native Object屬於語言範疇;一種叫做Host Object,由運行環境提供例如document對象,Dom Node等 
Native objects是一種鬆散的結構並且可以動態的增加屬性(property),所有的屬性都有一個名字和一個值,這個值可以是另一個物件的引用或是內建的資料型別(String, Number, Boolean, Null 或Undefined) 
下面的這個簡單的例子描述了一個javascript物件是如何設定一個屬性的值和如何讀取屬性的值的。

賦值操作 
一個物件的屬性的建立非常簡單,直接透過賦值運算就可以完成屬性的建立。


程式碼
var objectRef = new Object(); //create a generic javascript object.   

一個名為testNumber的屬性可以這樣建立。

代碼
objectRef.testNumber = 5;    
/* - or:- */   
objectRef["testNumber"] = 5;   

如果復制的屬性名稱已經存在那麼不會再次創建這個屬性,賦值操作僅僅是重新設定屬性的值

程式碼
objectRef.testNumber = 8;    
/* - or:- */   
objectRef["testNumber"] = 8;   

objectRef["testNumber"] = 8;   

objectRef["testNumber"] = 8;   
objectRef["testNumber"] = 8;   
objectRef["testNumber"] = 8;   

objectRef["testNumber"] = 8;   

objectRef["testNumber"] = 8;   ,也可以有屬性(property),對於js物件的(prototype)的賦值運算跟普通物件屬性的建立 
沒什麼不同。

取值操作 
在取值操作中property和prototype就不一樣了,先看最簡單的property取值操作。

程式碼
/*為一個物件的屬性賦值,如果這個物件沒有這個屬性,那麼在賦值運算後,這個物件就有這個屬性了*/   
objectRef.testNumber = 8;    
/* 讀出這個屬性的值*/   

var val = objectRef.testNumber;    

   

/* 現在val 得到了剛才賦予objectRef的值8了*/  

prototypes那麼他也可以有prototypes,這樣循環下去就形成了一個prototype鏈, 
這個鏈當他遇到鏈中隊形的prototype是null時中止。 (Object的預設的prototype是null)

程式碼
var objectRef = new Object(); //create a generic javascript object.   

存在新的js物件,這時這個物件的prototype鏈只包含一個物件Object.prototype 
我們在看下面的程式碼

程式碼
/* 建構MyObject1這個類型的建構子   
   MyObject   /* 為者對象創建一個屬性名字叫做testNumber   
    */   
    this.testNumber = formalParameter;    
}    :-   
*/   
function MyObject2(formalParameter){    
   /* 為者物件建立一個屬性名字叫做testString*/   
    this.testString = formalParameter;    
}     
   遠8 );
   
/* 最後我們建立MyObject2類型的一個物件*/   
   
var objectRef = new MyObject2( "String_Value" );   
objectRef對象,MyObject1對像也有prototype, 
這個prototype是Object預設的prototype,Object.prototype的prototype是null,至此這條prototype鏈結束。
當一個取值操作發生時,objectRef 的整個prototype鏈就開始工作

程式碼
var val = objectRef.testString;   

objectRef這個物件的有一個屬性的關鍵給val

程式碼
var val = objectRef.testNumber;   

在objectRef這個物件裡並沒有testNumber這個屬性,但是val卻的到了值8,而不是undefine,這是因為解釋器在當前物件上找到要沒有在當前物件上找到要沒有在當前物件找 

的屬性後,就會去檢查這個物件的prototype,objectRef的prototype是MyObject1對象,這個物件有testNumber這個屬性,所以val得到8這個值。

程式碼
var val = objectRef.toString;   

現在val是個function的引用,這個function是Object.prototype的property,由於MyObject1和MyObject2都沒有定義toString這個都沒有定義toString這個都沒有定義到
所以Object.prototype

所以傳回。


程式碼

var val = objectRef.madeUpProperty;   


最後val是undefined,因為MyObject1和MyObject2,而Object都沒有定義madeUpPropertymproperty,所以得到的是undefine.Tipin.和prototype 鏈上發現的第一個同名屬性值 

寫入操作會為obj物件本身建立一個同名屬性(如果這個屬性名稱不存在 

這就表示objectRef.testNumber = 3會在objectRef物件上建立一個property,名字是testNumber,當下一次在要讀取testNumber時 
propertype鏈就不會運作,只要會得到objectRef的property 3,而MyObject1的testNumber屬性並不會被修改。 * 建構MyObject1這個類型的建構子   
   MyObject1 - type.   
*/   

function MyObject1(formalParameter){    🠎test 

    this.testNumber = formalParameter;    
}    
   
/ * 建構MyObject2這個類型的建構子   
   MyObject2 - type:-   
*/   
function MyObject2(formalParameter){   formalParameter;    
}    
   
/ * 下一步的操作會用MyObject1物件取代掉MyObject2預設的prototype屬性*/   
var obj1 = new MyObject1( 8 );    
MyObject2.prototype = ob
var objectRef = new MyObject2( "String_Value" );    
   
alert(objectRef.testNumber);    objectRef.testNumber = 5);    objectRef.testNumber = 5);
alert(obj1.testNumber);    

 更多相關文章請關注PHP中文網(www.php.cn)!




陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)