學(xué)習(xí)javascript面向?qū)ο?理解javascript對象
一、編程思想
面向過程:以過程為中心，自頂向下逐步細化，程序看成一系列函數(shù)調(diào)用的集合
面向?qū)ο?對象作為程序的基本單元，程序分解為數(shù)據(jù)和相關(guān)操作
二、類、對象
類:對具有相同特性和特征事物的抽象描述
對象:某種類型對應(yīng)的具體事物
三、面向?qū)ο蟮娜筇匦?/strong>
封裝：隱藏實現(xiàn)細節(jié)，實現(xiàn)代碼模塊化
繼承：擴展已存在的代碼模塊，實現(xiàn)代碼重用
多態(tài)：接口的不同實現(xiàn)方式，實現(xiàn)接口重用
四、對象定義：無序?qū)傩缘募希鋵傩钥梢园局?、對象或者函?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)部屬性無法直接訪問，ECMAScript5把它們放在兩對方括號中，分為數(shù)據(jù)屬性和訪問器屬性
[1]數(shù)據(jù)屬性包含一個數(shù)據(jù)值的位置，在這個位置可以讀取和寫入值。數(shù)據(jù)屬性有4個特性:
a、[[Configurable]]: 表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性，直接在對象上定義的屬性，默認值為true
b、[[Enumerable]]: 表示能否通過for-in循環(huán)返回屬性,直接在對象上定義的屬性，默認值為true
c、[[Writable]]: 表示能否修改屬性的值，直接在對象上定義的屬性，默認值為true
d、[[Value]]: 包含這個屬性的數(shù)據(jù)值，讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值保存在這個位置。直接在對象上定義的屬性，默認值為undefined
[2]訪問器屬性不包含數(shù)據(jù)值，包含一對getter和setter函數(shù)(不過這兩個函數(shù)不是必需的)。讀取訪問器屬性時，會調(diào)用getter函數(shù)，這個函數(shù)負責(zé)返回有效的值；在寫入訪問器屬性時，會調(diào)用setter函數(shù)并傳入新值，這個函數(shù)負責(zé)決定如何處理函數(shù)。訪問器屬性有如下4個特性：
a、[[Configurable]]: 表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性。直接在對象上定義的屬性，默認值為true
b、[[Enumerable]]: 表示能否通過for-in循環(huán)返回屬性，直接在對象上定義的屬性，默認值為true
c、[[Get]]: 在讀取屬性時調(diào)用的函數(shù)。默認值為undefined
d、[[Set]]: 在寫入屬性時調(diào)用的函數(shù)。默認值為undefined
六、修改內(nèi)部屬性：使用ECMAScript5的object.defineProperty()方法,該方法接收三個參數(shù)：屬性所在的對象、屬性的名字和一個描述符對象
[注意1]IE8是第一個實現(xiàn)Object.defineProperty()方法的瀏覽器版本。然而，這個版本的實現(xiàn)存在諸多限制：只能在DOM對象上使用這個方法，而且只能創(chuàng)建訪問器屬性。由于實現(xiàn)不徹底，不建議在IE8中使用Object.defineProperty()方法
[注意2]不支持Object.defineProperty()方法的瀏覽器中不能修改[[Configurable]]和[[Enumerable]]
[1]修改數(shù)據(jù)屬性
//直接在對象上定義的屬性，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'
//不是在對象上定義的屬性，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,則屬性值無法被修改
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'
[注意]一旦把屬性定義為不可配置的，就不能再把它變回可配置了，也就是說可以多次調(diào)用Object.defineProperty()修改同一屬性，但在把configurable設(shè)置為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)//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
【補充】創(chuàng)建訪問器屬性的用兩個非標準的方法：__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);//2005
alert(book.edition);//2
七、定義多個屬性：ECMAScript5定義了一個Object.defineProperties()方法，利用這個方法可以通過描述符一次定義多個屬性，這個方法接收兩個對象參數(shù)：第一個對象是要添加和修改其屬性的對象，第二個對象的屬性與第一個對象要添加或修改的一一對應(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()方法，可以取得給定屬性的描述符。該方法接收兩個參數(shù)：屬性所在對象和要讀取其描述符的屬性名稱，返回值是一個對象。
[注意]可以針對任何對象——包括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);//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ū)ο蟮脑敿殐?nèi)容介紹，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)trigger方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js如何使用Pagination+PageHelper實現(xiàn)分頁
本文主要介紹了js如何使用Pagination+PageHelper實現(xiàn)分頁，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本文通過示例向大家簡單分析了javascript的事件和方法，文章簡潔而不簡單，是篇非常不錯的基礎(chǔ)文章，這里推薦給大家。2015-02-02
這篇文章主要為大家詳細介紹了微信小程序使用藍牙小插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
模板淘寶首頁的分類列表效果，17173的游戲分類效果也不錯。2009-04-04
CSS中position屬性之fixed實現(xiàn)div居中
這篇文章主要介紹了CSS中position屬性之fixed實現(xiàn)div居中的相關(guān)資料,需要的朋友可以參考下2015-12-12
JavaScript學(xué)習(xí)筆記--常用的互動方法
本文對JavaScript中常用的互動方法進行實例分析介紹，圖文并茂，有需要的朋友可以看下2016-12-12
這篇文章介紹了微信小程序?qū)崿F(xiàn)簡易計算器的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了微信小程序生成分享海報方法（附帶二維碼生成），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
w3c聲明下可運行 兼容性比較好的js對聯(lián)廣告集合
最近有美工朋友找我們要兼容性比較好的對聯(lián)廣告代碼，我們給他一個他竟然不能運行，經(jīng)過排查，這是因為現(xiàn)在的廣告也用了一樣代碼，函數(shù)命名重復(fù)。2011-07-07