學習javascript物件導向 理解javascript對象，javascript物件導向

學習javascript物件導向 理解javascript對象，javascript物件導向

一、編程思想
面向過程:以過程為中心，自頂向下逐步細化，程式看成一系列函數調用的集合
物件導向:對象作為程式的基本單元，程式分解為資料和相關操作
二、類、對象
類:對具有相同特性和特徵事物的抽象描述
對象:某種類型對應的具體事物
三、物件導向的三大特性
封裝：隱藏實現細節，實現代碼模組化
繼承：擴充已存在的代碼模組，實現代碼重用 
多態：介面的不同實現方式，實現介面重用
四、對象定義：無序屬性的集合，其屬性可以包含基本值、對象或者函數

//簡單的對象執行個體var person = new Object();  person.name = "Nicholas";  person.age = 29;  person.job = "Software Engineer";  person.sayName = function(){    alert(this.name);  }

五、內部屬性類型：內部屬性無法直接存取，ECMAScript5把它們放在兩對方括弧中，分為資料屬性和訪問器屬性
[1]資料屬性包含一個資料值的位置，在這個位置可以讀取和寫入值。資料屬性有4個特性:
　　　　a、[[Configurable]]: 表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性，直接在對象上定義的屬性，預設值為true
　　　　b、[[Enumerable]]: 表示能否通過for-in迴圈返回屬性,直接在對象上定義的屬性，預設值為true
　　　　c、[[Writable]]: 表示能否修改屬性的值，直接在對象上定義的屬性，預設值為true
　　　　d、[[Value]]: 包含這個屬性的資料值，讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值儲存在這個位置。直接在對象上定義的屬性，預設值為undefined
[2]訪問器屬性不包含資料值，包含一對getter和setter函數(不過這兩個函數不是必需的)。讀取存取器屬性時，會調用getter函數，這個函數負責返回有效值；在寫入訪問器屬性時，會調用setter函數並傳入新值，這個函數負責決定如何處理函數。訪問器屬性有如下4個特性：
　　　　a、[[Configurable]]: 表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。直接在對象上定義的屬性，預設值為true
　　　　b、[[Enumerable]]: 表示能否通過for-in迴圈返回屬性，直接在對象上定義的屬性，預設值為true
　　　　c、[[Get]]: 在讀取屬性時調用的函數。預設值為undefined
　　　　d、[[Set]]: 在寫入屬性時調用的函數。預設值為undefined
六、修改內部屬性：使用ECMAScript5的object.defineProperty()方法,該方法接收三個參數：屬性所在的對象、屬性的名字和一個描述符對象
  [注意1]IE8是第一個實現Object.defineProperty()方法的瀏覽器版本。然而，這個版本的實現存在諸多限制：只能在DOM對象上使用這個方法，而且只能建立訪問器屬性。由於實現不徹底，不建議在IE8中使用Object.defineProperty()方法
  [注意2]不支援Object.defineProperty()方法的瀏覽器中不能修改[[Configurable]]和[[Enumerable]]
[1]修改資料屬性

//直接在對象上定義的屬性，Configurable、Enumerable、Writable為truevar person = {  name:'cook'};Object.defineProperty(person,'name',{  value: 'Nicholas'});alert(person.name);//'Nicholas'person.name = 'Greg';alert(person.name);//'Greg'  

//不是在對象上定義的屬性，Configurable、Enumerable、Writable為falsevar person = {};Object.defineProperty(person,'name',{  value: 'Nicholas'});alert(person.name);//'Nicholas'person.name = 'Greg';alert(person.name);//'Nicholas'

//該例子中設定writable為false,則屬性值無法被修改var person = {};Object.defineProperty(person,'name',{  writable: false,  value: 'Nicholas'});alert(person.name);//'Nicholas'person.name = 'Greg';alert(person.name);//'Nicholas'  

//該例子中設定configurable為false,則屬性不可配置var person = {};Object.defineProperty(person,'name',{  configurable: false,  value: 'Nicholas'});alert(person.name);//'Nichols'delete person.name;alert(person.name);//'Nicholas'

