JavaScript中的對象,和其餘編程語言中的對象同樣。能夠對比現實生活中的一些東西來理解他。
在JavaScript中,一個對象可使一個單純的擁有屬性和類型的實體。假如和一個杯子相比較,一個杯子是一個對象,擁有屬性。杯子有顏色、圖案、重量等。一樣,JavaScript對象也有屬性來定義它的特徵。
方法是關聯到某個對象的函數,或者簡單來講,一個方法是一個值爲某和函數的對象屬性。定義方法就像定義普通的函數,出了他們必須被賦給對象的某個屬性。html
1.內置對象/原生對象
就是JavaScript語言預約義的對象。在ECMAScript標準定義,有JavaScript解釋器/引擎提供具體實現。
2.宿主對象
指的是JavaScript運行環境提供的對象。通常由瀏覽器廠商提供實現(目前也有獨立的JavaScript解釋器/引擎提供實現),主要分文BOM和DOM。
3.自定義對象
就是由開發人員自主建立的對象。
對象的初始化器常見方式,代碼以下;編程
Object類型與Array、Math等同樣都是JavaScript的引用類型。不過Object類型是JavaScript中全部類型的父級(全部類型的對象均可以使用Object的屬性和方法)。
JavaScript能夠經過Object的構造函數來建立自定義對象。當以非構造函數形式被調用時,Object等同於new Object()。數組
使用對象初始化器也被稱做經過字面值建立對象。瀏覽器
1.對象的初始化器建立方式 var 對象名 = { 屬性名 : 屬性值, 方法名 : function(){ 方法體 } } var obj1 = { name : '張無忌', age : 18, sayMe : function(){ console.log('我是張無忌'); } }
構造函數時經過JavaScript提供的預約義類型的構造函數來建立對象的。
代碼以下;編程語言
對象的構造函數方式 利用全部引用類型建立對應的對象 -> 具備具體的類型 var num = new Number();// Number類型 var str = new String();// String類型 var boo = new Boolean();// Boolean類型 利用Object做爲構造函數建立對象 var 對象名 = new Object(); var 對象名 = Object(); var num = new Number();//Number類型 var num2 = Number(); var str = new String();//String類型 var boo = new Boolean();//Boolean類型 var obj2 = new Object(); var obj3 = Object(); console.log(obj2);//{}空對象 console.log(obj3);//{}空對象 var obj4 = new Object(undefined); var obj5 = new Object(null); console.log(obj4);//{}空對象 console.log(obj5);//{}空對象
Object.create()方法建立一個擁有指定原型和若干個指定屬性的對象。
參數;
1.proto參數;一個對象,做爲新建立對象的原型
2.propertiesObject參數;可選。該參數對象是一組屬性與值,該對象的屬性名稱試試建立的對象的屬性名稱,值是屬性描述符。
代碼以下;函數
利用Object.create()方法建立對象 var 對象名 = Object.create(null) -> 建立一個空對象 var 對象名 = Object.create(obj) obj - 表示另外一個對象 特色 - 當前建立的新對象擁有與obj對象相同的屬性和方法 var obj6 = Object.create(null); var obj7 = Object.create(obj1);
一個JavaScript對象有很對屬性。一個對象的屬性能夠解釋成一個附加到對象的變量。對象的屬性和普通的JavaScript變量基本沒有什麼區別,僅僅是屬性屬於某個對象。優化
var obj = { name : '張無忌', 'Type-Content' : 'text/html', sayMe : function(){ console.log('我是張無忌'); } } /* 1.對象名.屬性名 * 不適用於複雜命名的屬性名稱 */ console.log(obj.name);// 張無忌 // console.log(obj.Type-Content); 2.對象名[屬性名] - 通用的調用方式 適用於複雜命名的屬性名稱 console.log(obj['name']);// 張無忌 console.log(obj['Type-Content']);// text/html 訪問一個對象不存在的屬性 -> 值爲 undefined console.log(obj.age);
1.JavaScript能夠經過點符號來訪問一個對象的屬性。code
var emp = { ename:'Tom',salary:3500 }; emp.ename = 'Tommy'//修改屬性的值 console.log(emp.ename);//獲取屬性的值
2.JavaScript對象的屬性也能夠經過方括號訪問。htm
var emp = { ename:'Tom',salary:3500 }; emp['ename'] = 'Tony';//修改屬性的值 console.log(emp["ename"]);//獲取屬性的值
JavaScript提供了三種原生方法用於遍歷或枚舉對象的屬性;
1.for...in循環:該方法依次訪問一個對象及其原型鏈中全部課枚舉的屬性。
2.Objectkeys(object)方法:該方法返回一個對象o自身包含(不包括原型中)的全部屬性的名稱的數組。
3.ObjectgetOwnpropertyNames(object)方法:該方法返回一個數組,他包含了對象o全部擁有的屬性(不管是否可枚舉)的名稱。對象
var obj = { name : '張三', age : 18, sayMe : function(){ console.log('我是張三'); } } // 1.for...in語句 for (var objAttr in obj) { // 經過對象屬性或方法對應的值的類型進行區別 if (obj[objAttr] instanceof Function) { // 當前是對象的方法 obj[objAttr](); } else { // 當前是對象的屬性 console.log(obj[objAttr]); } } // 2.Object類型提供了keys()方法 - 只能遍歷可枚舉的屬性 var arr = Object.keys(obj); for (var v in arr) { var objAttr = arr[v]; // 經過對象屬性或方法對應的值的類型進行區別 if (obj[objAttr] instanceof Function) { // 當前是對象的方法 obj[objAttr](); } else { // 當前是對象的屬性 console.log(obj[objAttr]); } } // 3.Object類型提供了getOwnPropertyNames()方法 - 包括不可枚舉的屬性 var arr = Object.getOwnPropertyNames(obj); for (var v in arr) { var objAttr = arr[v]; // 經過對象屬性或方法對應的值的類型進行區別 if (obj[objAttr] instanceof Function) { // 當前是對象的方法 obj[objAttr](); } else { // 當前是對象的屬性 console.log(obj[objAttr]); } }
當不肯定對象是否存在、對象的屬性是否存在時,可使用錯誤處理結構try...catch語句塊來捕捉拋出的錯誤,避免程序異常終止。
//訪問未聲明的變量 console.log(emp); //訪問未聲明的屬性 var emp = {}; console.log(emp.ename); //訪問未聲明的屬性的成員 console.log(emp.ename.length);
檢查對象的屬性可使用如下四種方法檢測對象中是否存在指定屬性
1.使用關鍵字in
var obj = { name : '張無忌', age : 18 } if ('age' in obj) { console.log('obj對象的age屬性存在...'); } else { console.log('obj對象的age屬性不存在...')
2.使用Object對象的hasOwnProperty()方法。
var obj = { name : '張無忌', age : 18 } if (obj.hasOwnProperty('age')) { console.log('obj對象的age屬性存在...'); } else { console.log('obj對象的age屬性不存在...') }
3.使用undefined進行判斷。
var obj = { name : '張無忌', age : 18 } if (obj.age !== undefined) { console.log('obj對象的age屬性存在...'); } else { console.log('請先定義obj對象的age屬性...'); }
4.使用if語句進行判斷
var obj = { name : '張無忌', age : 18 } if (obj.age) { console.log('obj對象的age屬性存在...'); }
能夠用delete操做符刪除一個不是繼承而來的屬性。
var obj = { name : '張無忌', sayMe : function(){ console.log('我是張無忌'); } } 1.delete 對象名.屬性名 2.delete 對象名[屬性名] delete obj.name; console.log(obj.name);// undefined
定義方法就像定義普通的函數,出了他們必須被賦予給對象的某個屬性。
var obj = { name : '張無忌', age : 18, sayMe : function(){ console.log('我是張無忌'); } } // 1.對象名.新的方法名 = function(){} obj.sayYou = function(){ console.log('你是周芷若'); } console.log(obj); // 2.對象名[新的方法名] = function(){}
對象方法的調用相似於對象屬性的調用,很簡單 有兩種屬性
var obj = { name : '張無忌', age : 18, sayMe : function(){ console.log('我是張無忌'); } } // 1.對象名.方法名() obj.sayMe(); // 2.對象名[方法名]() obj['sayMe']();
能夠用delete操做符刪除對象
代碼示例;
var obj = { name : '張無忌', age : 18, sayMe : function(){ console.log('我是張無忌'); } } // 1.delete 對象名.方法名 delete obj.sayMe; // 訪問對象中不存在的方法 -> 報錯(TypeError: obj.sayMe is not a function) // obj.sayMe(); console.log(obj.sayMe);// undefined console.log(obj); // 以屬性是否存在的方式進行判斷 if ('sayMe' in obj) { // 確認目前是一個方法 if (obj.sayMe instanceof Function) { obj.sayMe();// 方法調用 } } // 以上代碼能夠優化爲如下代碼 if ('sayMe' in obj && obj.sayMe instanceof Function) { obj.sayMe();// 方法調用 } // 2.delete 對象名[方法名]