Object 構造方法 · Javascript基礎篇

[TOC] >[success] # Object 構造方法 >[success] ## Object.create() ~~~ 'Object.create'是'創建對象'的一個方法，可以創建一個'繼承其他對象原型鏈方法'的對象：語法： Object.create(proto, [propertiesObject]) 參數： 1. 'proto'：必傳。表示新建對象的'原型對象'，該參數會被賦值到新對象的'原型'上。該'參數可以是null，對象，函數的prototype屬性'創建空對象（無'原型鏈__proto__屬性'的對象）時需傳'null' ,否則會拋出TypeError異常。 2. 'propertiesObject' : 可選。 '添加'到'新創建對象的可枚舉屬性'（即其'自身的屬性'，而不是原型鏈上的枚舉屬性）對象的屬性描述符以及相應的屬性名稱。這些屬性對應`Object.defineProperties()` 的第二個參數。 ~~~ 1. 創建空對象（無原型鏈__proto__屬性的對象）: ~~~ let obj1 = Object.create(null) let obj2 = {} console.log(obj1) // {} 無任何原型鏈屬性 console.log(obj2) // {} 附帶 __proto__屬性 ~~~ 2. 實現類式繼承（單繼承） ~~~ // 父類構造函數 function Parent (name, age) { this.name = name; this.age = age; } // 父類的原型鏈方法 Parent.prototype.hehe = function () { console.log(this.name) console.log(this.age) } // 子類構造函數 function Child () { } // 子類繼承父類原型鏈屬性和方法 Child.prototype = Object.create(Parent.prototype) Child.prototype.constructor = Child // 實例化子類對象 let childFun = new Child() // 給父類屬性賦值后執行父類方法 childFun.name = '爸爸的名字' childFun.age = '1000' childFun.hehe() ~~~ 3. 參數為對象時 ~~~ let obj1 = { name: '鳴子嘎', test() { console.log(this.name) } } let obj2 = Object.create(obj1) console.log(obj2.name) // 鳴子嘎 // 下面的obj3屬性name優先級高于obj1（原型）中的name屬性 let obj3 = Object.create(obj1, { name: { value: '毅子嘎' } }) console.log(obj3.name) // 毅子嘎 ~~~ 4. 混入繼承 ~~~ // 父親構造函數 function Father (name) { this.name = name } Father.prototype.test = function () { console.log(this.name, '父親') } // 母親構造函數 function Mother (name) { this.name = name } Mother.prototype.test = function () { console.log(this.name, '母親') } // 兒子構造函數 function Child () { } // 繼承一個類 Child.prototype = Object.create(Father.prototype) // 混合其它(多個原型時，并且原型的屬性或方法同名，后面原型會覆蓋前面原型中的屬性或方法) Object.assign(Mother.prototype, Father.prototype) // 重新指定constructor Child.prototype.constructor = Child; // 實例化兒子對象 let childFun = new Child() childFun.name = '打印出的是' childFun.test() // 打印出的是父親 ~~~ >[success] ## Object.defineProperties() ~~~ 'Object.defineProperties()'方法直接在一個對象上定義'新的屬性'或'修改現有屬性'，并返回該對象。語法： Object.defineProperties(obj, prop) 參數： 1. 'obj'：在其上定義或修改屬性的'對象'。 2. 'prop' : 要定義其可枚舉屬性或修改的屬性描述符的對象。對象中存在的屬性描述符主要有兩種： '數據描述符'和'訪問器描述符'。'描述符屬性'看下面'表格' ~~~ 1. 參數 | 數據描述符 | 訪問器描述符 | 作用 | 默認值 | | --- | --- | --- | --- | | configurable | | 是否可編輯、是否可刪除 | false | | enumerable | | 是否可枚舉 | false | | value | | 對象的value值 | undefined | | writable | | 是否可編輯 | false | | | get | 作為該屬性的 getter 函數，如果沒有 getter 則為undefined。函數返回值將被用作屬性的值。 | undefined | | | set | 作為屬性的 setter 函數，如果沒有 setter 則為undefined。函數將僅接受參數賦值給該屬性的新值。 | undefined | 2. 使用方法 ~~~ var obj = {}; Object.defineProperties(obj, { 'name': { value: '小明', writable: true, enumerable: true, configurable: true }, 'age': { value: '18', writable: false, enumerable: false, configurable: true } }); console.log(obj) // { name: '小明' } ~~~ >[success] ## Object.getOwnPropertyDescriptor() ~~~ 'Object.getOwnPropertyDescriptor()'方法返回'指定對象'上一個'自有屬性'對應的'屬性描述符'。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性）語法： Object.getOwnPropertyDescriptor(obj, prop) 參數： 1. 'obj'：需要查找的目標對象 2. 'prop' : 目標對象內屬性名稱 ~~~ 1. 簡單例子 ~~~ let obj = { haha: '奧利給' } console.log(Object.getOwnPropertyDescriptor(obj, "haha")) /** * { value: '奧利給', * writable: true, * enumerable: true, * configurable: true } */ ~~~ >[success] ## Object.getPrototypeOf() ~~~ 'Object.getPrototypeOf()'方法返回'指定對象'的'原型'（內部[[Prototype]]屬性的值）語法： Object.getPrototypeOf(object) 參數： 1. 'object'：要返回其原型的對象。返回值：給定對象的原型。如果沒有繼承屬性，則返回 null 。 ~~~ 1. 簡單例子 ~~~ const prototype1 = {} const object1 = Object.create(prototype1) console.log(Object.getPrototypeOf(object1) === prototype1) // true ~~~ >[success] ## Object.keys() ~~~ 'Object.keys()'方法會返回一個由一個'給定對象的自身可枚舉屬性組成的數組'，數組中屬性名的排列順序和使用 'for...in' 循環遍歷該對象時返回的順序一致。語法： Object.keys(obj) 參數： 1. 'obj'：要返回其枚舉自身屬性的對象。 ~~~ 1. 簡單例子 ~~~ // 數組 let arr = ['哈哈', '呵呵', '嘎嘎'] console.log(Object.keys(arr)) // [ '0', '1', '2' ] // 相當和下面這么寫一樣 // 對象 let arr2 = { '0': '哈哈', '1': '呵呵', '2': '嘎嘎' } console.log(Object.keys(arr2)) // [ '0', '1', '2' ] ~~~ >[success] ## Object.getOwnPropertyNames() ~~~ 'Object.getOwnPropertyNames()'方法返回一個'對象所有屬性名'（包括'不可枚舉屬性'但不包括 'Symbol值作為名稱的屬性'）組成的'數組'。語法： Object.getOwnPropertyNames(obj) 參數： 1. 'obj'：一個對象，其自身的可枚舉和不可枚舉屬性的名稱被返回。返回值 ~~~ 1. 簡單例子 ~~~ let obj = Object.create({},{ 'name': { configurable: true, // 可編輯、刪除 enumerable: false, // 不可枚舉 value: '呵呵噠', // 值 writable: true // 可編輯 }}) obj.aaa = '123' console.log(obj) // { aaa: '123' } console.log(Object.keys(obj)) // 返回 [ 'aaa' ] console.log(Object.getOwnPropertyNames(obj)) // 返回 [ 'name', 'aaa' ] ~~~