前言
最近在複習js的基礎內容，特此做下總結。
以下內容參考MDN
1、Object.defintProperty()
這個方法是用來設定物件屬性的一些特性。
語法
Object.defineProperty(obj, prop, descriptor) 複製程式碼
引數
obj: 要定義或修改屬性的物件。
prop: 要定義或修改的屬性。
descriptor: 要定義或修改的特性
返回值
被設定後的物件。
關於特性
之前專門有篇文章介紹物件屬性的特性。juejin.im/post/5abce3…
示例
let obj = {
_age: 3
};
<!-- 資料屬性 -->
Object.defineProperty(obj, 'name', {
configurable: false, // 能否通過 delete 刪除屬性從而重新定義屬性，能否修改屬性的特性，能否把屬性修改為訪問器屬性。
enumerable: false, // 能否通過 for-in 迴圈返回屬性。
writable: true, // 能否修改屬性的值
value: '張三' // 這個屬性的資料值。
})
<!-- 訪問器屬性 -->
Object.defineProperty(obj, 'age', {
configurable: true,
enumerable: true,
get: function () { // 讀取 age 屬性時，會執行這個函式。返回值就是 age 的值。
return this._age;
},
set: function (newValue) { // 寫入 age 屬性時，會執行這個函式。
if (newValue > 5) {
this._age += newValue;
} else {
this._age = newValue;
}
}
})
複製程式碼2、Object.defineProperties()
這個方法跟上面 Object.defineProperty()的作用是一樣的。只不過這個方法可以定義多個屬性。
示例
let obj = {
_age: 2
};
Object.defineProperties(obj, {
name: {
configurable: false,
writable: true,
value: '李四'
},
age: {
get: function () {
return this._age;
},
set: function (newValue) {
if (newValue > 5) {
this._age += newValue;
} else {
this._age = newValue;
}
}
}
})
複製程式碼3、Object.getOwnPropertyDescriptor()
這個方法可以獲取給定屬性的特性。
語法
Object.getOwnPropertyDescriptor(obj, prop) 複製程式碼
引數
obj: 目標所在的物件。
prop: 要獲取特性的屬性。
返回值
如果給定的屬性存在於物件上，則返回屬性描述符物件。否則返回 undefined。
示例
var o, d;
o = { get foo() { return 17; } };
d = Object.getOwnPropertyDescriptor(o, "foo");
// d {
// configurable: true,
// enumerable: true,
// get: /*the getter function*/,
// set: undefined
// }
o = { bar: 42 };
d = Object.getOwnPropertyDescriptor(o, "bar");
// d {
// configurable: true,
// enumerable: true,
// value: 42,
// writable: true
// }
o = {};
Object.defineProperty(o, "baz", {
value: 8675309,
writable: false,
enumerable: false
});
d = Object.getOwnPropertyDescriptor(o, "baz");
// d {
// value: 8675309,
// writable: false,
// enumerable: false,
// configurable: false
// }
複製程式碼4、Object.getOwnPropertyDescriptors()
這個方法，用來獲取一個物件所有自身屬性的特性描述符。
語法
Object.getOwnPropertyDescriptors(obj) 複製程式碼
引數
obj: 要獲取的目標物件。
返回值
所指定的物件的所有自身屬性的特性描述符，如果沒有任何自身屬性則返回空物件。
示例
- 淺拷貝一個物件
Object.assign()方法只能拷貝源物件的可列舉的自身屬性，同時拷貝時無法拷貝屬性的特性們，而且訪問器屬性會被轉為資料屬性，也無法拷貝源物件的原型。利用Object.getOwnPropertyDescriptors()配合Object.create()可以實現上面說的這些。Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); <!-- 演示 --> let obj = { width: '200', height: '200', color: 'red', arr: ['one', 'two'], sayWidth: function () { console.log('我的width：', this.width); } } let obj1 = Object.create(obj); let obj2 = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); console.log('Obj1：', obj1); //'Obj1：' {} <!-- obj物件的屬性和方法都新增到 obj1 的原型物件上了。--> console.log('Obj2：', obj2); //'Obj2：' { // width: '200', // height: '200', // color: 'red', // arr: ['one', 'two'], // sayWidth: function () { // console.log('我的width：', this.width); // } // } 複製程式碼
5、Object.getPrototypeOf()
這個方法返回給定物件的原型物件。
語法
Object.getPrototypeOf(obj) 複製程式碼
引數
obj: 要獲取原型的物件。
返回值
給定物件的原型。如果沒有繼承屬性，返回 null
示例
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name);
}
let zhangsan = new Person('張三', 20);
console.log(Object.getPrototypeOf(zhangsan));
// {
// sayName: f ()
// }
複製程式碼6、Object.getOwnPropertyNames()
這個方法返回給定物件的所有自身屬性的屬性名(包括不可列舉屬性，但不包括Symbol值作為名稱的屬性) 組成的陣列。
語法
Object.getOwnPropertyNames(obj) 複製程式碼
引數
obj: 目標物件。
返回值
在給定物件上找到的自身屬性對應的字串陣列。
示例
- 只獲取可列舉的屬性
下面的例子使用Array.prototype.filter()方法，從所有的屬性名陣列中去除不可列舉的屬性。剩餘的就是可列舉的屬性
function getEnumable(target) {
let keyNames = Object.getOwmPropertyNames(target);
let keyAllNames = Object.keys(target);
let tempArr = [];
tempArr = keyNames.filter(item, index) {
if (keyAllNames.indexOf(item) > -1) {
return true;
} else {
return false;
}
}
return tempArr;
}
複製程式碼今天先總結到這。明天繼續。