前言
基于類的對象:我們都知道面向對象的語言中有一個明顯的標志,就是都有類的概念,通過類這個類似模板的東西我們可以創建許多個具有相同的屬性和方法的對象。然而在ECMAScript中并沒有類的概念,自然它與基于類的語言中的對象也會有所不同。
js中的對象: 無序 的屬性的集合,屬性可以包含基本值、對象、函數。即js中的對象是一組沒有特定順序的值,對象的每個屬性或者方法都有一個自己的名字,而每個名字都與一個值相對應。
理解對象
創建對象的方式
1 創建一個對象的最簡單的方式是創建一個Object實例,之后為其添加屬性和方法。
例如
var person = new Object(); person.name='謙龍'; person.sex='男'; person.sayNameAndSex=function(){ console.log(this.name,this.sex) } person.sayNameAndSex(); // 謙龍 男2 使用對象字面量形式
例如
var person={ name:'謙龍', sex:'男', sayNameAndSex:function(){ console.log(this.name,this.sex) } } person.sayNameAndSex(); // 謙龍 男屬性的類型
ECMAScript有兩種數據屬性:數據屬性和訪問器屬性。
數據屬性
數據屬性包含一個數據值的位置。在這個位置可以讀取和寫入值。共有四個描述其行為的特性。
1.[[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性...默認值為true
2.[[Enumerable]]:表示能否通過for in 循環返回屬性...默認為true
3.[[Writable]]:表示能否修改屬性的值...默認為true
4.[[Value]]:表示這個屬性的值.默認為undefined
要修改屬性默認的特性,必須使用ES5的Object.defineProperty()方法,而該方法接收三個參數:屬性所在的對象、屬性的名稱、還有一個描述屬性特性的對象(configurable、enumerable、writable、value),設置其中的一個或者多個值可以修改對應的特性
DEMO
var person={};Object.defineProperty(person,'name',{ configurable:false,//表示不允許通過delete刪除屬性 writable:false,//表示不允許重寫 ennumerable:false,//表示不允許通過for in遍歷 value:'謙龍'//設置該對象中屬性的值})person.name='謙龍2';//嘗試重新設置 結果不生效delete person.name;//嘗試刪除 結果不生效for(var attr in person){ console.log(person[attr]);// false}console.log(person.name);//謙龍注意:將 configurable 設置為false后 不允許再次修改為true,另外在調用Object.defineProperty()方法的時候,configurable、ennumerable、writable默認值為false。
訪問器屬性
訪問器屬性不包含數據值,它們包含一對getter、setter函數(但是這兩個函數并不是必須的)在讀取訪問器屬性的時候,會調用getter函數,這個函數是負責返回有效的值,在寫入訪問器屬性的時候會調用setter函數并傳入新值,這個函數負責如何處理數據。
訪問器屬性具有如下的特性
[[configurable]] 表示能否通過delete來刪除屬性從而定義新的屬性
[[enumerable]] 表示能否通過for in循環來遍歷返回屬性
[[get]] 在讀取屬性時候調用的函數,默認為undefined
[[set]] 在寫入函數的時候調用的函數,默認的值為undefined
注意:訪問器屬性不能直接定義,必須通過Object.defineProterty()定義
DEMO
var book={ _year:2015, //這里的下劃線是常見的記號,表示只能通過對象的方法才能訪問的屬性 edition:1}Object.defineProperty(book,'year',{ get:function(){ return this._year; //即默認通過 book.year獲取值的時候 返回的是 boot._year的值 }, set: function (value) {//在對 boot.year設置值的時候 默認調用的方法 對數據進行處理 var _year=this._year; if(value > _year){ this._year=value; this.edition+=value-_year; } }})book.year = 2016;console.log(book.year,book.edition); // 2016 2定義多個屬性
我們可以通過ES5中的Object.defineProperties()方法來給對象添加多個屬性,該方法接受兩個 對象 參數,第一個參數是要添加和修改其屬性的對象,第二個對象的屬性和第一個對象中要添加和修改的屬性一一對應。
DEMO
var book={};Object.defineProperties(book,{ _year:{ value:2015, writable:true //注意這里設置成true 才可以 "寫" 默認是false }, edition:{ value:1, writable:true //注意這里設置成true 才可以 "寫" 默認是false }, year:{ get:function(){ return this._year; }, set: function (value) { var _year=this._year; if(value > _year){ this._year=value; this.edition+=value-_year; } } }})book.year=2016;console.log(book.year,book.edition); // 2016 2讀取對象屬性的特性
使用ES5中的Object.getOwnPropertyDescriptor()方法,可以去的給定的屬性的描述符。
該方法接收兩個參數:屬性所在的對象和要讀取描述符的屬性名稱。返回的是一個對象,如果是數據屬性,則返回的屬性有 configurable,enumerable,writable,value.如果是訪問器屬性則返回的屬性有 configurable,enumerable,get,set
DEMO
var book={};Object.defineProperties(book,{ _year:{ value:2015, writable:true }, edition:{ value:1, writable:true }, year:{ get:function(){ return this._year; }, set: function (value) { var _year=this._year; if(value > _year){ this._year=value; this.edition+=value-_year; } } }})//對象遍歷函數function showAllProperties(obj){ for(var attr in obj){ console.log(attr+':'+obj[attr]); }}var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//數據屬性var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//訪問器屬性showAllProperties(descriptor);console.log('============================');showAllProperties(descriptor2);以上關于初步了解javascript面向對象的全部內容就介紹到這里,下面將給大家介紹深入淺析js面向對象之詳解常見創建對象的幾種方式,感興趣的朋友繼續關注哦。
新聞熱點
疑難解答