一、編程思想
面向過程:以過程為中心,自頂向下逐步細化,程序看成一系列函數調用的集合
面向對象:對象作為程序的基本單元,程序分解為數據和相關操作
二、類、對象
類:對具有相同特性和特征事物的抽象描述
對象:某種類型對應的具體事物
三、面向對象的三大特性
封裝:隱藏實現細節,實現代碼模塊化
繼承:擴展已存在的代碼模塊,實現代碼重用
多態:接口的不同實現方式,實現接口重用
四、對象定義:無序屬性的集合,其屬性可以包含基本值、對象或者函數
//簡單的對象實例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面向對象的詳細內容介紹,希望對大家的學習有所幫助。
新聞熱點
疑難解答