深刻了解Object.defineProperty

　　原來寫文章都是一次寫兩三個小時寫完，偶爾看到一我的的博客瞭解到還有草稿箱這個功能，因此之後寫文章的時候就舒服多了哈哈，能夠存起來再發，不須要一口氣寫完了

　　最近一直在看JavaScript高級程序設計，看到defineProperty的時候感覺挺深的，由於大名鼎鼎的Vue的雙向數據綁定的原理就是根據這個東西來的，因此看到這裏的時候長了見識

　　要提及Object.defineProperty的話，須要先來介紹一下JavaScript中的對象。

JavaScript中的對象

　　面向對象的語言有一個標誌，那就是他們都有類的概念，而經過類能夠建立任意多個具備相同屬性和方法的對象。ECMAScript中沒有類的概念，所以它的對象也與基於類的語言中的對象有所不一樣。

　　JavaScript中的對象定義： 無序屬性的集合，其屬性能夠包含基本值、對象或者函數。嚴格來說，這就至關於說對象是一組沒有特定順序的值。對象的每一個屬性或方法都有一個名字，而每一個名字都映射到一個值。正由於這樣，能夠把對象想象成散列表，就是一個鍵值對，其中的值能夠是任意的（數據，函數，對象，數組~~）

　　前面balabala一堆概念，真心感受若是能夠理解挺重要的　

 

建立對象

　　可使用構造函數，建立一個Object的實例，而後爲其添加屬性和方法

var person = new Object();
person.name = 'zhang';
person.age = 123;
person.job = "SoftWare Engineer";
person.sayName = function () {
    alert(this.name);
};

person.sayName();

 　　這個例子建立了一個名爲person的對象，併爲其添加了三個屬性（name、age、和job）和一個方法（sayName），其中sayName（）方法用於顯示this.name 這個會被解析爲person.name和值。

　　不過如今建立這種對象大都是經過字面量的方式來建立了

var person = {
    name: 'zhang',
    age: 18,
    job: 'SoftWare Engineer',
    sayName: function () {
       alert(this.name);
    }
};

person.sayName();

　這種寫法的結果和上面的那一種是同樣的，這種寫法若是你要拓展功能的話就不能再賦值了，也是用到了上面的寫法

person.home = 'hebei';
person.showHome = function () {
    alert(this.home);
};

這個樣子去拓展它。

 

屬性類型

 　　 ES5定義只有內部採用的特性時，描述了屬性的各類特徵。定義這些特性時爲了實現JavaScript引擎用的，所以在JavaScript中不能直接訪問它們。爲了表示特徵是內部值，該規範把它們放在了兩對兒方括號中，例如[[Enumerable]]

  　　前面例子中的name,age,job,home,showHome都是屬性，引號後面的東西是值，說一下屬性的一些東西。

  　　ECMAScript中有兩種屬性： 數據屬性和訪問器屬性

數據屬性

　　數據屬性包含一個數據值的位置。在這個位置能夠讀取和寫入值。數據屬性有4個描述其行爲的特性。

　　[[Configurable]] 表示可否經過delete刪除屬性從而從新定義屬性，可以經過屬性的特性，或者可否把屬性修改成訪問器屬性，像前面的例子中那樣直接在對象上定義的屬性，它們的這個特性默認值爲true。

　　[[Enumerable]] 表示可否經過for-in循環返回屬性。像前面例子中那樣直接在對象上定義的屬性，他們的這個特性默認值爲true

　　[[Writable]] 表示可以修改屬性的值。像前面例子中那樣直接在對象上定義的屬性，他們的這個特性默認值爲true 

　　[[Value]] 包含這個屬性的數據值。讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值保存在這個位置。這個特性的默認值爲undefined

例子

var person = {
    name: 'zhang'
};

for(var key in person){
    console.log(key);
}
// 他這個屬性的value值就是他在上面所定義的那一些,對這個值的任何修改都反映在這個位置
console.log(person.name);

person.name = 'goudan';
// 在這裏也能夠修改，由於[[Writable]]屬性默認爲true
console.log(person.name);

// [[Configurable]] 這個東西爲true 表示也能夠刪除它
delete person.name;
console.log(person.name);   // undefined  由於刪除以後這個屬性就不存在了 [[Value]]特性的默認值爲undefined

 重點來了

Object.defineProperty()

　　若是要修改 屬性默認的特性 就必要要使用ES5的Object。defineProperty()方法。這個方法接收三個參數。

