當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

038_JavaScript对象

發布時間：2025/4/17 javascript 78 豆豆

生活随笔收集整理的這篇文章主要介紹了 038_JavaScript对象小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 一切皆對象

1.1. 在JavaScript中, 幾乎"所有事物"都是對象。

布爾是對象(如果用new關鍵詞定義)
數字是對象(如果用new關鍵詞定義)
字符串是對象(如果用new關鍵詞定義)
數組永遠都是對象
函數永遠都是對象
對象永遠都是對象
日期永遠都是對象
正則表達式永遠都是對象
...... ?

1.2. 所有JavaScript值, 除了原始值, 都是對象。

2. 對象是包含變量的變量

2.1. JavaScript變量能夠包含單個的值:

var person = "Bill Gates";

2.2. JavaScript對象也是變量, 但是對象能夠包含很多值。

2.3. JavaScript對象值按照名稱 : 值對的形式編寫(名稱和值以冒號分隔)。

2.4. 實例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};

2.5. JavaScript對象是命名值的集合。

3. 創建JavaScript對象

3.1. 使用文本的方式創建單個對象。

3.2. 使用new?Object()創建單個對象。

3.3. 定義對象構造器, 然后使用new關鍵字創建構造類型的對象。

3.4. 在ECMAScript 5中, 也可以通過函數Object.create()來創建對象。

4. 使用文本的方式創建對象

4.1. 文本的方式創建對象指的是花括號{}中的名稱:值對。

4.2. 實例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};

4.3. 文本的方式是創建對象的最簡單方法。

5. 使用new關鍵字創建對象

5.1. 使用new Object()創建對象:

var person = new Object(); person.firstName = "Bill"; person.lastName = "Gates"; person.age = 50; person.eyeColor = "blue";

5.2. 上面的兩個例子, 使用文本的方式和new關鍵字創建對象, 結果是一樣的。

5.3. 出于簡易性、可讀性和執行速度的考慮, 請使用文本的方式創建對象。

6. 對象引用類型

6.1. 對象是通過引用來尋址, 而非值。

6.2. 有一個person對象, 下面的語句不會創建person的副本:

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"}; var obj = person;

6.3. 對象obj并非person的副本, 它就是person。obj和person是同一個對象。

6.4. 對obj的任何改變都將改變person, 因為obj和person是相同的對象。

6.4. 實例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"}; var obj = person;var x = 5; var y = x;obj.age = 16; // 這將同時改變obj.age和person.age y = 10; // x = 5, y = 10。改變y和x無關

7. 對象屬性

7.1. JavaScript對象中的命名值, 被稱為屬性。

7.2. JavaScript對象是無序屬性的集合。

7.3. 屬性通常可以被修改、添加和刪除, 但是某些屬性是只讀的。

8. 訪問屬性

8.1. 訪問對象屬性的語法是:

objectName.property 或者: objectName["property"] 或者: objectName[expression]

9. for...in循環遍歷對象的屬性

9.1. 可以使用for...in循環遍歷對象的可枚舉的屬性。

9.2. 語法

for (variable in object) {要執行的代碼 }

9.3. for...in循環中的代碼塊會為每個屬性執行一次。

10. 添加、修改屬性

10.1. 可以通過給對象新屬性賦值的方式, 向對象添加屬性。

10.2. 可以通過給對象已有屬性賦值的方式, 修改屬性。

10.3.?實例

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"};person.nationality = "English"; // 添加屬性 person.nationality = "Japanese"; // 修改屬性

11. this關鍵詞

11.1. 在JavaScript中, 被稱為this的事物是代碼的"擁有者"。

11.2. this的值, 在對象中使用時, 就是對象本身。

11.3. 在構造器函數和方法中, this是沒有值的。它是新對象的替代物。當一個新對象被創建時, this的值會成為這個新對象。

11.4. 請注意this并不是變量。它是關鍵詞。您無法改變this的值。

