目錄

1. 介紹：闡述 Object 物件。

2. 建構函式：介紹 Object 物件的建構函式。

3. 例項屬性：介紹 Object 物件的例項屬性：prototype、constructor等等。

4. 例項方法：介紹 Object 物件的例項方法： hasOwnProperty、isPrototypeOf、propertyIsEnumerable等等。

5. 靜態方法：介紹 Object 物件的靜態方法：Object.create()、Object.defineProperties()等等。

6. 屬性描述符：介紹屬性描述符的類別：資料屬性與訪問器屬性。

1. 介紹

　　Object物件，是所有JavaScript物件的超類(基類)。Object.prototype(Obecjt的原型)定義了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__ ：設定或返回物件的原型物件(IE中不支援此屬性)

說明：

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

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

3) 物件的__proto__ == 物件類的prototype

示例：

// 1.自定義物件多層繼承
function People(name) {
    this.name = name;
}

function Student(age) {
    this.age = age;
}
Student.prototype = new People(); // 設定Student的原型為People物件

var s = new Student(22);
console.log(s.__proto__); // => People 物件
console.log(Student.prototype); // => People 物件
console.log(s.__proto__ == Student.prototype); // => true

// 2.物件直接量 
var p = {}; // 等於new Object()
console.log(p.__proto__ == Object.prototype); // => true

3.2 prototype ：設定或返回物件類的原型物件

說明：

1) prototype為物件類的屬性。__proto__是物件的屬性。

2)  Js內建物件(Array、Date等物件)都有一個只讀的prototype屬性。 可將屬性和方法新增到原型中，但不能為內建物件分配其他原型。

3) 自定義物件的prototype屬性可進行讀寫操作。

示例：

var Student = function (name) {
    this.name = name;
};
// 給Student的原型新增一個sayHello方法
Student.prototype.sayHello = function () {
    alert('Hello,' + this.name);
}
var st = new Student('張三'); // 初始化物件st
console.log(st.name); // => 張三
st.sayHello(); // 彈出：Hello,張三

3.3 constructor ：表示建立此物件的建構函式

說明：

1) 設定或返回建立此物件的建構函式。

2) 若一個物件有多層繼承，將返回最先呼叫的建構函式。

3) obj.constructor.prototype 可表示物件的原型。

示例：

// 1.內建物件
var str = 'abc';
console.log(str.constructor); // => function String 建構函式
var o = {};
console.log(o.constructor); // => function Object 建構函式

// 2.自定義物件多層繼承 ：constructor返回最先呼叫的建構函式
function People(name) {
    this.name = name; // s物件初始化時，先呼叫People建構函式，再呼叫Student建構函式
    console.log('People呼叫');
}
function Student(age) {
    this.age = age;
    console.log('Student呼叫');
}
Student.prototype = new People(); // 設定Student的原型為People物件

var s = new Student(22);
console.log(s.constructor); // => function People 建構函式

總結：__proto__、prototype、constructor 的關係

說明：

1) 物件的__proto__ 等於 類的prototype

2) 物件的constructor 等於 類，所以obj.constructor.prototype 可表示物件的原型。

示例：

var o = {};
console.log(o.__proto__ === Object.prototype); // true ：物件的__proto__等於類的prototype
console.log(o.constructor === Object); // true ：物件的constructor 等於 類
console.log(o.constructor.prototype === Object.prototype); // true ：o.constructor.prototype 可表示物件的原型。

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('張三'); // 初始化物件st
console.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.Array
var 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類的原型為People
Student.prototype = new People();
var st = new Student();
console.log(Student.prototype.isPrototypeOf(st)); // => true ：st為Student一個物件
console.log(People.prototype.isPrototypeOf(st)); // => true ：Student的原型為People
console.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方法繼承自Array
console.log(array.propertyIsEnumerable('length')); // => false ：length屬性繼承自Array
console.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屬性不存在，也返回false
console.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()); // => true

var c = {};
console.log(c.valueOf()); // => Object {}

var s = 'abc';
console.log(s.valueOf()); // => abc

// 自定義個物件，重寫valueOf
var customObject = {};
customObject.valueOf = function () {
    return '自定義物件';
}
console.log(customObject.valueOf()); // => 自定義物件

5. 靜態方法

5.1 Object.create(prototype, propertyDescriptor)：建立並返回一個指定原型和指定屬性的物件

引數：

①prototype {prototype} ：返回物件的原型，可以為null。若為null，物件的原型為undefined。

②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); // => tom
console.log(obj.age); // => 22

obj.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} 屬性名稱

返回值：

示例 ：

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 資料屬性

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

預設值：

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

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

示例：

// 1)物件直接量；屬性特性預設為true
var o1 = {
    name: 'tom'
};
console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}

// 2)通過Object.create建立，屬性特性預設為false
var 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特性等

示例：

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不能為純數字