1. 程式人生 > >javascript面向對象筆記(一)

javascript面向對象筆記(一)

str false 無序 cnblogs 位置 ont 多個 say http

ECMAscript對象(以下簡稱對象):

ECMA-262把對象定義為:無序屬性的集合,其屬性可以包含基本值、對象或者函數。

對象的每個屬性或方法都有一個名字,而每個名字都映射到一個值。值可以是數據或函數。

每個對象都是基於一個引用類型創建的,這個引用類型可以是原生類型,也可以是開發人員定義的類型。

創建自定義對象的兩種方式:

1、創建一個Object實例,再為它添加屬性和方法,如下所示。

var person = new Object();
person.name = ‘xingba‘;
person.age = ‘24‘;
person.job = ‘front-end Engineer‘;
person.sayName 
= function(){ alert(this.name);

2、對象字面量,如下所示。

var person = {
  name:‘xingba‘,
  age:‘24‘,
  job:‘front-end Engineer‘,
  sayName:function(){
    alert(this.name);
  }
}

以上創建的對象中都帶有屬性和方法。而這些屬性在創建時都帶有一些特征值,js通過這些特征值來定義它們的行為。

屬性類型:

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

1、數據屬性

數據屬性有4個描述其行為的特性。

  Configurable:表示能否通過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或者能否把屬性修改為訪問器屬性。默認為true。

  Enumerable:表示能否通過for-in循環返回屬性。默認為true。

  Writable:表示能否修改屬性的值。默認為true。

  Value:包含這個屬性的數據值。讀取屬性值的時候,從這個位置讀;寫入屬性值的時候,把新值保存在這個位置。默認為undefine。 例如:

var person = {
   name = ‘xingba‘; 
};

  此時Value特性將被設置成 ‘xingba‘,而對這個值的任何修改豆漿杯反映在這個位置。

要修改屬性默認特性,必須使用ECMAScript5的Object.defineProperty()方法。該方法接收三個參數:屬性所在對象,屬性名和一個描述符的對象

。描述符對象的屬性必須是:configurable、enumrable、writable和value。設置其中的一個或多個值,可以修改對應的特性值。例如:

var person = {};
Object.defineProperty(person,name,{
    writable:false, //默認為true,這裏設置成false表示name屬性只讀並且不可被修改
    value:‘xingba‘  //設置name的值為 ‘xingba‘
});
console.log(person.name);  // ‘xingba‘
person.name  = ‘bao‘;  //再重新設置name值
console.log(person.name);  // ‘xingba‘

而且在嚴格模式下,以上語句會報錯,如下圖所示。

技術分享

同樣的將configurable設置為false,表示不能從對象中刪除屬性。如果對這個屬性調用delete,在嚴格模式下會報錯,而非嚴格模式下什麽也不會發生。

而且上面有提到設置configurable的值可以設置是否可以修改屬性的特性。一旦configurable設置成false,則屬性就會被定義為不可配置的,而且就不能再把他變回可配置了。此時,再調用Object.defineProperty()方法設置特性值會報錯,而且調用Object.defineProperty()方法時如果不指定,configurable,enumerable,writable默認值是false,如下所示。

技術分享

2、訪問器屬性

訪問器屬性不包含數據值,包含一對getter和setter函數(兩個函數非必需)。這兩個特征可以用來區分訪問器屬性和數據屬性。訪問器屬性不能直接定義,必須使用Object.defineProperty()來定義.。

讀取訪問器屬性時,會調用getter函數,這個函數負責返回有效的值;在寫入訪問器屬性時,會調用setter函數並傳入新值,這個函數負責決定如何處理數據,如下所示。

技術分享

使用Object.defineProperties()方法可以為對象定義多個屬性

var person = {};
Object.defineProperties(person,{

  _name:{
    value:‘xingba‘
  },

  age:{
    value:100
  },

  name:{
    get:function(){
      return this._name
    },
    set:function(newName){
      this._name = newName;
    }
  }

});

javascript面向對象筆記(一)