　　屬性所在的對象、 屬性的名字、 一個描述符對象 (其中描述符對象的屬性必須是: configurable、enumerable、writeable、和value)設置其中一個或多個值，能夠修改對應的特性值

　　下面去演示這些例子了，但願你也能夠試着去嘗試一遍，我舉得例子寫法可能比較囉嗦，但願沒有嘗試過的能夠試着練習一下

　　提示：我後面 // 註釋後面的東西 是輸出打印的東西，若有錯誤能夠本身具體狀況分析一下

writable的狀況演示

var person = {
    name: 'zhang',
    age: 12
};
Object.defineProperty(person,"name",{
    writable: false
});
// 讀取person.name
console.log(person.name);  // zhang
console.log(person.age); //12
// 修改person.name
person.name = 'wang';
person.age = 14;
console.log(person.name);   // zhang  ?????? 咋沒變
console.log(person.age);  // 14
// 緣由： 那個配置裏面也說了的[[Writable]]默認是true，可是改成false以後 就是這個屬性不可寫,沒有寫進去的也能夠看到是能夠正常修改的

　　

enumerable的狀況演示

var person = {
    name: 'zhang',
    baba: '1',
    job: 'Software Engineer'
};

for(var key in person){
    console.log(key);  //   name, baba, job
}
//  三個屬性均可以正常的打印出來
// 配置一下 enumerable
Object.defineProperty(person,'baba',{
    enumerable: false
});

for(var key1 in person){
    console.log(key1);   // name job
}
// ???   baba去哪了？  我告訴你去哪了  由於配置了 enumerable: false
console.log(person.baba);  // 1  不會影響輸出

　　

Configurable 的演示

var person = {
    name: 'zhang',
    age: 12
};

Object.defineProperty(person,'name',{
    configurable: false
});

console.log(person.name);   // zhang
console.log(person.age);    // 12

delete person.name;
console.log(person.name);  // zhang
// 剛纔刪除不是undefined嗎  configurable: false就不容許刪除了
// 若是聲明是嚴格模式的話 那一句 delete person.name  還會報錯
person.name =  'wang'
console.log(person.name); // wang

注意：這個配置有一點須要注意一下

var person = {
    name: 'zhang'
};
Object.defineProperty(person,'name',{
    configurable: false
});
// 若是之後你有需求你還想刪除他的話 你會想到
Object.defineProperty(person,'name',{
    configurable: true
});
// 控制檯打印錯誤消息：    Uncaught TypeError: Cannot redefine property: name at Function.defineProperty (<anonymous>)
// 這個東西一旦被配置爲 false,之後在也不能夠把他變爲true了 會報錯

 

Value的演示

var person = {
    name: 'zhang'
};
console.log(person.name);  // zhang
Object.defineProperty(person,'name',{
    value: 'wang'
});
console.log(person.name); // wang
// 你小子怎麼改姓了
person.name = 'zhang';  // 給我改回來
console.log(person.name);  //zhang  又是我老張家的孩子了,這個是能夠修改回來的

固然了上面的屬性只是單獨演示的, 這四個屬性能夠結合起來使用，好比我要定義一個永遠都沒法改變它的值

var person = {
    name: 'zhang'
};
console.log(person.name);  // zhang
Object.defineProperty(person,'name',{
    writable: false,
    value: 'wang'
});

console.log(person.name);  // wang
// 臥槽你個小兔崽子又改姓了 給我改回來
person.name = 'zhang';
console.log(person.name); // wang
// 你會發現 有些事情發生了就是發生了，永遠也回不來了
person.name = 'zhang1';
console.log(person.name); // wang

　　注意 在調用 Object.defineProperty()方法時，若是不指定，configurable、enumerable和writable特性的默認值都是true。

　　你給我演示這一堆東西到底有啥意思，能幹啥。我想告訴你多數狀況下可能都沒有必要利用Object.defineProperty()方法提供的這些高級功能。不過，理解這些概念對理解JavaScript對象卻很是有用

 

訪問器屬性

　　訪問器屬性不包含數據值；他們包含一對兒getter和setter函數(不過這兩個函數都不是必須的)在讀取訪問器屬性時，會調用getter函數，這個函數負責返回有效的值；在寫入訪問器屬性時，會調用setter函數並傳入新值，這個函數負責決定如何處理數據。訪問器屬性有以下4個特性　　

[[Configurable]] : 可否修改屬性的特性，或者可否把屬性修改成數據屬性。像前面的例子中那樣直接在對象上定義的屬性，它們的這個特性默認值爲true

