JS中Object的一些關于原型的方法

1、Object.getPrototypeOf(obj)

該方法返回 obj 對象的原型對象，等同于 obj.__proto__。獲取對象的原型對象推薦使用該方法而不是 obj.__proto__方法

參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf

function Person(){
  this.name = 'jack'
}
let man = new Person();
console.log(Object.getPrototypeOf(man) === Person.prototype);   //true
console.log(Object.getPrototypeOf(man) === man.__proto__);　　　 //true

2、Object.defineProperty()

該方法會直接在一個對象上添加一個新屬性，或者修改一個對象的現有屬性，并返回該對象。

Object.defineProperty(obj, prop, descriptor);　　　　//obj：要修改的對象    prop：要添加或修改的屬性的名稱。   descriptor：屬性描述符。

let obj = {};
Object.defineProperty(obj, "key", {
  enumerable: false,
  configurable: false,
  writable: false,
  value: "static"
});

數據描述符和存取描述符均具有以下可選鍵值：

configurable：僅當該屬性的 configurable 為 true 時，該屬性才能夠被改變，也能夠被刪除。默認為 false
enumerable：僅當該屬性的 enumerable 為 true 時，該屬性才能夠出現在對象的枚舉屬性中。默認為 false
value：該屬性對應的值。可以是任何有效的 JavaScript 值（數值，對象，函數等）。默認為 undefined
writable：僅當僅當該屬性的writable為 true 時，該屬性才能被賦值運算符改變。默認為 false
get：給屬性設置 getter，在讀取屬性時將會調用該方法，默認值是undefined，該方法的返回值將被用作屬性值。
set：給屬性設置 setter，在寫入屬性的時候調用該方法，默認是undefined。該方法將接受唯一參數，并會自動將該參數的新值分配給該屬性。

2.1、set和get方法同時存在時的問題及解決

當通過 Object.defineProperty() 來給一個對象的屬性設置 getter 和 setter 時，如下：

let data = {}
Object.defineProperty(data,'name',{
    // 訪問name屬性就會執行此方法 返回值就是屬性值
    get(){
       console.log('name屬性被獲取了')
       return '柴柴老師'
    },

    // 設置新值就會執行此方法
    set(newVal){
       console.log('name屬性被設置新值了')
       console.log(newVal)
    }
})

console.log('初始化值', data.name);
data.name = 'new Name';
console.log('修改后的值', data.name);

輸出結果如下：

可以看到，此時設置對象屬性值，實際上并沒有修改到對象的屬性的值。這是因為 get 和 set 并沒有關聯起來，get 返回的值都是固定的，不會隨著 set 的設置而改變。

此時我們可以簡單地通過一個臨時變量解決這個問題，如下：

let _name = '柴柴老師';
let data = {}
Object.defineProperty(data,'name',{
    // 訪問name屬性就會執行此方法 返回值就是屬性值
    get(){
       console.log('name屬性被獲取了')
       return _name
    },

    // 設置新值就會執行此方法
    set(newVal){
       console.log('name屬性被設置新值了')
       console.log(newVal)
       _name = newVal
    }
})

console.log('初始化值', data.name);
data.name = 'new Name';
console.log('修改后的值', data.name);

輸出結果如下：

3、Object.assign()

該方法用于將一個或多個源對象的所有可枚舉屬性的值復制到目標對象。它將改變目標對象然后返回目標對象。

Object.assign(target, source1, source2)        //target：目標對象   source1、source：源對象

如果目標對象和源對象中的屬性名重復，那么源對象將覆蓋掉目標對象的屬性值，后面的源對象將覆蓋前面的源對象。

該方法是淺拷貝。假如源對象的屬性值是一個指向對象的引用，它也只拷貝那個引用值。

let obj1 = {
  a: 0,
  b: {
    c: 0
  }
};
let obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 0, b: { c: 0}}

obj1.a = 1;　　　　　　
obj1.b.c = 3;         //當源對象的屬性值是一個對象時，改變該屬性，目標對象也隨之改變
console.log(obj1); // { a: 1, b: { c: 3}}
console.log(obj2); // { a: 0, b: { c: 3}}

可以利用JSON對象方法實現深拷貝

 let obj1 = {
   a: 0,
   b: {
     c: 0
   }
 };
 let obj2 = JSON.parse(JSON.stringify(obj1));
 obj1.a = 4;
 obj1.b.c = 4;　　　　//此時改變obj1屬性的值，obj2不會隨之改變
 console.log(obj2); // { a: 0, b: { c: 0}}

posted @ 2019-01-30 11:32 wenxuehai 閱讀(1701) 評論(0) 收藏舉報

刷新頁面返回頂部

提升自己，才有選擇的能力和勇氣

JS中Object的一些關于原型的方法

1、Object.getPrototypeOf(obj)

2、Object.defineProperty()

2.1、set和get方法同時存在時的問題及解決

3、Object.assign()

公告