JavaScript Object對象

標籤：

Object對象1. 介紹

　　Object對象，是所有JavaScript對象的超類(基類)。定義了Js對象的基本方法和屬性。

2. 建構函式2.1 new Object() ：返回一個Object執行個體2.2 new Object(value) ：根據value的值，返回不同的對象(Number、Boolean、String)

參數：

①value {number | bool | string} ：一個數字、布爾值或者字串

傳回值：

{Number、Boolean、String} 返回一個轉換後的對象

樣本 ：

var o = new Object(123);console.log(o); // => Number對象o = new Object(true);console.log(o); // => Boolean對象o = new Object(‘abc‘);console.log(o); // => String對象

 

3. 執行個體屬性3.1 __proto__ ：設定或返回對象的原型

說明：

1) 賦值時，對象繼承新原型的所有方法和屬性，以及新原型的原型鏈中的所有方法和屬性。

2) 屬性名稱以兩個底線開始和結束。

樣本：

// 1.直接對象var s = {};console.log(s.__proto__); // => Object {}：原型預設為Object// 2.設定原型為數組s.__proto__ = new Array();console.log(s.__proto__); // => []// 3.設定一個建構函式var People = function (name) {    this.name = name;}s.__proto__ = new People();console.log(s.__proto__); // => People {name: undefined} ：原型變更為People// 4.設定一個直接對象var student = { age: 1 };s.__proto__ = student;console.log(s.__proto__); // => Object {age: 1} ：原型變更為Object

 

3.2 prototype ：設定或返回 對象類的原型

說明：

1) 此函數為對象類的屬性。__proto__是對象的屬性。

2)  JavaScript內部對象都有一個唯讀prototype屬性。 可將屬性和方法添加到原型中，但不能為對象分配其他原型。

3) 自訂對象的prototype屬性可進行讀寫操作。

樣本：

var Student = function (name) {    this.name = name;};// 給Student的原型添加一個sayHello方法Student.prototype.sayHello = function () {    alert(‘Hello,‘ + this.name);}var st = new Student(‘張三‘); // 初始化對象stconsole.log(st.name); // => 張三st.sayHello(); // 彈出：Hello,張三

 

4. 執行個體方法4.1 hasOwnProperty(propertyName) ：判斷對象是否擁有一個指定名稱的執行個體屬性(非繼承)

參數：

①propertyName {string} ：屬性名稱。

傳回值：

{bool} 判斷對象是否擁有一個指定名稱的本地定義(非繼承)的屬性；此方法不會檢查對象原型鏈中的屬性。

true ：屬性為對象的執行個體屬性，非繼承。

false ：屬性不為對象的執行個體屬性。

樣本 ：

// 1.Object對象var o = new Object();o.name = ‘自訂屬性‘; // 定義一個執行個體屬性console.log(o.hasOwnProperty(‘name‘)); // => true：name屬性為執行個體o自己定義的，而非繼承console.log(o.hasOwnProperty(‘toString‘)); // => false：toString為繼承屬性// 2.自訂對象var Student = function (name) {    this.name = name;};// 給Student的原型添加一個sayHello方法Student.prototype.sayHello = function () {    alert(‘Hello,‘ + this.name);}// 給Student的原型添加一個age屬性Student.prototype.age = ‘‘;var st = new Student(‘張三‘); // 初始化對象stconsole.log(st.hasOwnProperty(‘name‘)); // => true ：調用建構函式時，通過this.name附加到執行個體對象上console.log(st.hasOwnProperty(‘sayHello‘)); // => false ：sayHello方法為原型上的成員console.log(st.hasOwnProperty(‘age‘)); // => false ：age屬性為原型上的成員

 

4.2 isPrototypeOf(obejct) ：判斷某個原型是否出現在對象的原型鏈中

文法：

prototype.isPrototypeOf(object)

參數：

①obejct {object} ：被檢測的對象。

傳回值：

{bool} 返回某個原型是否出現在對象的原型鏈中

true ：是

false ：不是

樣本 ：

