首頁 web前端 js教程 javascript創建物件三種方法是什麼

javascript創建物件三種方法是什麼

Jun 09, 2021 pm 04:35 PM
javascript 創建對象

方法是:1、使用內建對象,JavaScript語言原生對像或運行期的宿主對象;2、使用JSON符號,採用簡單的「鍵/值對」的集合或有序的值列表;3、自訂物件構造,使用「this」關鍵字或使用原型prototype進行建構。

javascript創建物件三種方法是什麼

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript中物件的建立有以下幾種方式:  

(1)使用內建物件 

(2)使用JSON符號 

(3)自訂物件建構

一、使用內建物件

JavaScript可用的內建物件可分為兩種:

1,JavaScript語言原生對象(語言層級物件),如String、Object、Function等; 

2,JavaScript執行期間的宿主物件(環境宿主層級物件),如window、document、body等。 

我們所謂的使用內建對象,是指透過JavaScript語言原生物件的建構方法,實例化出一個新的物件。如:

var str = new String("实例初始化String"); 
var str1 = "直接赋值的String"; 
var func = new Function("x","alert(x)");//示例初始化
func var o = new Object();//示例初始化一个Object
登入後複製

二、使用JSON符號

(i)何謂JSON ? 

JSON (JavaScript Object Notation)即JavaScript物件命名,是一種輕量級的資料交換格式,易於閱讀和編寫,同時也易於及其解析和生成。它是基於《JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999》的子集。 JSON是完全獨立於語言的文字格式,因此成為資料交換的理想格式。

JSON作為JavaScript的一個自己,同時ActionScript、C、C#、ColdFusion、E、Java、JavaScript、ML、ObjectiveCAML、Perl、PHP、Python、Rebol、Ruby、Lua等一系列的語言都提供支持,使得JSON成為Ajax開發的首選方案。

JSON有兩種建構方式,一種是採用簡單的「鍵/值對」的集合,在不同的語言中被理解為物件、記錄、結構、字典、雜湊表、有鍵列表,或關聯數組等,另一種採用有序的值列表,大部分語言把它理解為數組。 

常用的創建方式是第一種,即採用「鍵/值對」集合的形式。在這種形式下,一個物件以「{」(左括號)開始,「}」(右括號)結束。每個“名稱”後面跟著一個“:”(冒號),“ ‘鍵/值' 對”之間使用“,”(逗號)分隔。 

JSON有以下特點:(1)簡單格式化的資料交換;(2)易於人們的讀寫習慣;(3)易於機器的分析與運作。 

在JavaScript中,JSON被理解為物件。透過字串形式的JSON,資料可以很方便地解析成JavaScript獨享,並進行資料的讀取傳遞。透過JSON,在某種程度上客服了JavaScript物件無法作為參數系列化傳遞的問題。

1,簡單的JSON 

{name:"刘德华",age:"25",sex:"男"}
登入後複製

2,JSON值的類型 

JSON的值可以是簡單的資料型,例如數字、浮點、字元等,也可以是數組及物件。例如以陣列作為member鍵值的JSON: 

{member:[{name:"刘德华"},{name:"郭富城"},{name:"张学友"},{name:"黎明"}]}
登入後複製
{ 
book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}], 
author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}] 
}
登入後複製

3,在JavaScript中使用JSON 

JSON是JavaScript原生格式,這表示在JavaScript中處理JSON資料不需要任何特殊的API或工具包,JavaScript預設將JSON當作一個物件處理。

將物件傳遞給一個變量,例如: 

var somebooks = { 
book:[{name:"三国演义"},{name:"西游记"},{name:"水浒传"},{name:"红楼梦"}], 
author:[{name:"罗贯中"},{name:"吴承恩"},{name:"施耐安",{name:"曹雪芹"}}] 
}
登入後複製

JSON的每個「鍵」相當於物件的屬性,例如存取book中的第一個條目,在JavaScript中,就可以簡單地使用「somebooks.book[0].name」來取得「三國演義」這個值。  

