javascript
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对象访问器