[[Enumerable]] : 可否經過for-in循環 *********和上面的同樣
[[Get]]: 在讀取屬性的時候調用。 默認值 undefined
[[Set]]: 在寫入屬性的時候調用 默認值 undefined

前面兩個屬性大同小異，幾乎是同樣的，一樣的訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義.

get和set的演示，

　　這個重要

var book = {
_year: 2018,
edition: 1
};

Object.defineProperty(book,'year',{
get: function () {
    console.log(`獲取的時候觸發函數`);  // 每次獲取的時候都會觸發這個函數
    console.log(this === book); // true   這裏面的this就是book的引用 也就是book對象
    return this._year;
},
set: function (newValue) {
    console.log('修改值的時候觸發函數');
    // newValue ----- 這裏的newValue就是你設置的修改後的值
    if(newValue> 2018){
        this._year = newValue;
        this.edition = newValue - 2018;
    }
}
});

console.log(book.year);
// 2018  他的值也就是咱們返回的值 book._year
// 若是get函數不寫返回值就是undefined

book.year = 2020; // 修改值的時候觸發函數
console.log(book); // {_year: 2019, edition: 2};

　　vue雙向數據綁定就是這個，當咱們在修改數據的時候，會觸發set那個函數，就在set函數中執行咱們的邏輯，去修改數據，之後我會寫一個大概的雙向數據綁定的那個代碼，會發出來，網上也有好多相似的代碼。

上面的代碼建立了一個book對象，並給他定義兩個默認的屬性: _year和edition。

　　而訪問器屬性year則包含一個getter函數和一個setter函數。 getter函數返回_year的值，setter函數修改了_year和edition。這是使用訪問器屬性的常見方式，即設置一個屬性的值會致使其餘屬性發生變化。

　　不必定非要同時制定getter和setter。只指定getter意味着屬性是不能寫，嘗試寫入屬性會被忽略。在嚴格模式下,嘗試寫入至指定了getter函數的屬性會拋出錯誤。相似的，只指定setter函數的屬性也不能讀，不然在非嚴格模式下回返回undefined，而在嚴格模式下會拋出錯誤。

 

　　同時定義多個屬性的寫法因爲未對象定義多個屬性的可能性很大，ES5又定義了一個Object.defineProperties()方法利用這個方法能夠經過描述符一次定義多個屬性。

　　這個方法接收兩個對象參數：第一個對象是喲啊添加和修改其屬性的對象，第二個對象的屬性與第一個對象中要添加或修改的屬性一一對應。

同時定義多個屬性的寫法

var book = {};

Object.defineProperties(book,{
    _year: {
        value: 2018
    },
    edition: {
        value: 1
    },
    year: {
        get: function () {
            return this._year;
        },
        set: function (newValue) {
            console.log('修改函數觸發觸發了嗎');
            if(newValue>2018){
                this._year = newValue;
                this.edition += newValue - 2018;
            }
        }
    }
});

console.log(book.year);

book.year = 2020;
console.log(book);  //{_year: 2018, edition: 1}
// ？？？？ 我前面不是觸發了修改的函數了嗎爲何沒有改呢 上一個分開寫的都修改爲功了

　　

彆着急，下面來看一個新的API

Object.getOwnPropertyDescriptor（）  

　　讀取屬性的特性

使用Es5的Object.getOwnPropertyDescription() 方法，能夠取得給定屬性描述符。這個方法接收兩個參數: 屬性所在的對象和要讀取其描述符的屬性名稱。返回值是一個對象，若是是訪問器屬性，這個對象的屬性有 configurable enumerable writable 和value

var descriptor1 = Object.getOwnPropertyDescriptor(book,"_year");
var descriptor2 = Object.getOwnPropertyDescriptor(book,"edition");
console.log(descriptor1);
/*
{configurable: false,
enumerable: false,
value: 2018,
writable: false}
*/
console.log(descriptor2);
/*
    {
    configurable: false,
    enumerable: false,
    value: 1,
    writable: false}
 */
 */
// 前面分開寫能夠成功的緣由能夠用這個東西去獲取一下，能夠看到他們是true的，這個是false，因此
// 雖然你修改了，可是他是不生效的

　　在JavaScript中，能夠針對任何對象------包括DOM和BOM對象，使用Object.getOwnPropertyDescriptor()方法。

　　若是你閱讀了本文章有了一些收穫，我會感到很是開心，因爲能力有限，文章有的部分解釋的不到位，但願在之後的日子裏能慢慢提升本身能力，若是不足之處，還望指正。