1. 程式人生 > 實用技巧 >JavaScript標準內建物件——Object

JavaScript標準內建物件——Object

寫在前面

標準內建物件又名全域性的物件,是在全域性作用域裡的物件,一般是掛在 window 上的屬性物件或方法。Object 物件裡的方法有很多,這裡僅僅記錄用到過的方法函式的簡單用法。

1. Object.create()

Object.create()方法建立一個新物件,使用現有的物件來提供新建立的物件的__proto__。就是以某一個物件為原型建立一個物件。

語法為:Object.create(proto[, propertiesObject])

我們常用的定義一個物件的方法為直接定義,得到的結構如下:

想要在建立時就可以繼承一些來自原型的屬性和方法,可用 Object.create() 定義物件,如下:

2. Object.assign()

Object.assign() 方法用於將所有可列舉屬性的值從一個或多個源物件複製到目標物件。它將返回目標物件。

語法為:Object.assign(target, ...sources)

可用於物件的拷貝。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

3. Object.freeze()

Object.freeze() 方法可以凍結一個物件。一個被凍結的物件再也不能被修改;凍結了一個物件則不能向這個物件新增新的屬性,不能刪除已有屬性,不能修改該物件已有屬性的可列舉性、可配置性、可寫性,以及不能修改已有屬性的值。此外,凍結一個物件後該物件的原型也不能被修改。freeze() 返回和傳入的引數相同的物件。

語法為:Object.freeze(obj)

const obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// expected output: 42

4. Object.defineProperty

Object.defineProperty() 方法會直接在一個物件上定義一個新屬性,或者修改一個物件的現有屬性,並返回此物件。

語法為: Object.defineProperty(obj, prop, descriptor),其中 descriptor 為屬性描述符。

物件裡的屬性描述符目前有兩種形式:資料描述符存取描述符,這兩種描述符都是物件。

資料描述符:資料描述符是一個具有值的屬性,該值可以是可寫的,也可以是不可寫的。

存取描述符:存取描述符是由 getter 函式和 setter 函式所描述的屬性。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42
const obj = {n: 0}

Object.defineProperty(obj, 'add', {
      get(){
            return this.n;
      },
      set: function(value){
            this.n += value;
      }
})

console.log(obj.add); //

obj.add = 2;

console.log(obj.n);

Vue 框架的資料響應式就用到了 Object.defineProperty 的存取描述符屬性描述符,用於將 data 物件裡的所有屬性變成 getter 和 setter 監聽的虛擬屬性,便於監測資料的變化,從而做出對應的響應。