// 1.Obejct對象var o = new Object();console.log(Object.prototype.isPrototypeOf(o)); // => true ：o為Obejct一個對象// 2.Arrayvar array = [1, 2, 3];console.log(Array.prototype.isPrototypeOf(array)); // => true ：數組原型console.log(Object.prototype.isPrototypeOf(array)); // => true ：Object是所有對象的基原型// 3.自訂對象var People = function () {}var Student = function () {}// 設定Student類的原型為PeopleStudent.prototype = new People();var st = new Student();console.log(Student.prototype.isPrototypeOf(st)); // => true ：st為Student一個對象console.log(People.prototype.isPrototypeOf(st)); // => true ：Student的原型為Peopleconsole.log(Object.prototype.isPrototypeOf(st)); // =>true ：Object是所有對象的基原型

 

4.3 propertyIsEnumerable(propertyName) ：判斷指定名稱的屬性是否為執行個體屬性並且是可枚舉的(可用for/in迴圈枚舉)

參數：

①propertyName {string} ：屬性名稱

傳回值：

{bool} 判斷屬性是否為執行個體屬性並且是可枚舉的(可用for/in迴圈枚舉)，不考慮原型鏈中的成員。

true ：是

false ：不是

樣本 ：

// 1.Array對象var array = [1, 2, 3];array.name = ‘Array‘;console.log(array.propertyIsEnumerable(‘name‘)); // => true ：name屬性為執行個體屬性console.log(array.propertyIsEnumerable(‘join‘)); // => false ：join方法繼承自Arrayconsole.log(array.propertyIsEnumerable(‘length‘)); // => false ：length屬性繼承自Arrayconsole.log(array.propertyIsEnumerable(‘toString‘)); // => false ：toString方法繼承自Object// 2.自訂對象var Student = function (name) {    this.name = name;}// 定義一個原型方法Student.prototype.sayHello = function () {    alert(‘Hello‘ + this.name);};var a = new Student(‘tom‘);console.log(a.propertyIsEnumerable(‘name‘)); // => true ：name為自身定義的執行個體屬性console.log(a.propertyIsEnumerable(‘age‘)); // => false ：age屬性不存在，也返回falseconsole.log(a.propertyIsEnumerable(‘sayHello‘)); // => false ：sayHello屬於原型方法

 

4.4 toLocaleString() ：返回當前對象的一個本地化的字串表示4.5 toString() ：返回當前對象的一個字串表示形式4.6 valueOf() ：返回當前對象的原始值

參數：無

傳回值：

{object} 返回當前對象關聯的原始值，若沒有相關聯的值，則返回對象本身

樣本 ：

var a = [1, 2, 3];console.log(a.valueOf()); // => [1, 2, 3]var b = true;console.log(b.valueOf()); // => truevar c = {};console.log(c.valueOf()); // => Object {}var s = ‘abc‘;console.log(s.valueOf()); // => abc// 自訂個對象，重寫valueOfvar customObject = {};customObject.valueOf = function () {    return ‘自訂對象‘;}console.log(customObject.valueOf()); // => 自訂對象

 

5. 靜態方法5.1 Object.create(prototype, propertyDescriptor)：建立並返回一個指定原型和指定屬性的對象

參數：

①prototype {prototype} ：返回對象的原型，可以為null。

②propertyDescriptor {propertyDescriptor} 可選：屬性描述符。

屬性描述符：設定屬性的一系列特性；

文法格式：