[注意]一旦把屬性定義為不可配置的，就不能再把它變回可配置了，也就是說可以多次調用Object.defineProperty()修改同一屬性，但在把configurable設定為false之後，就有限制了

var person = {};Object.defineProperty(person,'name',{  configurable: false,  value: 'Nicholas'});//會報錯Object.defineProperty(person,'name',{  configurable: true,  value: 'Nicholas'});

[2]修改訪問器屬性

//簡單的修改訪問器屬性的例子var book = {  _year: 2004,  edition: 1};Object.defineProperty(book,'year',{  get: function(){    return this._year;},  set: function(newValue){    if(newValue > 2004){      this._year = newValue;      this.edition += newValue - 2004;    }  }});book.year = 2005;alert(book.year)//2005alert(book.edition);//2

[注意1]只指定getter意味著屬性是不能寫

var book = {  _year: 2004,  edition: 1};Object.defineProperty(book,'year',{  get: function(){    return this._year;  },});book.year = 2005;alert(book.year)//2004  

[注意2]只指定setter意味著屬性不能讀

var book = {  _year: 2004,  edition: 1};Object.defineProperty(book,'year',{  set: function(newValue){    if(newValue > 2004){      this._year = newValue;      this.edition += newValue - 2004;    }  }});book.year = 2005;alert(book.year);//undefined

【補充】建立訪問器屬性的用兩個非標準的方法：__defineGetter__()和__defineSetter__()

var book = {  _year: 2004,  edition: 1};//定義訪問器的舊有方法book.__defineGetter__('year',function(){  return this._year;});book.__defineSetter__('year',function(newValue){  if(newValue > 2004){    this._year = newValue;    this.edition += newValue - 2004;  }});book.year = 2005;alert(book.year);//2005alert(book.edition);//2

七、定義多個屬性：ECMAScript5定義了一個Object.defineProperties()方法，利用這個方法可以通過描述符一次定義多個屬性，這個方法接收兩個對象參數：第一個對象是要添加和修改其屬性的對象，第二個對象的屬性與第一個對象要添加或修改的一一對應

var book = {};Object.defineProperties(book,{  _year: {    value: 2004  },  edition: {    value: 1  },  year: {    get: function(){      return this._year;    },    set: function(newValue){      if(newValue > 2004){        this._year = newValue;        this.edition += newValue - 2004;      }    }  }});

八、讀取屬性特性：使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得給定屬性的描述符。該方法接收兩個參數：屬性所在對象和要讀取其描述符的屬性名稱，傳回值是一個對象。
[注意]可以針對任何對象——包括DOM和BOM對象，使用Object.getOwnPropertyDescriptor()方法

var book = {};Object.defineProperties(book,{  _year: {    value: 2004  },  edition: {    value: 1  },  year: {    get: function(){      return this._year;    },    set: function(newValue){      if(newValue > 2004){        this._year = newValue;        this.edition += newValue - 2004;      }    }  } });var descriptor = Object.getOwnPropertyDescriptor(book,'_year');alert(descriptor.value);//2004alert(descriptor.configurable);//falsealert(typeof descriptor.get);//'undefined'var descriptor = Object.getOwnPropertyDescriptor(book,'year');alert(descriptor.value);//'undefined'alert(descriptor.configurable);//falsealert(typeof descriptor.get);//'function'

以上就是關於javascript物件導向的詳細內容介紹，希望對大家的學習有所協助。

您可能感興趣的文章:

• JavaScript物件導向的兩種書寫方法以及差別
• JavaScript物件導向編程
• 不錯的JavaScript物件導向的簡單入門介紹
• JS物件導向、prototype、call()、apply()
• javascript 物件導向全新理練之資料的封裝
• Javascript 物件導向（一）(共有方法，私人方法，特權方法)
• JS左右無縫滾動（一般方法+物件導向方法）
• jquery方法+js一般方法+js物件導向方法實現拖拽效果
• javascript物件導向入門基礎詳細介紹