學(xué)習(xí)javascript面向?qū)ο?理解javascript對(duì)象
一、編程思想
面向過(guò)程:以過(guò)程為中心，自頂向下逐步細(xì)化，程序看成一系列函數(shù)調(diào)用的集合
面向?qū)ο?對(duì)象作為程序的基本單元，程序分解為數(shù)據(jù)和相關(guān)操作
二、類、對(duì)象
類:對(duì)具有相同特性和特征事物的抽象描述
對(duì)象:某種類型對(duì)應(yīng)的具體事物
三、面向?qū)ο蟮娜筇匦?/strong>
封裝：隱藏實(shí)現(xiàn)細(xì)節(jié)，實(shí)現(xiàn)代碼模塊化
繼承：擴(kuò)展已存在的代碼模塊，實(shí)現(xiàn)代碼重用
多態(tài)：接口的不同實(shí)現(xiàn)方式，實(shí)現(xiàn)接口重用
四、對(duì)象定義：無(wú)序?qū)傩缘募希鋵傩钥梢园局?、?duì)象或者函數(shù)
//簡(jiǎn)單的對(duì)象實(shí)例
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
}
五、內(nèi)部屬性類型：內(nèi)部屬性無(wú)法直接訪問(wèn)，ECMAScript5把它們放在兩對(duì)方括號(hào)中，分為數(shù)據(jù)屬性和訪問(wèn)器屬性
[1]數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置，在這個(gè)位置可以讀取和寫入值。數(shù)據(jù)屬性有4個(gè)特性:
a、[[Configurable]]: 表示能否通過(guò)delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問(wèn)器屬性，直接在對(duì)象上定義的屬性，默認(rèn)值為true
b、[[Enumerable]]: 表示能否通過(guò)for-in循環(huán)返回屬性,直接在對(duì)象上定義的屬性，默認(rèn)值為true
c、[[Writable]]: 表示能否修改屬性的值，直接在對(duì)象上定義的屬性，默認(rèn)值為true
d、[[Value]]: 包含這個(gè)屬性的數(shù)據(jù)值，讀取屬性值的時(shí)候，從這個(gè)位置讀；寫入屬性值的時(shí)候，把新值保存在這個(gè)位置。直接在對(duì)象上定義的屬性，默認(rèn)值為undefined
[2]訪問(wèn)器屬性不包含數(shù)據(jù)值，包含一對(duì)getter和setter函數(shù)(不過(guò)這兩個(gè)函數(shù)不是必需的)。讀取訪問(wèn)器屬性時(shí)，會(huì)調(diào)用getter函數(shù)，這個(gè)函數(shù)負(fù)責(zé)返回有效的值；在寫入訪問(wèn)器屬性時(shí)，會(huì)調(diào)用setter函數(shù)并傳入新值，這個(gè)函數(shù)負(fù)責(zé)決定如何處理函數(shù)。訪問(wèn)器屬性有如下4個(gè)特性：
a、[[Configurable]]: 表示能否通過(guò)delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問(wèn)器屬性。直接在對(duì)象上定義的屬性，默認(rèn)值為true
b、[[Enumerable]]: 表示能否通過(guò)for-in循環(huán)返回屬性，直接在對(duì)象上定義的屬性，默認(rèn)值為true
c、[[Get]]: 在讀取屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined
d、[[Set]]: 在寫入屬性時(shí)調(diào)用的函數(shù)。默認(rèn)值為undefined
六、修改內(nèi)部屬性：使用ECMAScript5的object.defineProperty()方法,該方法接收三個(gè)參數(shù)：屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象
[注意1]IE8是第一個(gè)實(shí)現(xiàn)Object.defineProperty()方法的瀏覽器版本。然而，這個(gè)版本的實(shí)現(xiàn)存在諸多限制：只能在DOM對(duì)象上使用這個(gè)方法，而且只能創(chuàng)建訪問(wèn)器屬性。由于實(shí)現(xiàn)不徹底，不建議在IE8中使用Object.defineProperty()方法
[注意2]不支持Object.defineProperty()方法的瀏覽器中不能修改[[Configurable]]和[[Enumerable]]
[1]修改數(shù)據(jù)屬性
//直接在對(duì)象上定義的屬性，Configurable、Enumerable、Writable為true
var person = {
name:'cook'
};
Object.defineProperty(person,'name',{
value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'
//不是在對(duì)象上定義的屬性，Configurable、Enumerable、Writable為false
var person = {};
Object.defineProperty(person,'name',{
value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'
//該例子中設(shè)置writable為false,則屬性值無(wú)法被修改
var person = {};
Object.defineProperty(person,'name',{
writable: false,
value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'
//該例子中設(shè)置configurable為false,則屬性不可配置
var person = {};
Object.defineProperty(person,'name',{
configurable: false,
value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'
[注意]一旦把屬性定義為不可配置的，就不能再把它變回可配置了，也就是說(shuō)可以多次調(diào)用Object.defineProperty()修改同一屬性，但在把configurable設(shè)置為false之后，就有限制了
var person = {};
Object.defineProperty(person,'name',{
configurable: false,
value: 'Nicholas'
});
//會(huì)報(bào)錯(cuò)
Object.defineProperty(person,'name',{
configurable: true,
value: 'Nicholas'
});
[2]修改訪問(wèn)器屬性
//簡(jiǎn)單的修改訪問(wèn)器屬性的例子
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)//2005
alert(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
【補(bǔ)充】創(chuàng)建訪問(wèn)器屬性的用兩個(gè)非標(biāo)準(zhǔn)的方法：__defineGetter__()和__defineSetter__()
var book = {
_year: 2004,
edition: 1
};
//定義訪問(wèn)器的舊有方法
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);//2005
alert(book.edition);//2
七、定義多個(gè)屬性：ECMAScript5定義了一個(gè)Object.defineProperties()方法，利用這個(gè)方法可以通過(guò)描述符一次定義多個(gè)屬性，這個(gè)方法接收兩個(gè)對(duì)象參數(shù)：第一個(gè)對(duì)象是要添加和修改其屬性的對(duì)象，第二個(gè)對(duì)象的屬性與第一個(gè)對(duì)象要添加或修改的一一對(duì)應(yīng)
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()方法，可以取得給定屬性的描述符。該方法接收兩個(gè)參數(shù)：屬性所在對(duì)象和要讀取其描述符的屬性名稱，返回值是一個(gè)對(duì)象。
[注意]可以針對(duì)任何對(duì)象——包括DOM和BOM對(duì)象，使用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);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'undefined'
var descriptor = Object.getOwnPropertyDescriptor(book,'year');
alert(descriptor.value);//'undefined'
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'function'
以上就是關(guān)于javascript面向?qū)ο蟮脑敿?xì)內(nèi)容介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。
- JavaScript面向?qū)ο蟮膬煞N書寫方法以及差別
- JavaScript面向?qū)ο缶幊?/a>
- 不錯(cuò)的JavaScript面向?qū)ο蟮暮?jiǎn)單入門介紹
- JS面向?qū)ο?、prototype、call()、apply()
- javascript 面向?qū)ο笕吕砭氈當(dāng)?shù)據(jù)的封裝
- Javascript 面向?qū)ο螅ㄒ唬?共有方法，私有方法，特權(quán)方法)
- JS左右無(wú)縫滾動(dòng)（一般方法+面向?qū)ο蠓椒ǎ?/a>
- jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細(xì)介紹
相關(guān)文章
JavaScript?邏輯或?||?的妙用及相關(guān)知識(shí)普及
本文給大家介紹了JavaScript中的邏輯或運(yùn)算符||的用法,包括其基本概念、真值和假值、常見應(yīng)用以及與其他邏輯運(yùn)算符的對(duì)比,感興趣的朋友跟隨小編一起看看吧2024-12-12
JS模態(tài)窗口返回值兼容問(wèn)題的完美解決方法
下面小編就為大家?guī)?lái)一篇JS模態(tài)窗口返回值兼容問(wèn)題的完美解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼,涉及javascript遍歷select及設(shè)置css屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
Javascript實(shí)現(xiàn)登錄框拖拽效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)登錄框拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了JavaScript稀疏數(shù)組與孔hole示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
ES6中Array.includes()函數(shù)的用法
這篇文章主要介紹了ES6中Array.includes()函數(shù)的用法,需要的朋友可以參考下2017-09-09
詳細(xì)講解js實(shí)現(xiàn)電梯導(dǎo)航的實(shí)例
對(duì)于某一個(gè)頁(yè)面內(nèi)容繁多,如果我們滾動(dòng)的時(shí)間較長(zhǎng),為了增加用戶體驗(yàn),我們需要實(shí)現(xiàn)點(diǎn)擊某一個(gè)按鈕,然后滾動(dòng)到對(duì)應(yīng)的區(qū)域,滾動(dòng)的時(shí)候,右側(cè)對(duì)應(yīng)的分類實(shí)現(xiàn)高亮,所以本文給大家詳細(xì)介紹講解了js實(shí)現(xiàn)電梯導(dǎo)航,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了JS實(shí)現(xiàn)馬賽克圖片效果,結(jié)合完整實(shí)例形式分析了JavaScript基于HTML5 canvas圖形元素繪制實(shí)現(xiàn)馬賽克效果相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了js獲取數(shù)組中的最大值的9種方法，以及每種方法的工作原理和用法，文中的示例代碼講解詳細(xì)，需要的可以參考下2023-08-08
javascript中this做事件參數(shù)相關(guān)問(wèn)題解答
有關(guān)this想必大家早有所耳聞，只不過(guò)在使用中不是那么在意而已，接下來(lái)為大家介紹下this做事件參數(shù)問(wèn)題，感興趣的你可不要錯(cuò)過(guò)了哈2013-03-03