propertyName: {    value: ‘‘, // 設定此屬性的值    writable: true, // 設定此屬性是否可寫入；預設為false：唯讀    enumerable: true, // 設定此屬性是否可枚舉(通過for/in預付)；預設為false：不可枚舉    configurable: true // 設定此屬性是否可配置；如：是否可以修改屬性的特性及刪除屬性。預設為false}

傳回值：

{object} 返回一個指定原型和指定屬性的對象

樣本 ：

// 建立個自訂對象，設定name和age屬性var obj = Object.create(null, {    name: {        value: ‘tom‘,        writable: true,        enumerable: true,        configurable: true    },    age: {        value: 22    }});console.log(obj.name); // => tomconsole.log(obj.age); // => 22obj.age = 28;console.log(obj.age); // => 22 ：age屬性的writable預設為false，此屬性為唯讀for (p in obj) {    console.log(p); // => name ：只輸出name屬性；age屬性的enumerable預設為false，不能通過for/in 枚舉}

 

5.2  Object.defineProperties(object, propertyDescriptor) ：添加/修改對象一個或多個屬性的特性

參數：

①object {object} ：對象

②propertyDescriptor {propertyDescriptor} 屬性描述符。

說明：

若對象包含此屬性，則是修改此屬性的特性；否則為為對象添加此屬性。

樣本 ：

var obj = {};// 為對象添加name和age屬性Object.defineProperties(obj, {    name: {        value: ‘tom‘,        enumerable: true    },    age: {        value: 22,        enumerable: true     }});for (p in obj) {    console.log(p); // => name、age ：輸出name和age屬性}

　　

5.3 Object.defineProperty(obj, propertyName, propertyDescriptor) ：添加/修改對象指定屬性的特性

參數：

①object {object} ：對象

②propertyName {string} ：屬性的名稱

③propertyDescriptor {propertyDescriptor} 屬性描述符。

說明 ：

若對象包含此屬性，則是修改此屬性的特性；否則為添加此屬性。

樣本：

var obj = {};// 添加一個name屬性Object.defineProperty(obj, ‘name‘, {        value: ‘tom‘,        writable: true,        enumerable: true,        configurable:true    });console.log(obj.name); // => tom ：輸出name屬性的value的值

 

5.4 Object.freeze(object) ：凍結對象，使其不能添加屬性以及無法對現有的執行個體屬性進行特性更改、值修改、屬性刪除等操作

參數：

①object {object} ：對象

說明 ：

1) 此操作無法復原，凍結後無法進行解鎖。

2) 隻影響執行個體屬性，不影響原型屬性。

樣本：

var obj = {    name: ‘tom‘,    age: 22};Object.freeze(obj); // 凍結對象obj.email = ‘[email protected]‘;console.log(obj.email); // undefined ：無法添加屬性obj.age = 25;console.log(obj.age); // 22 ：無法設定屬性的值

 

5.5 Object.getOwnPropertyDescriptor(object, propertyName) ：返回對象屬性的描述符

參數：

①object {object} ：對象

②propertyName {propertyName} 屬性名稱

傳回值：

{propertyDescriptor} 屬性描述符對象

樣本 ：

var obj = {    name: ‘tom‘,    age: 22};var propertyDes = Object.getOwnPropertyDescriptor(obj, ‘name‘);console.log(propertyDes); // => Object {value: "tom", writable: true, enumerable: true, configurable: true} ：輸出描述符對象

　　

5.6 Object.getOwnPropertyNames(object) ：返回一個數組，包含對象的所有執行個體屬性和方法，不包含原型繼承的屬性和方法

參數：

①object {object} ：對象

傳回值：

{Array} 一個數組，包含對象的所有執行個體屬性和方法，不包含原型繼承的屬性和方法

樣本 ：

var obj = {    name: ‘tom‘,    age: 22,    sayHello: function () {        alert(‘Hello‘ + this.name);    }};console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] ：返回對象的執行個體成員

 

5.7 Object.getPrototypeOf(object) ：返回對象的上一級原型

參數：

①object {object} ：對象

傳回值：

{object} 返回原型對象

樣本 ：

// 1.對象直接量var obj = {    name: ‘tom‘,    age: 22,    sayHello: function () {        alert(‘Hello‘ + this.name);    }};console.log(Object.getPrototypeOf(obj)); // => Object 對象：對象直接量的原型為Object// 2.自訂對象var People = function (name) {    this.name = name;};var p = new People(‘tom‘);var people = Object.getPrototypeOf(p);console.log(people); // => People 對象：new 建立的對象使用建構函式的prototype屬性作為他們的原型console.log(Object.getPrototypeOf(people)); // => Object 對象：原型People的原型為Object

　　

5.8 Object.isExtensible(object) ：判斷是否可向對象添加新的屬性5.9 Object.isFrozen(object) ：判斷對象是否凍結;true：不能修改對象的現有屬性特性和值並且不能添加新的屬性5.10 Object.isSealed(object) ：判斷對象是否封閉;true：不能修改對象的現有屬性特性並且不能添加新的屬性

 

5.11 Object.keys(object) ：返回一個數組，包含對象的可枚舉屬性和方法的名稱

參數：

①object {object} ：對象

傳回值：

{Array} 返回一個數組，包含對象的可枚舉屬性和方法的名稱

說明：

此方法與getOwnPropertyNames()類似，但getOwnPropertyNames()包含了可枚舉和不可枚舉的成員

樣本 ：

