目錄
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 = '123@qq.com';
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 = '123@qq.com';
console.log(obj.email); // => undefined :無法向對象添加新的屬性
5.13 Object.seal(object) :密封對象,使其無法修改現有屬性的特性以及不能添加新的屬性
參數:
①object {object} :對象
返回值:
{object} 返回此對象
示例 :
var obj = {
name: 'tom',
age: 22
};
Object.seal(obj); // 密封對象
obj.email = '123@qq.com';
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)對象直接量;屬性特性默認為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特性等
| 特性名稱 | 描述 | 默認值 |
| 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不能為純數字
