初步了解javascript面向?qū)ο?/h1>
更新時(shí)間:2015年11月09日 09:53:24 投稿:mrr
面向?qū)ο蟮恼Z言有一個(gè)標(biāo)志,即擁有類的概念,抽象實(shí)例對象的公共屬性與方法,基于類可以創(chuàng)建任意多個(gè)實(shí)例對象,一般具有封裝、繼承、多態(tài)的特性!但JS中對象與純面向?qū)ο笳Z言中的對象是不同的,ECMA標(biāo)準(zhǔn)定義JS中對象:無序?qū)傩缘募?,其屬性可以包含基本值、對象或函?shù)
前言
基于類的對象:我們都知道面向?qū)ο蟮恼Z言中有一個(gè)明顯的標(biāo)志,就是都有類的概念,通過類這個(gè)類似模板的東西我們可以創(chuàng)建許多個(gè)具有相同的屬性和方法的對象。然而在ECMAScript中并沒有類的概念,自然它與基于類的語言中的對象也會有所不同。
js中的對象: 無序 的屬性的集合,屬性可以包含基本值、對象、函數(shù)。即js中的對象是一組沒有特定順序的值,對象的每個(gè)屬性或者方法都有一個(gè)自己的名字,而每個(gè)名字都與一個(gè)值相對應(yīng)。
理解對象
創(chuàng)建對象的方式
1 創(chuàng)建一個(gè)對象的最簡單的方式是創(chuàng)建一個(gè)Object實(shí)例,之后為其添加屬性和方法。
例如
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有兩種數(shù)據(jù)屬性:數(shù)據(jù)屬性和訪問器屬性。
數(shù)據(jù)屬性
數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置。在這個(gè)位置可以讀取和寫入值。共有四個(gè)描述其行為的特性。
1.[[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性...默認(rèn)值為true
2.[[Enumerable]]:表示能否通過for in 循環(huán)返回屬性...默認(rèn)為true
3.[[Writable]]:表示能否修改屬性的值...默認(rèn)為true
4.[[Value]]:表示這個(gè)屬性的值.默認(rèn)為undefined
要修改屬性默認(rèn)的特性,必須使用ES5的Object.defineProperty()方法,而該方法接收三個(gè)參數(shù):屬性所在的對象、屬性的名稱、還有一個(gè)描述屬性特性的對象(configurable、enumerable、writable、value),設(shè)置其中的一個(gè)或者多個(gè)值可以修改對應(yīng)的特性
DEMO
var person={};
Object.defineProperty(person,'name',{
configurable:false,//表示不允許通過delete刪除屬性
writable:false,//表示不允許重寫
ennumerable:false,//表示不允許通過for in遍歷
value:'謙龍'//設(shè)置該對象中屬性的值
})
person.name='謙龍2';//嘗試重新設(shè)置 結(jié)果不生效
delete person.name;//嘗試刪除 結(jié)果不生效
for(var attr in person){
console.log(person[attr]);// false
}
console.log(person.name);//謙龍
注意:將 configurable 設(shè)置為false后 不允許再次修改為true,另外在調(diào)用Object.defineProperty()方法的時(shí)候,configurable、ennumerable、writable默認(rèn)值為false。
訪問器屬性
訪問器屬性不包含數(shù)據(jù)值,它們包含一對getter、setter函數(shù)(但是這兩個(gè)函數(shù)并不是必須的)在讀取訪問器屬性的時(shí)候,會調(diào)用getter函數(shù),這個(gè)函數(shù)是負(fù)責(zé)返回有效的值,在寫入訪問器屬性的時(shí)候會調(diào)用setter函數(shù)并傳入新值,這個(gè)函數(shù)負(fù)責(zé)如何處理數(shù)據(jù)。
訪問器屬性具有如下的特性
[[configurable]] 表示能否通過delete來刪除屬性從而定義新的屬性
[[enumerable]] 表示能否通過for in循環(huán)來遍歷返回屬性
[[get]] 在讀取屬性時(shí)候調(diào)用的函數(shù),默認(rèn)為undefined
[[set]] 在寫入函數(shù)的時(shí)候調(diào)用的函數(shù),默認(rèn)的值為undefined
注意:訪問器屬性不能直接定義,必須通過Object.defineProterty()定義
DEMO
var book={
_year:2015, //這里的下劃線是常見的記號,表示只能通過對象的方法才能訪問的屬性
edition:1
}
Object.defineProperty(book,'year',{
get:function(){
return this._year; //即默認(rèn)通過 book.year獲取值的時(shí)候 返回的是 boot._year的值
},
set: function (value) {//在對 boot.year設(shè)置值的時(shí)候 默認(rèn)調(diào)用的方法 對數(shù)據(jù)進(jìn)行處理
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
定義多個(gè)屬性
我們可以通過ES5中的Object.defineProperties()方法來給對象添加多個(gè)屬性,該方法接受兩個(gè) 對象 參數(shù),第一個(gè)參數(shù)是要添加和修改其屬性的對象,第二個(gè)對象的屬性和第一個(gè)對象中要添加和修改的屬性一一對應(yīng)。
DEMO
var book={};
Object.defineProperties(book,{
_year:{
value:2015,
writable:true //注意這里設(shè)置成true 才可以 "寫" 默認(rèn)是false
},
edition:{
value:1,
writable:true //注意這里設(shè)置成true 才可以 "寫" 默認(rèn)是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()方法,可以去的給定的屬性的描述符。
該方法接收兩個(gè)參數(shù):屬性所在的對象和要讀取描述符的屬性名稱。返回的是一個(gè)對象,如果是數(shù)據(jù)屬性,則返回的屬性有 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;
}
}
}
})
//對象遍歷函數(shù)
function showAllProperties(obj){
for(var attr in obj){
console.log(attr+':'+obj[attr]);
}
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//數(shù)據(jù)屬性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//訪問器屬性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);
以上關(guān)于初步了解javascript面向?qū)ο蟮娜績?nèi)容就介紹到這里,下面將給大家介紹深入淺析js面向?qū)ο笾斀獬R妱?chuàng)建對象的幾種方式,感興趣的朋友繼續(xù)關(guān)注哦。
您可能感興趣的文章:- js實(shí)現(xiàn)對ajax請求面向?qū)ο蟮姆庋b
- 詳解JavaScript基于面向?qū)ο笾^承實(shí)例
- 詳解JavaScript基于面向?qū)ο笾^承
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(2)
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(1)
- Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
- 每天一篇javascript學(xué)習(xí)小結(jié)(面向?qū)ο缶幊蹋?/a>
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JavaScript的面向?qū)ο缶幊袒A(chǔ)
- 簡單分析javascript面向?qū)ο笈c原型
- JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析
相關(guān)文章
-
微信小程序pinker組件使用實(shí)現(xiàn)自動相減日期
這篇文章主要介紹了微信小程序pinker組件使用實(shí)現(xiàn)自動相減日期,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2020-05-05
-
JavaScript new對象的四個(gè)過程實(shí)例淺析
這篇文章主要介紹了JavaScript new對象的四個(gè)過程,結(jié)合實(shí)例形式簡單分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中new對象的四個(gè)過程相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下 2018-07-07
-
JS+CSS實(shí)現(xiàn)動態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)動態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2021-02-02
-
JavaScript中SQL語句的應(yīng)用實(shí)現(xiàn)
最近一直在用javascript在做項(xiàng)目 可是做著做著 感覺很多功能代碼都是重復(fù)的。 2010-05-05
-
JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題
這篇文章主要介紹了JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題做個(gè)筆錄,以防出現(xiàn)類似錯誤,需要的朋友可以參考下 2016-08-08
-
JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法
這篇文章主要介紹了JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法,需要的朋友可以參考下 2015-12-12
最新評論
前言
基于類的對象:我們都知道面向?qū)ο蟮恼Z言中有一個(gè)明顯的標(biāo)志,就是都有類的概念,通過類這個(gè)類似模板的東西我們可以創(chuàng)建許多個(gè)具有相同的屬性和方法的對象。然而在ECMAScript中并沒有類的概念,自然它與基于類的語言中的對象也會有所不同。
js中的對象: 無序 的屬性的集合,屬性可以包含基本值、對象、函數(shù)。即js中的對象是一組沒有特定順序的值,對象的每個(gè)屬性或者方法都有一個(gè)自己的名字,而每個(gè)名字都與一個(gè)值相對應(yīng)。
理解對象
創(chuàng)建對象的方式
1 創(chuàng)建一個(gè)對象的最簡單的方式是創(chuàng)建一個(gè)Object實(shí)例,之后為其添加屬性和方法。
例如
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有兩種數(shù)據(jù)屬性:數(shù)據(jù)屬性和訪問器屬性。
數(shù)據(jù)屬性
數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置。在這個(gè)位置可以讀取和寫入值。共有四個(gè)描述其行為的特性。
1.[[Configurable]]:表示能否通過delete刪除屬性從而重新定義屬性...默認(rèn)值為true
2.[[Enumerable]]:表示能否通過for in 循環(huán)返回屬性...默認(rèn)為true
3.[[Writable]]:表示能否修改屬性的值...默認(rèn)為true
4.[[Value]]:表示這個(gè)屬性的值.默認(rèn)為undefined
要修改屬性默認(rèn)的特性,必須使用ES5的Object.defineProperty()方法,而該方法接收三個(gè)參數(shù):屬性所在的對象、屬性的名稱、還有一個(gè)描述屬性特性的對象(configurable、enumerable、writable、value),設(shè)置其中的一個(gè)或者多個(gè)值可以修改對應(yīng)的特性
DEMO
var person={}; Object.defineProperty(person,'name',{ configurable:false,//表示不允許通過delete刪除屬性 writable:false,//表示不允許重寫 ennumerable:false,//表示不允許通過for in遍歷 value:'謙龍'//設(shè)置該對象中屬性的值 }) person.name='謙龍2';//嘗試重新設(shè)置 結(jié)果不生效 delete person.name;//嘗試刪除 結(jié)果不生效 for(var attr in person){ console.log(person[attr]);// false } console.log(person.name);//謙龍
注意:將 configurable 設(shè)置為false后 不允許再次修改為true,另外在調(diào)用Object.defineProperty()方法的時(shí)候,configurable、ennumerable、writable默認(rèn)值為false。
訪問器屬性
訪問器屬性不包含數(shù)據(jù)值,它們包含一對getter、setter函數(shù)(但是這兩個(gè)函數(shù)并不是必須的)在讀取訪問器屬性的時(shí)候,會調(diào)用getter函數(shù),這個(gè)函數(shù)是負(fù)責(zé)返回有效的值,在寫入訪問器屬性的時(shí)候會調(diào)用setter函數(shù)并傳入新值,這個(gè)函數(shù)負(fù)責(zé)如何處理數(shù)據(jù)。
訪問器屬性具有如下的特性
[[configurable]] 表示能否通過delete來刪除屬性從而定義新的屬性
[[enumerable]] 表示能否通過for in循環(huán)來遍歷返回屬性
[[get]] 在讀取屬性時(shí)候調(diào)用的函數(shù),默認(rèn)為undefined
[[set]] 在寫入函數(shù)的時(shí)候調(diào)用的函數(shù),默認(rèn)的值為undefined
注意:訪問器屬性不能直接定義,必須通過Object.defineProterty()定義
DEMO
var book={ _year:2015, //這里的下劃線是常見的記號,表示只能通過對象的方法才能訪問的屬性 edition:1 } Object.defineProperty(book,'year',{ get:function(){ return this._year; //即默認(rèn)通過 book.year獲取值的時(shí)候 返回的是 boot._year的值 }, set: function (value) {//在對 boot.year設(shè)置值的時(shí)候 默認(rèn)調(diào)用的方法 對數(shù)據(jù)進(jìn)行處理 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
定義多個(gè)屬性
我們可以通過ES5中的Object.defineProperties()方法來給對象添加多個(gè)屬性,該方法接受兩個(gè) 對象 參數(shù),第一個(gè)參數(shù)是要添加和修改其屬性的對象,第二個(gè)對象的屬性和第一個(gè)對象中要添加和修改的屬性一一對應(yīng)。
DEMO
var book={}; Object.defineProperties(book,{ _year:{ value:2015, writable:true //注意這里設(shè)置成true 才可以 "寫" 默認(rèn)是false }, edition:{ value:1, writable:true //注意這里設(shè)置成true 才可以 "寫" 默認(rèn)是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()方法,可以去的給定的屬性的描述符。
該方法接收兩個(gè)參數(shù):屬性所在的對象和要讀取描述符的屬性名稱。返回的是一個(gè)對象,如果是數(shù)據(jù)屬性,則返回的屬性有 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; } } } }) //對象遍歷函數(shù) function showAllProperties(obj){ for(var attr in obj){ console.log(attr+':'+obj[attr]); } } var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//數(shù)據(jù)屬性 var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//訪問器屬性 showAllProperties(descriptor); console.log('============================'); showAllProperties(descriptor2);
以上關(guān)于初步了解javascript面向?qū)ο蟮娜績?nèi)容就介紹到這里,下面將給大家介紹深入淺析js面向?qū)ο笾斀獬R妱?chuàng)建對象的幾種方式,感興趣的朋友繼續(xù)關(guān)注哦。
- js實(shí)現(xiàn)對ajax請求面向?qū)ο蟮姆庋b
- 詳解JavaScript基于面向?qū)ο笾^承實(shí)例
- 詳解JavaScript基于面向?qū)ο笾^承
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(2)
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象(1)
- Javascript簡單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
- 每天一篇javascript學(xué)習(xí)小結(jié)(面向?qū)ο缶幊蹋?/a>
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JavaScript的面向?qū)ο缶幊袒A(chǔ)
- 簡單分析javascript面向?qū)ο笈c原型
- JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析
相關(guān)文章
微信小程序pinker組件使用實(shí)現(xiàn)自動相減日期
這篇文章主要介紹了微信小程序pinker組件使用實(shí)現(xiàn)自動相減日期,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05JavaScript new對象的四個(gè)過程實(shí)例淺析
這篇文章主要介紹了JavaScript new對象的四個(gè)過程,結(jié)合實(shí)例形式簡單分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中new對象的四個(gè)過程相關(guān)原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07JS+CSS實(shí)現(xiàn)動態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)動態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02JavaScript中SQL語句的應(yīng)用實(shí)現(xiàn)
最近一直在用javascript在做項(xiàng)目 可是做著做著 感覺很多功能代碼都是重復(fù)的。2010-05-05JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題
這篇文章主要介紹了JavaScript將DOM事件處理程序封裝為event.js 出現(xiàn)的低級錯誤問題做個(gè)筆錄,以防出現(xiàn)類似錯誤,需要的朋友可以參考下2016-08-08JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法
這篇文章主要介紹了JavaScript計(jì)劃任務(wù)后臺運(yùn)行的方法,需要的朋友可以參考下2015-12-12