1. 程式人生 > >JavaScript基礎概念之----面向對象----理解對象

JavaScript基礎概念之----面向對象----理解對象

描述符 對象實例 set 自定義 配置 cti 循環 自定義對象 enum

創建自定義對象最簡單的方式是創建一個Object的實例:

var person = new Object()

person.name = ‘adhehe‘
person.age = 23
person.job = ‘程序開發‘

person.getName = function(){
    return this.name
}

使用對面字面量創建一個普通對象實例:

var person = {
    name:‘adhehe‘,
    age:23,
    job:‘程序開發‘,
    getName:function(){
        return this.name
    }
}

ECMAScript中有兩種屬性類型

  • 數據屬性
  • 訪問器屬性

數據屬性

它包含一個數據值的位置,在這個位置可以讀取和寫入值。

[[Configurable]]:

  • 能否delete刪除屬性從而重新定義屬性
  • 能否修改屬性的特性
  • 能否把屬性修改為訪問器屬性
  • 直接在對象上定義的屬性,Configurable 默認值為true

[[Enumerable]]:

  • 能否通過 for-in 循環返回屬性
  • 直接在對象上定義的屬性,Enumerable 默認值為true

[[Writable]]:

  • 能否修改屬性的值
  • 直接在對象上定義的屬性,Enumerable默認值為true

[[Value]]:

  • 包含這個屬性的數據值
  • 讀取屬性值的時候,從這個位置讀取
  • 寫入屬性值的時候,把新值保存在這個位置
  • 默認值為undefined

要修改屬性默認的特性,必須使用 Object.defineProperty()方法:

var person = {}

Object.defineProperty(person,‘name‘,{
    configurable:false,
enumerable:true, writable:
false, value:‘adhehe‘ })

//一旦把屬性定義為不可配置的,就不能再把它變回可配置了
//在調用此方法創建的新的屬性時,如果不指定,則configurable、enumerable、writable默認值都為false

訪問器屬性

它不包含數據值,它包含一對getter函數和setter函數

[[Configurable]]:

  • 能否delete刪除屬性從而重新定義屬性
  • 能否修改屬性的特性
  • 能否把屬性修改為訪問器屬性
  • 直接在對象上定義的屬性,Configurable 默認值為true

[[Enumerable]]:

  • 能否通過 for-in 循環返回屬性
  • 直接在對象上定義的屬性,Enumerable 默認值為true

[[Get]]:

  • 讀取屬性時調用的函數
  • 默認值為undefined
  • 如果未指定此函數,則屬性不可讀取

[[Set]]:

  • 寫入屬性時調用的函數
  • 默認值為undefined
  • 如果未指定此函數,則屬性不可寫入

訪問器屬性不能直接定義,必須使用 Object.defineProperty()來定義。

var person = {
    name:‘adhehe‘,
    _age:23
}

Object.defineProperty(person,‘age‘,{
    get:function(){
        return this._age;
    },
    set:function(newVal){
        if(newVal > 59){
            this._age = ‘old‘;
        }else{
     this._age = newVal;
     } } }) person.age
= 45; console.log(person.age)//輸出 45 person.age = 65; console.log(person.age)//輸出 old

Object.defineProperties()方法可一次定義多個屬性:

var person = {}

Object.defineProperties(person,{
    name:{
        writable:true,
        value:‘adhehe‘
    },
     _age:{
        writable:true,
        value:23
    },
    age:{
        get:function(){
            return this._age;
        },
        set:function(newVal){
            if(newVal > 59){
                this._age = ‘old‘;
            }else{
                this._age = newVal;
            }
        }
    }
})        

Object.getOwnPropertyDescriptor()方法可取得給定屬性的描述符:

//以前面person為例

var desc = Object.getOwnPropertyDescriptor(person,‘name‘);
console.log(desc.value) //adhehe
console.log(desc.configurable) //false
console.log(desc.get) //undefined

JavaScript基礎概念之----面向對象----理解對象