JavaScript中的對象我的分享
對象
對象的概念
- 所謂對象就是是一個擁有屬性和方法的集合體
對象的分類
-
內置對象/原生對象:瀏覽器
- 引用類型能夠稱做爲內置對象
-
宿主對象:函數
- 就是寄生在一個東西上的對象好比瀏覽器提供的對象
- 好比：DOM、BOM
-
自定義對象優化
- 開發人員建立的對象
-
Object對象是什麼spa
- object類型是全部JavaScript類型的父級
建立對象
對象的初始化器建立方式
var 對象名 = {
屬性名 : 屬性值,
方法名 : function(){
方法體
}
}
- 注意: 若是存在多個屬性名的話中間用 " , "隔開
示例代碼:code
var obj1 = {
name : '一花一世界',
name1 : '一葉一孤城',
soso : function () {
console.log('你是哈士奇')
}
};
對象的構造函數方式
-
利用全部引用類型常見對應的對象 - 就是具備具體的類型對象
- var num = new Number();// Number類型
- var str = new String();// String類型
- var boo = new Boolean();// Boolean類型
-
利用Object做爲構造函數建立對象圖片
- var 對象名 = new Object();
- var 對象名 = Object();
示例代碼:ip
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()方法建立對象
- var 對象名 = Object.create(null) - 就是建立一個空對象
-
var 對象名 = Object.create(obj)開發
- obj - 表示另外一個對象
- 特色 - 當前建立的新對象擁有與obj對象相同的屬性和方法
示例代碼:get
var obj6 = Object.create(null);
var obj7 = Object.create(obj1);
console.log(obj6);// 調用結果爲 { }
console.log(obj7);// 調用結果爲 { }
建立空對象
-
建立空對象的方式目前有如下幾種
- var obj1 = {};
- var obj2 = new Object();
- var obj3 = Object();
- var obj4 = new Object(undefined);
- var obj5 = new Object(null);
- var obj6 = Object(undefined);
- var obj7 = Object(null);
- var obj8 = Object.create(null);
建立方式的對比
-
Number,String和Boolean
- 字面量方式建立的是原始類型,構造函數方式建立是引用類型
-
Array和Object
- 不管是字面量方式仍是構造函數方式建立的都是引用類型
示例代碼:
// 1. Number類型
var num1 = 100;// 字面量方式
var num2 = new Number();// 構造函數方式
// 2. String類型
var str1 = '一花一世界';// 字面量方式
var str2 = new String();//構造函數方式
// 3.Boolean類型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 構造函數方式
// 4.Array類型
var arr1 = [];
var arr2 = new Array();
// 5.Object類型
var obj1 = {};
var obj2 = new Object();
變量與對象
示例代碼:
/* 變量聲明並初始化值 */
var obj = 100;
/* 輸出調用 */
console.log(obj);// 調用結果爲 100
/* 變量從新賦值爲對象 */
obj = {
/* 對象的屬性 */
name : '一花一世界',
/* 對象的方法 */
soso : function () {
/* 方法體 */
console.log('一葉一孤城');
}
};
/* 輸出調用 */
console.log(obj);// 調用結果爲 { name: '一花一世界', soso: [Function: soso] }
變量,函數與對象
- 注意: 若是訪問一個對象不存在的屬性時 - 值爲 undefined
示例代碼:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一葉一孤城');
}
};
console.log(obj.soso);// 調用結果爲 undefined
-
建立一個對象 - 具備name和age屬性與sayMe()方法
- 對象的屬性 - 相似於變量
- 對象的屬性 - 相似於變量
- 其實定義的變量就是某個對象的屬性,定義的函數就是某個對象的方法
-
JavaScript找那個具備一個全局對象(Global) - 僅存在與概念
- 瀏覽器運行環境 - BOM中Window(窗口)對象
- Node.js運行環境
示例代碼:
var obj1 = {
name : '一花一世界',
age : '有點飄',
sayMe : function () {
console.log('一葉一孤城');
}
};
console.log(Object);// 調用結果爲 [Function: Object]
console.log(Global);// 調用結果爲報錯 - ReferenceError: Global is not defined
控制檯調用圖:
調用對象的屬性方式
對象名.屬性名 - 名稱簡單的調用方式
- 注意: 不適合用於複雜命名的屬性名稱
示例代碼:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一葉一孤城');
}
};
console.log(obj.neme);// 調用結果爲 一花一世界
控制檯調用圖:
對象名稱[屬性名] - 通用的調用方式
- 適用於複雜命名的屬性名稱
- 特色: 該種方式比較通用
示例代碼:
var obj = {
neme : '一花一世界',
'Type-Content' : 'text/HTML',
sayMe : function () {
console.log('一葉一孤城');
}
};
console.log(obj.neme);// 調用結果爲 一花一世界
console.log(obj['Type-Content']);// 調用結果爲 text/HTML
控制檯調用圖:
修改對象的屬性
對象名.已存在的屬性名 = 屬性值
示例代碼:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
obj.name = '一葉一孤城';
console.log(obj);// 調用結果爲 { name: '一葉一孤城', sayMe: [Function: sayMe] }
對象名[已存在的屬性名] = 屬性值
示例代碼:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
obj['name']
console.log(obj);// 調用結果爲 { name: '一葉一孤城', sayMe: [Function: sayMe] }
刪除對象的屬性
delete 對象名.屬性名
示例代碼:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
delete obj.name;
console.log(obj.name);//調用結果爲 undefined
delete 對象名[屬性名]
示例代碼:
var obj = {
name : '一花一世界',
sayMe : function(){
console.log('一花一世界');
}
}
delete obj['name'];
console.log(obj.name);//調用結果爲 undefined
檢測對象的屬性
判斷對象的屬性值是否爲 undefined
示例代碼:
var obj = {
name : '張無忌',
age : 18
}
if (obj.age !== undefined) {
console.log('obj對象的age屬性存在...');
} else {
console.log('請先定義obj對象的age屬性...');
}
判斷對象的屬性值 - 先轉換爲Boolean類型
示例代碼:
var obj = {
name : '張無忌',
age : 18
}
if (obj.age) {
console.log('obj對象的age屬性存在...');
}
利用in關鍵字進行判斷
示例代碼:
var obj = {
name : '張無忌',
age : 18
}
if ('age' in obj) {
console.log('obj對象的age屬性存在...');
} else {
console.log('obj對象的age屬性不存在...')
}
Object類型提供了hasOwnProperty()方法
示例代碼:
var obj = {
name : '張無忌',
age : 18
}
if (obj.hasOwnProperty('age')) {
console.log('obj對象的age屬性存在...');
} else {
console.log('obj對象的age屬性不存在...')
}
遍歷對象的屬性
示例代碼:
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]);
}
}
調用對象的方法
- 對象名.方法名()
- 對象名[方法名]()
示例代碼:
var obj = {
name : '一花一世界',
age : 18,
sayMe : function(){
console.log('一花一世界');
}
}
// 1.對象名.方法名()
obj.sayMe();
// 2.對象名[方法名]()
obj['sayMe']();
新增對象的方法
- 注意: 和新增對象的屬性方法相似
示例代碼:
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.對象名.方法名 = function(){}
obj.sayMe = function(){
console.log('你是沙');
}
console.log(obj);
obj.sayMe();
// 2.對象名[方法名] = function(){}
刪除對象的方法
- 注意: 和刪除對象屬性的方法相似
示例代碼:
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 對象名[方法名]
相關文章
- 1. JavaScript面向對象中的嚴格模式我的分享
- 2. JavaScript面向對象中的Function類型我的分享
- 3. JavaScript面向對象中的繼承我的分享
- 4. JavaScript中的函數我的分享
- 5. JavaScript中的數組我的分享
- 6. JavaScript中的語句我的分享
- 7. JavaScript中的運算符我的分享
- 8. JavaScript面向對象中的RegExp類型(正則表達式)我的分享
- 9. JavaScript的我的分享
- 10. javascript中的對象
- 更多相關文章...
- • ASP ASPError 對象的屬性 - ASP 教程
- • Spring中Bean的作用域 - Spring教程
- • C# 中 foreach 遍歷的用法
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
