ECMAScript委員會：JavaScript最基礎的14種操作物件的方法

海洋餅乾發表於2021-12-06
JavaScript物件

先貼一個MDN地址，搜的時候搜js實現的方法名

1. 獲取物件原型 [ [ GetPrototypeOf ] ]

// js實現: GetPrototypeOf
let obj = {}
let proto = Object.getPrototypeOf(obj)
proto === obj.__proto__ === Object.prototype  // true

2. 設定物件原型 [ [ SetPrototypeOf ] ]

// js實現: SetPrototypeOf
let obj = {}
Object.setPrototypeOf(obj, { a: 1, b: 2 }) // 函式式
obj.__proto__ = { a: 1, b: 2 } // 賦值式
Object.prototype = { a: 1, b: 2 } // 賦值式
// 上面效果一樣

3. 獲取物件自有屬性 [ [ GetOwnProperty ] ]

// js實現: 
// 1. getOwnPropertyDescriptor 獲取物件下某一個屬性的描述符
// 2. getOwnPropertyDescriptors 獲取物件下所有屬性的描述符
// 3. getOwnPropertyNames 獲取物件下所有屬性名（不包括Symbol）
// 4. getOwnPropertySymbols 獲取物件下所有Symbol屬性名

// 描述符為 configurable enumerable writable value

4. 禁止物件擴充套件 [ [ PreventExtensions ] ]

// js實現: preventExtensions
let obj = { a: 1 }
Object.preventExtensions(obj 不可新增屬性，不可刪除，可讀)
// obj 變的不可新增屬性，可刪除屬性，可讀，可改

5. 獲取物件的可擴充套件性 [ [ IsExtensible ] ]

// js實現: isExtensible
let obj = {}
let extensible = Object.isExtensible(obj) // true

// 使物件變的不可擴充套件的方法
1. freeze 
2. seal 
3. preventExtensions

6. 攔截物件操作 [ [ DefineOwnProperty ] ]

// js實現: defineProperty 單個屬性, defineProperties 多個屬性
let obj = { a: 1 }
Object.defineProperty(obj, 'a', {
    value: 1,
    writable: true,
    configurable: true,
    enumerable: true,
    // 前面是描述符
    // value， writable可同時出現，get, set也可同時出現
    // 但當 value 和 writable 出現任意一個時，不可以配置 get, set，反之亦然
    get() {}
    set() {}
})

7. 判斷物件是否有某個自有屬性 [ [ HasProperty ] ]

// js實現: hasOwnProperty
var obj = { a: 1 }
Object.setPrototypeOf(obj, { b: 2 })
obj.hasOwnProperty('a') // true
obj.hasOwnProperty('b') // false

8. [ [ GET ] ]

// js實現: 關鍵字 in, obj.a 這種寫法中的 . 等，都是GET的實現

9. [ [ SET ] ]

// js實現: obj.a = 1, obj['a'] = 1 這種寫法都是SET的實現

10. [ [ Delete ] ]

// js實現: 關鍵字 delete

11. [ [ Enumerate ] ]

// js實現: 關鍵字組合 for in

12. [ [ OwnPropertyKeys ] ]

// js實現: keys
var obj = { a: 1, b: 2 }
Object.setPrototypeOf(obj, { c: 3 })
Object.keys(obj) // ['a', 'b']

13. 函式呼叫

// js實現: 執行函式宣告和執行函式表示式
function fn() {}    fn() // 執行函式宣告
var obj = {
    fn = function() {}
}
obj.fn() // 執行函式表示式

14. 例項化物件

// js實現: new 關鍵字

相關文章