摘要:中的對象無序的屬性的集合,屬性可以包含基本值對象函數。共有四個描述其行為的特性。返回的是一個對象,如果是數據屬性,則返回的屬性有如果是訪問器屬性則返回的屬性有對象遍歷函數數據屬性訪問器屬性測試
前言
理解對象 創建對象的方式基于類的對象:我們都知道面向對象的語言中有一個明顯的標志,就是都有類的概念,通過類這個類似模板的東西我們可以創建許多個具有相同的屬性和方法的對象。然而在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:"謙龍"http://設置該對象中屬性的值 }) 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);
測試
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86159.html
摘要:有需要還可以修改指向謙龍寄生組合式繼承思路是通過借用構造函數來繼承屬性,通過原型鏈的混合形式來繼承方法改變執行環境實現繼承有需要還可以修改指向謙龍謙龍拷貝繼承該方法思路是將另外一個對象的屬性和方法拷貝至另一個對象使用遞歸 前言 js中實現繼承的方式只支持實現繼承,即繼承實際的方法,而實現繼承主要是依靠原型鏈來完成的。 原型鏈式繼承 該方式實現的本質是重寫原型對象,代之以一個新類型的實例...
摘要:以基于的富應用開發為主要學習資料。下面用實現一個例子使用匿名函數來封裝一個作用域在頁面加載時綁定事件監聽上面的代碼創建了控制器,這個控制器是放在變量下的命名空間。然后用了一個匿名函數封裝了一個作用域,以避免對全局作用域造成污染。 公開記錄學習JS MVC,不知道能堅持多久= =。以《基于MVC的JavaScript web富應用開發》為主要學習資料。 什么是MVC MVC 是一種設...
摘要:前言雖然使用構造函數或者使用對象字面量可以很方便的用來創建一個對象,但這種方式有一個明顯的缺點使用一個接口創建多個對象會產生很多冗余的代碼。即調用構造函數所創建的那個對象的原型對象好處是可以讓所有對象的實例共享他的屬性的方法。 前言 雖然使用Object構造函數或者使用對象字面量可以很方便的用來創建一個對象,但這種方式有一個明顯的缺點:使用一個接口創建多個對象會產生很多冗余的代碼。因此...
EcmaScript 其實是一種語言規范,常見的 JavaScript, ActionScript 等都是其具體實現,平時使用中一般可以將其和Javascript對等稱呼,本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來的新的特性,并初步掌握如何利用其進行開發。 本系列面向有一定基礎知識的ES5使用者,不適合初學者。 先來看兩段代碼: Human.js exp...
摘要:三類的定義類體由成員函數和成員變量組成一定要注意后面的分號為定義類的關鍵字,為類的名字,中為類的主體,注意類定義結束時后面分號。在類和對象階段,我們研究類的封裝特性。 ...
閱讀 455·2023-04-25 23:00
閱讀 3486·2021-11-22 13:54
閱讀 1886·2021-10-27 14:14
閱讀 1478·2019-08-30 13:59
閱讀 3503·2019-08-23 16:15
閱讀 1948·2019-08-23 16:06
閱讀 3315·2019-08-23 15:26
閱讀 1246·2019-08-23 13:48