var obj = {    name: ‘tom‘,    age: 22,    sayHello: function () {        alert(‘Hello‘ + this.name);    }};// 1)getOwnPropertyNames與keys方法返回的內容都相同console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] ：返回對象的所有執行個體成員console.log(Object.keys(obj)); // => ["name", "age", "sayHello"] ：返回對象的所有可枚舉成員// 設定對象的name屬性不可枚舉Object.defineProperty(obj, ‘name‘, {        enumerable: false    });// 2)keys方法，只包含可枚舉成員console.log(Object.getOwnPropertyNames(obj)); // => ["name", "age", "sayHello"] ：返回對象的所有執行個體成員console.log(Object.keys(obj)); // => ["age", "sayHello"] ：返回對象的所有可枚舉成員

  

5.12 Object.preventExtensions(object) ：設定對象不能添加新的屬性

參數：

①object {object} ：對象

傳回值：

{object} 返回此對象

樣本 ：

var obj = {    name: ‘tom‘,    age: 22};Object.preventExtensions(obj); // 設定對象不能添加新的屬性obj.email = ‘[email protected]‘;console.log(obj.email); // => undefined ：無法向對象添加新的屬性

 

5.13 Object.seal(object) ：密封對象，使其無法修改現有屬性的特性以及不能添加新的屬性

參數：

①object {object} ：對象

傳回值：

{object} 返回此對象

樣本 ：

var obj = {    name: ‘tom‘,    age: 22};Object.seal(obj); // 密封對象obj.email = ‘[email protected]‘;console.log(obj.email); // => undefined ：無法向對象添加新的屬性// 報異常：無法修改對象屬性的特性Object.defineProperty(obj, ‘name‘, {        enumerable: false    });

 

6.屬性描述符

分為資料屬性和訪問器屬性；

兩者可相互轉換，若轉換後未設定enumerable和configurable特性(兩類屬性描述符都包含這2個特性)，將預設採用轉換前的值。

6.1 資料屬性

說明：包含屬性的操作特性；如：設定值、是否可枚舉等等

特性名稱	描述	預設值
value	設定屬性的值	undefined
writable	是否可修改屬性的值；true：可修改屬性的值；false：不可修改屬性的值	false
enumerable	是否可枚舉屬性；true：可枚舉，可通過for/in語句枚舉屬性；false：不可枚舉	false
configurable	是否可修改屬性的特性；true：可修改屬性的特性(如把writable從false改為true)；false：不可修改屬性的特性	false

 

 

 

 

預設值：

1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函數的情況下添加資料屬性，writable、enumerable和configurable預設值為false。

2)使用對象直接量建立的屬性，writable、enumerable和configurable特性預設為true。

樣本：

// 1)對象直接量；屬性特性預設為truevar o1 = {    name: ‘tom‘};console.log(Object.getOwnPropertyDescriptor(o1, ‘name‘)); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}// 2)通過Object.create建立，屬性特性預設為falsevar o2 = Object.create(null, {    name: {value:‘tom‘}});console.log(Object.getOwnPropertyDescriptor(o2, ‘name‘)); // => Object {value: "tom", writable: false, enumerable: false, configurable: false}

 

6.2 訪問器屬性

說明：設定屬性的訪問方式；set、get特性等

特性名稱	描述	預設值
get	屬性的傳回值函數	undefined
set	屬性的設定值函數；含有一個賦值參數	undefined
enumerable	是否可枚舉屬性；true：可枚舉，可通過for/in語句枚舉屬性；false：不可枚舉	false
configurable	是否可修改屬性的特性；true：可修改屬性的特性(如把writable從false改為true)；false：不可修改屬性的特性	false

 

 

 

 

樣本：

var obj = {};// 添加一個屬性，並設定為訪問器屬性Object.defineProperty(obj, "name", {    get: function () {        return this._name; // get和set裡的變數不要使用屬性，如：屬性為name，get和set用的是_name    },    set: function (x) {        if (isNaN(x)) {            this._name = x;        } else {            this._name = ‘name不能為純數字‘;        }    },    enumerable: true,    configurable: true});console.log(Object.getOwnPropertyDescriptor(obj, ‘name‘)); // => Object {get: function, set: function, enumerable: true, configurable: true} obj.name = ‘12‘;console.log(obj.name); // => name不能為純數字

 

==================================系列文章==========================================

本篇文章：3.7 JavaScript Object對象

Web開發之路系列文章

 

JavaScript Object對象