JavaScript...對象...

對象

• 對象是什麼

JavaScript中的對象 和其餘編程語言中的對象同樣 能夠比照現實上活中的對象來理解它
JavaScript中對象的概念能夠比照現實生活中實實在在的物體來理解
在JavaScript中 一個對象能夠是一個單獨的擁有屬性和類型的實體 拿它和一個杯子作下類比 一個杯子是一個對象 擁有屬性 杯子有顏色 圖案 重量等等 一樣JavaScript對象也有屬性來定義它的特徵

對象的分類

1.內置對象/原生對象
就是JavaScript語言預約義的對象 在ECMAScript標準定義 由JavaScript解釋器/引擎提供具體實現
2.宿主對象
指的是JavaScript運行環境提供的對象 通常是由瀏覽器廠商提供實現(目前也有獨立的JavaScript解釋器/引擎提供實現)主要分爲BOM和DOM
3.自定義對象
就是由開發人員自主建立的對象

Object對象

-Object對象是什麼
Object類型與Array Math等同樣都是JavaScript的引用類型 不過Object類型是JavaScript中全部類型的父級(全部類型的對象均可以使用Object的屬性和方法)
JavaScript能夠經過Object的構造函數來建立自定義對象 當以非構造函數形式被調用時 Object等同於new Object()0

建立對象

• 對象初始化器方式

使用對象初始化器也被稱做經過字面值建立對象

/*
    1. 對象的初始化器建立方式
      var 對象名 = {
         屬性名: 屬性值,
         方法名: function(){
             方法體
         }
     }
*/
var boj1 = {
    name : 'xxx',
    age : 38 ,
    sayMe : function () {
        console.log('我是xxx')
    }
}

• 構造函數方式

1.經過JavaScript提供的預約義類型的構造函數來建立對象

var num = new Number();//Number類型
var str = new String();//String類型
var boo = new Boolean();//Boolean類型

2.經過JavaScript提供的Object類型的構造函數來建立自定義對象

var obj = new Object();//建立一個自定義對象

• Object.create()方法

Object.create()方法建立一個擁有指定原型和若干個指定屬性的對象
var 對象名 = Object.create(null) - 建立一個空對象
var 對象名 = Object.create(obj)
obj - 表示另外一個對象
特色 - 當前建立的新對象擁有與obj對象相同的屬性和方法

• 對象與變量

var obj = 100;
console.log(obj);//100

obj = {
    name : 'xxx',
    sayMe : function () {
        console.log('這是xxx');
    }
};
//{ name: 'xxx', sayMe: [Function: sayMe] }
console.log(obj);

• 對象的複製

var obj1 = {
    name : 'xxx',
    sayMe : function () {
        console.log('這是xxx')
    }
}
console.log(obj1);

var obj2 = obj1;
console.log(obj2);

//修改obj1對象的name屬性
obj1.name = 'yyy';
console.log(obj1);
console.log(obj2);

//循環遍歷對象 - for...in 語句
for(var attr in obj1){
    console.log(attr);
}

對象的屬性

• 調用對象的屬性

var obj={
    name:'xxx',
    age:18,
    sayMe:function(){
        console.log('我是xxx');
    }
}

• 新增對象的屬性

var obj = {
    name : 'xxx',
    sayMe : function () {
        console.log('我是xxx');
    }
}
/*
     1.對象名 .新的屬性名 = 屬性值
     2.對象名[新的屬性名] = 屬性值
*/
obj.age = 18;
console.log(obj);

/*
     空對象默認沒有自身屬性和方法(父級Object)
*/
var obj1 = {};
console.log(obj1);

obj1.name = 'yyy';
console.log(obj1);

• 修改對象的屬性

var obj = {
    name : 'xxx',
    sayMe : function(){
        console.log('我是xxx');
    }
}
/*
    1.對象名.已存在的屬性名 = 屬性值
    2.對象名[已存在的屬性名] = 屬性值
 */
obj.name = 'yyy';
console.log(obj);

• 刪除對象的屬性

var obj = {
    name : 'xxx',
    sayMe : function(){
        console.log('我是xxx');
    }
}
/*
    1.delete 對象名.屬性名
    2.delete 對象名[屬性名]
 */
delete obj.name;
console.log(obj.name);// undefined

• 檢測對象的屬性

可使用下面四種方法檢測對象中是否存在指定屬性:

var obj = {
    name : 'xxx',
    age : 18
}

console.log(obj.age);// undefined

// 1.判斷對象的屬性值是否爲 undefined
if (obj.age !== undefined) {
    console.log('obj對象的age屬性存在...');
} else {
    console.log('請先定義obj對象的age屬性...');
}

// 2.判斷對象的屬性值 - 先轉換爲Boolean類型
if (obj.age) {
    console.log('obj對象的age屬性存在...');
}

// 3.利用in關鍵字進行判斷
if ('age' in obj) {
    console.log('obj對象的age屬性存在...');
} else {
    console.log('obj對象的age屬性不存在...')
}

// 4.Object類型提供了hasOwnProperty()方法
if (obj.hasOwnProperty('age')) {
    console.log('obj對象的age屬性存在...');
} else {
    console.log('obj對象的age屬性不存在...')
}

• 遍歷對象的屬性

JavaScript屬性提供了三種原生方法用於遍歷或枚舉對象的屬性:
1.for..in循環:該方法依次訪問一個對象及其原型鏈中全部可枚舉的屬性
2.Object.keys(object)方法:該方法返回一個對象 o 自身包含(不包括原型中)的全部屬性的名稱的數組
3.Object.getOwnPropertyNames(object)方法:該方法返回一個數組 它包含了對象 o 全部擁有的屬性(不管是否可枚舉)的名稱

對象的方法

• 調用對象的方法

對象方法的調用相似於對象屬性的調用

var obj = {
    name : 'xxx',
    age : 18,
    sayMe : function(){
        console.log('我是xxx');
    }
}
// 1.對象名.方法名()
obj.sayMe();
// 2.對象名[方法名]()
obj['sayMe']();

• 新增對象的用法

var obj = {
    name : 'xxx',
    age : 18,
    sayMe : function(){
        console.log('我是xxx');
    }
}
// 對象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log('你是yyy');
}
console.log(obj);

• 刪除對象的方法

var obj = {
    name : 'xxx',
    age : 18,
    sayMe : function(){
        console.log('我是xxx');
    }
}
// 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();// 方法調用
}