12. 對象方法

12.1. 方法是可以在對象上執行的動作。

12.2. 對象方法是包含函數定義的對象屬性。

12.3. JavaScript對象是被稱為屬性和方法的命名值的容器。

12.4. 請使用如下語法創建對象方法:

methodName : function() { 代碼行 }

13. 添加、修改方法

13.1. 同樣可以通過給對象新屬性賦值的方式, 向對象添加方法, 只不過屬性的值是方法。

13.2. 同樣可以通過給對象已有方法賦值的方式, 修改方法。

// 添加方法 person.fullName = function () {return this.firstName + " " + this.lastName; }; // 修改方法 person.fullName = function () {return (this.firstName + ' ' + this.lastName).toUpperCase(); };

14. 訪問對象方法

14.1. 請通過如下語法來訪問對象方法:

objectName.methodName()

14.2. fullName屬性在被通過()調用后會以函數形式執行。您通常會把fullName()描述為person對象的方法, 把fullName描述為屬性。

person.fullName();

14.3. 如果您訪問fullName屬性時沒有使用(), 則將返回函數定義。

person.fullName;

15. 刪除屬性和方法

15.1. delete關鍵詞從對象中刪除屬性和方法:

var person = {firstName: "Bill", lastName: "Gates", age: 62, eyeColor: "blue"}; person.fullName = function () {return this.firstName + " " + this.lastName; };delete person.age; // 或delete person["age"]; delete persion.fullName;

16. 例子

16.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>對象</title></head><body><script type="text/javascript">// 創建對象var person = {firstName: 'Bill',lastName: 'Gates',fullName: function() {return this.firstName + ' ' + this.lastName;}};for(let item in person){if ((typeof person[item]) == 'function') {document.write(person[item]() + '<br />');} else {document.write(person[item] + '<br />');}}document.write('<hr />');// 給對象添加新屬性person.id = 1001;// 給對象添加方法person.toUpperFullName = function() {return (this.firstName + ' ' + this.lastName).toUpperCase();};for(let item in person){if ((typeof person[item]) == 'function') {document.write(person[item]() + '<br />');} else {document.write(person[item] + '<br />');}}document.write('<hr />');// 修改屬性person.firstName = 'zhang';person.lastName = 'san';person.toUpperFullName = function() {return '名字大寫: ' + (this.firstName + ' ' + this.lastName).toUpperCase();};// 刪除屬性delete person.id;delete person.fullName;for(let item in person){if ((typeof person[item]) == 'function') {document.write(person[item]() + '<br />');} else {document.write(person[item] + '<br />');}}document.write('<hr />');document.write(person.toUpperFullName + '<br />');</script></body> </html>

16.2. 效果圖

17. 對象的鍵

17.1. 對象鍵通常我們使用: 數字字面量(可以定義類數組對象)、標識符和字符串。

17.2. 使用數組可以通用訪問這三種鍵。

17.3. 使用數組可以使用表達式動態生成鍵。

17.4. 例子

17.4.1. 代碼

<!DOCTYPE html> <html><head><title>對象的鍵數字字面量、標識符和字符串</title></head><body><script type="text/javascript">var obj = {0: 100001, age: 18, "name": 'zhangsan'};// 數字字面量鍵只能用數組訪問document.write('id: ' + obj[0] + '<br />');// 標識符鍵可以通過數組和.key方式訪問document.write('age: ' + obj["age"] + '<br />');document.write('age: ' + obj.age + '<br />');// 字符串鍵可以通過數組和.key方式訪問document.write('name: ' + obj["name"] + '<br />');document.write('name: ' + obj.name + '<br />');// 使用表達式鍵document.write('name: ' + obj["na" + "me"] + '<br />');</script></body> </html>

?17.4.2. 效果圖

總結

以上是生活随笔為你收集整理的038_JavaScript对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 027_JavaScript数组迭代
下一篇： 039_JavaScript对象访问器