摘要:中的對(duì)象無序的屬性的集合,屬性可以包含基本值對(duì)象函數(shù)。共有四個(gè)描述其行為的特性。返回的是一個(gè)對(duì)象,如果是數(shù)據(jù)屬性,則返回的屬性有如果是訪問器屬性則返回的屬性有對(duì)象遍歷函數(shù)數(shù)據(jù)屬性訪問器屬性測(cè)試
前言
理解對(duì)象 創(chuàng)建對(duì)象的方式基于類的對(duì)象:我們都知道面向?qū)ο蟮恼Z言中有一個(gè)明顯的標(biāo)志,就是都有類的概念,通過類這個(gè)類似模板的東西我們可以創(chuàng)建許多個(gè)具有相同的屬性和方法的對(duì)象。然而在ECMAScript中并沒有類的概念,自然它與基于類的語言中的對(duì)象也會(huì)有所不同。
js中的對(duì)象:無序的屬性的集合,屬性可以包含基本值、對(duì)象、函數(shù)。即js中的對(duì)象是一組沒有特定順序的值,對(duì)象的每個(gè)屬性或者方法都有一個(gè)自己的名字,而每個(gè)名字都與一個(gè)值相對(duì)應(yīng)。
1 創(chuàng)建一個(gè)對(duì)象的最簡(jiǎn)單的方式是創(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 使用對(duì)象字面量形式
例如
var person={ name:"謙龍", sex:"男", sayNameAndSex:function(){ console.log(this.name,this.sex) } } person.sayNameAndSex(); // 謙龍 男屬性的類型
數(shù)據(jù)屬性ECMAScript有兩種數(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ù):屬性所在的對(duì)象、屬性的名稱、還有一個(gè)描述屬性特性的對(duì)象(configurable、enumerable、writable、value),設(shè)置其中的一個(gè)或者多個(gè)值可以修改對(duì)應(yīng)的特性
DEMO
var person={}; Object.defineProperty(person,"name",{ configurable:false,//表示不允許通過delete刪除屬性 writable:false,//表示不允許重寫 ennumerable:false,//表示不允許通過for in遍歷 value:"謙龍"http://設(shè)置該對(duì)象中屬性的值 }) 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ù)值,它們包含一對(duì)getter、setter函數(shù)(但是這兩個(gè)函數(shù)并不是必須的)在讀取訪問器屬性的時(shí)候,會(huì)調(diào)用getter函數(shù),這個(gè)函數(shù)是負(fù)責(zé)返回有效的值,在寫入訪問器屬性的時(shí)候會(huì)調(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, //這里的下劃線是常見的記號(hào),表示只能通過對(duì)象的方法才能訪問的屬性 edition:1 } Object.defineProperty(book,"year",{ get:function(){ return this._year; //即默認(rèn)通過 book.year獲取值的時(shí)候 返回的是 boot._year的值 }, set: function (value) {//在對(duì) boot.year設(shè)置值的時(shí)候 默認(rèn)調(diào)用的方法 對(duì)數(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()方法來給對(duì)象添加多個(gè)屬性,該方法接受兩個(gè)對(duì)象參數(shù),第一個(gè)參數(shù)是要添加和修改其屬性的對(duì)象,第二個(gè)對(duì)象的屬性和第一個(gè)對(duì)象中要添加和修改的屬性一一對(duì)應(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讀取對(duì)象屬性的特性
使用ES5中的Object.getOwnPropertyDescriptor()方法,可以去的給定的屬性的描述符。
該方法接收兩個(gè)參數(shù):屬性所在的對(duì)象和要讀取描述符的屬性名稱。返回的是一個(gè)對(duì)象,如果是數(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; } } } }) //對(duì)象遍歷函數(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);
測(cè)試
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/86159.html
摘要:有需要還可以修改指向謙龍寄生組合式繼承思路是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混合形式來繼承方法改變執(zhí)行環(huán)境實(shí)現(xiàn)繼承有需要還可以修改指向謙龍謙龍拷貝繼承該方法思路是將另外一個(gè)對(duì)象的屬性和方法拷貝至另一個(gè)對(duì)象使用遞歸 前言 js中實(shí)現(xiàn)繼承的方式只支持實(shí)現(xiàn)繼承,即繼承實(shí)際的方法,而實(shí)現(xiàn)繼承主要是依靠原型鏈來完成的。 原型鏈?zhǔn)嚼^承 該方式實(shí)現(xiàn)的本質(zhì)是重寫原型對(duì)象,代之以一個(gè)新類型的實(shí)例...
摘要:以基于的富應(yīng)用開發(fā)為主要學(xué)習(xí)資料。下面用實(shí)現(xiàn)一個(gè)例子使用匿名函數(shù)來封裝一個(gè)作用域在頁面加載時(shí)綁定事件監(jiān)聽上面的代碼創(chuàng)建了控制器,這個(gè)控制器是放在變量下的命名空間。然后用了一個(gè)匿名函數(shù)封裝了一個(gè)作用域,以避免對(duì)全局作用域造成污染。 公開記錄學(xué)習(xí)JS MVC,不知道能堅(jiān)持多久= =。以《基于MVC的JavaScript web富應(yīng)用開發(fā)》為主要學(xué)習(xí)資料。 什么是MVC MVC 是一種設(shè)...
摘要:前言雖然使用構(gòu)造函數(shù)或者使用對(duì)象字面量可以很方便的用來創(chuàng)建一個(gè)對(duì)象,但這種方式有一個(gè)明顯的缺點(diǎn)使用一個(gè)接口創(chuàng)建多個(gè)對(duì)象會(huì)產(chǎn)生很多冗余的代碼。即調(diào)用構(gòu)造函數(shù)所創(chuàng)建的那個(gè)對(duì)象的原型對(duì)象好處是可以讓所有對(duì)象的實(shí)例共享他的屬性的方法。 前言 雖然使用Object構(gòu)造函數(shù)或者使用對(duì)象字面量可以很方便的用來創(chuàng)建一個(gè)對(duì)象,但這種方式有一個(gè)明顯的缺點(diǎn):使用一個(gè)接口創(chuàng)建多個(gè)對(duì)象會(huì)產(chǎn)生很多冗余的代碼。因此...
EcmaScript 其實(shí)是一種語言規(guī)范,常見的 JavaScript, ActionScript 等都是其具體實(shí)現(xiàn),平時(shí)使用中一般可以將其和Javascript對(duì)等稱呼,本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性,并初步掌握如何利用其進(jìn)行開發(fā)。 本系列面向有一定基礎(chǔ)知識(shí)的ES5使用者,不適合初學(xué)者。 先來看兩段代碼: Human.js exp...
摘要:三類的定義類體由成員函數(shù)和成員變量組成一定要注意后面的分號(hào)為定義類的關(guān)鍵字,為類的名字,中為類的主體,注意類定義結(jié)束時(shí)后面分號(hào)。在類和對(duì)象階段,我們研究類的封裝特性。 ...
閱讀 467·2023-04-25 23:00
閱讀 3496·2021-11-22 13:54
閱讀 1902·2021-10-27 14:14
閱讀 1489·2019-08-30 13:59
閱讀 3514·2019-08-23 16:15
閱讀 1961·2019-08-23 16:06
閱讀 3332·2019-08-23 15:26
閱讀 1261·2019-08-23 13:48