JS--我發現，原來你是這樣的JS：面向對象編程OOP[1]--(理解對象和對象屬性類型)

1、介紹

老鐵們，此次是JS的面向對象的編程OOP（雖然我沒有對象，心累啊，可是能夠本身建立啊，哈哈）。
JS高程裏第六章的內容，這章內容在我看來是JS中很難理解的一部分。因此分紅三篇博客來逐個理清。
這是第一篇：理解對象，認識對象屬性的類型。

2、理解對象

書中原話--ECMA-262中把對像定義爲：無序屬性的集合。其中屬性能夠是基本值，對象或者是函數。

1.咱們通俗點理解一下

對象是一個真實存在的東西，就像世上每個人、每個物體同樣，它有本身的屬性，行爲。也就是說各類屬性集合在一塊兒就是一個具體的對象。（你本身也是一個對象）

舉一些生活例子：
小明：有名字，年齡（基本值），說話（方法） 等屬性
電腦：有顏色，大小（基本值），cpu（對象）等屬性

2.咱們js代碼理解一下：

1.用new Object()構造函數方法來建立對象

//obj是我建立的一個對象，它有name、age屬性，sayHi方法
var obj = new Object();
obj.name = "ry";
obj.age="3";
obj.sayHi = function(){
    console.log("Hi");
}

2.用對象字面量建立對象

//建立一個person對象
var person = {
    name : "ry",
    age : 3,
    sayBye: function(){
        console.log('bye bye');
    }
};

上面說這麼多，就想說明白js中的對象是什麼。總之：無序的屬性的集合 == 對象

3、理解對象屬性的類型

1.對象屬性有類型？奇怪嗎？

一開始咱們對未知的事物都會充滿的疑惑和驚訝，可是知識這東西，咱們更多的選擇去接受它，而後理解它，最後運用它。

• 可能你會問對象屬性還有類型？一開始我也以爲驚訝。
  
• 沒錯，對象屬性是有類型的，可能你不能理解，但只能接受。

2.對象屬性類型有哪些：數據屬性和訪問器屬性

對於對象屬性類型這塊，咱們只是簡單的去了解有什麼類型，類型區別。 這也有助於咱們去了解對象。

1.數據屬性（最經常使用的）

既然有不一樣的類型，那確定要有一個東西去區分他們，那這個東西就是特性

• js中用特性這東西去區分屬性類型。對於數據屬性，它有如下4個特性去說明它是數據屬性。

名字	做用
[[Configurable]]	表示可否經過delete來刪除屬性，可否修改屬性的特性，或可否把屬性設爲訪問器屬性，默認true。
[[Enumerable]]	能不能經過for in枚舉該屬性，默認true。
[[Writable]]	能不能修改屬性值，默認true。
[[Value]]	這個位置保存屬性的值。好比下面的name屬性，它的[[Value]]就保存"ry"這個字符串

• 數據屬性長什麼樣子（也就那樣，之前那樣）

//一個對象
var person = {
    //這就是一個數據屬性
    name:"ry";
};
console.log(person.name); //ry
//透過代碼能夠看出，之前咱們定義對象屬性就是數據屬性，之前不知道它叫數據屬性這個名字，但如今知道了。

• 測試一下特性吧。用Object.defineProperty()，修改特性用到這個函數Object.defineProperty():接受3個參數：屬性所在對象，屬性名字，描述符對象

//建立一個對象person
var person = {};
//添加一個數據屬性
person.name = "ry";
//使用Object.definProperty方法
Object.definProperty(person,"name",{
    //writable表示能不能修改,false表示不能
    writable:false,
})

console.log(person.name);  "ry"
//修改name的值
person.name = "yuan";
//name的值不變，修改不了
console.log(person.name);  "ry"

除此以外還能夠修改其餘特性，你們能夠試試哦。

2.訪問器屬性

訪問器屬性的4個特性：

名字	做用
[[Configurable]]	表示可否經過delete來刪除屬性，可否修改屬性的特性，或可否把屬性設爲訪問器屬性，默認true。
[[Enumerable]]	能不能經過for in枚舉該屬性，默認true。
[[Get]]	讀取時調用的函數，默認undefined
[[Set]]	寫入時調用的函數，默認undefined

訪問器屬性特性不包含數據值，它們包含一對getter和setter函數(但這兩個不是必須的)
訪問器屬性不能直接定義，只能經過Object.defineProperty()來定義。

▶ 書上的例子：

//一個對象
var book = {
    _year : 2004,
    edition : 1
};

//定義一個叫year的訪問器屬性
Object.defineProperty(book,"year",{
    //設置get特性，這是一個方法
    get: function(){
        retrun this._year;
    };
    //設置set特性
    set:function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
})；

//測試一下,給訪問器屬性賦值，即寫入year，它會調用set的方法
book.year = 2005;
//上面的2005大於2004，set方法中會改變edition的值，變成2
console.log(book.edtion); //2

▶ 特別提醒：Objecct.defineProperty() 的兼容性：IE9+,Firefox4+,chrome，Opera12+，Safari 5+

▶ 除此以外

• 還有一次定義多個屬性的方法：Objecct.defineProperties() ， 兼容性：IE9+,Firefox4+,chrome，Opera12+，Safari 5+。

• 讀取屬性特性方法：Object.getOwnPropertyDescriptor()，接受兩參數：屬性所在對象和要讀取器描述符的屬性名稱。 返回一個對象。

//實踐比較容易理解
//一個對象
var book = {};
//用Objecct.defineProperties()方法設置多個屬性 
Object.defineProperties(book,{
    _year:{
        value:"ry"
    },
    edition:{
        value:1
    },
    year:{
        get:function(){
            return this._year ;
        }
    }
});

//函數返回一個對象
//descriptor對象有configurable，enumerable，writable，value屬性/（若是是訪問器屬性:configurable，enumerable，get，set）
//_year是數據屬性
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value);  //2004
console.log(descriptor.configurable);  //true
console.log(descriptor.enumerable);  //true
//數據屬性沒有get
console.log(descriptor2.get); //undefined

//year是訪問器屬性
var descriptor2 = Object.getOwnPropertyDescriptor(book,"year");
//訪問器屬性有get
console.log(descriptor2.get); //function

4、小結

此次介紹主要介紹：
1.什麼是對象：無序屬性的集合。
2.還有屬性的類型：數據屬性和訪問器屬性。還有兩種屬性的各個特性，區別。不用深刻，起碼知道有這些東西。
3.屬性的類型有個瞭解就好，主要用的仍是數據屬性（平時用的）。
不忘初心，方得始終。以爲寫得很好就贊一下吧，也能夠關注博主哦

同系列前幾篇：
第一篇：JavaScript--我發現，原來你是這樣的JS（一）（初識）
第二篇：JavaScript--我發現，原來你是這樣的JS（二）（基礎概念--軀殼篇）
第三篇：JavaScript--我發現，原來你是這樣的JS（三）（基礎概念--靈魂篇）
第四篇：JavaScript--我發現，原來你是這樣的JS（四）（看看變量，做用域，垃圾回收是啥）
第五篇：JavaScript--我發現，原來你是這樣的JS（引用類型不簡單[上篇]，且聽我娓娓道來）
第六篇：JavaScript--我發現，原來你是這樣的JS（引用類型不簡單[下篇]，基本包裝類型與個體內置對象）

本文出自博客園：http://www.cnblogs.com/Ry-yuan/ 做者：Ry（淵源遠願） 歡迎轉載，轉載請標明出處，保留該字段。