我們不但可以將一個JSON字串轉換為對象,反過來將一個物件「編譯」為一個JSON字串,以方便JavaScript中的物件的傳輸。例如: 

var Animals = new Object(); 
Animals.name = "dog"; 
Animals.sex = "Male"; 
Animals.age = "2";
登入後複製

Animals物件無法被序列化傳輸,將Animals物件轉換為JSON字串,也就是「{name:"dog",sex:"Male",age:"2"}」。這樣,把該JSON字串當作HTTP請求的一個參數傳遞,從而達到序列化傳輸Animals物件的目的。 

(ii)JSON透過字串形式來表達JavaScript的物件。如:

var myObject = {nickname:"my girlfried",name:"big pig"};
登入後複製

JSON實際上充當了一種在JavaScript物件和字串之間實現相互轉換的協定。由於JSON的「外表」可以看成但村的字串,因此JSON在JavaScript的物件傳輸方面可以起到一定的作用。例如把物件strObject轉換成字串後進行傳輸,在達到目的地後透過eval方法將其還原成物件: 

function test (o) 
{ 
alert (o.name) 
} 
var strObject = '{nickname:"my girlfriend",name:"big pig"}'; 
test (eval("(" + strObject + ")"));
登入後複製

三、自訂物件建構 

建立高階物件建構有兩種方式:使用「this」關鍵字建構、使用原型prototype建構。如:

//使用this关键字定义构造的上下文属性 
function Girl() 
{ 
this.name = "big pig"; 
this.age = 20; 
this.standing; 
this.bust; 
this.waist; 
this.hip; 
} 

//使用prototype 
function Girl(){} 
Girl.prototype.name = "big pig"; 
Girl.prototype.age = 20; 
Girl.prototype.standing; 
Girl.prototype.bust; 
Girl.prototype.waist; 
Girl.prototype.hip; 
alert(new Girl().name);
登入後複製

上例中的兩種定義在本質上沒有區別,都是定義「Girl」物件的屬性資訊。 「this」與「prototype」的差異主要在於屬性存取的順序。如: 

 function Test() 
{ 
this.text = function() 
{ 
alert("defined by this"); 
} 
} 
Test.prototype.test = function() 
{ 
alert("defined by prototype"); 
} 
var _o = new Test(); 
_o.test();//输出“defined by this”
登入後複製

当访问对象的属性或者方法是,将按照搜索原型链prototype chain的规则进行。首先查找自身的静态属性、方法,继而查找构造上下文的可访问属性、方法,最后查找构造的原型链。 

“this”与“prototype”定义的另一个不同点是属性的占用空间不同。使用“this”关键字,示例初始化时为每个实例开辟构造方法所包含的所有属性、方法所需的空间,而使用“prototype”定义,由于“prototype”实际上是指向父级的一种引用,仅仅是个数据的副本,因此在初始化及存储上都比“this”节约资源。

【推荐学习:javascript高级教程

以上是javascript創建物件三種方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱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

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>掩蓋:探險33-如何獲得完美的色度催化劑
2 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1677
14
CakePHP 教程
1430
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
activex部件不能創建物件如何解決 activex部件不能創建物件如何解決 Jan 24, 2024 pm 02:48 PM

解決方法:1、檢查拼字和路徑;2、新增對元件的引用;3、檢查登錄;4、以管理員身份運作;5、更新或修復Office;6、檢查安全軟體;7、使用其他版本的組件;8、查看錯誤訊息;9、尋找其他解決方案。詳細介紹:1、檢查拼字和路徑:確保物件的名稱和路徑沒有拼字錯誤,且檔案確實存在於指定的路徑中;2、新增對組件的參考等等。

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統 如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

javascript如何使用insertBefore javascript如何使用insertBefore Nov 24, 2023 am 11:56 AM

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

See all articles