JavaScript...對(duì)象...

xuxueli 發(fā)布于2019-08-23 11:01 / 3208人閱讀

摘要：對(duì)象對(duì)象是什么中的對(duì)象和其他編程語(yǔ)言中的對(duì)象一樣可以比照現(xiàn)實(shí)上活中的對(duì)象來(lái)理解它中對(duì)象的概念可以比照現(xiàn)實(shí)生活中實(shí)實(shí)在在的物體來(lái)理解在中一個(gè)對(duì)象可以是一個(gè)多帶帶的擁有屬性和類(lèi)型的實(shí)體拿它和一個(gè)杯子做下類(lèi)比一個(gè)杯子是一個(gè)對(duì)象擁有屬性杯子有顏色圖案

對(duì)象

對(duì)象是什么

JavaScript中的對(duì)象和其他編程語(yǔ)言中的對(duì)象一樣可以比照現(xiàn)實(shí)上活中的對(duì)象來(lái)理解它
JavaScript中對(duì)象的概念可以比照現(xiàn)實(shí)生活中實(shí)實(shí)在在的物體來(lái)理解
在JavaScript中一個(gè)對(duì)象可以是一個(gè)多帶帶的擁有屬性和類(lèi)型的實(shí)體拿它和一個(gè)杯子做下類(lèi)比一個(gè)杯子是一個(gè)對(duì)象擁有屬性杯子有顏色圖案重量等等同樣JavaScript對(duì)象也有屬性來(lái)定義它的特征

對(duì)象的分類(lèi)

1.內(nèi)置對(duì)象/原生對(duì)象
就是JavaScript語(yǔ)言預(yù)定義的對(duì)象在ECMAScript標(biāo)準(zhǔn)定義由JavaScript解釋器/引擎提供具體實(shí)現(xiàn)
2.宿主對(duì)象
指的是JavaScript運(yùn)行環(huán)境提供的對(duì)象一般是由瀏覽器廠商提供實(shí)現(xiàn)(目前也有獨(dú)立的JavaScript解釋器/引擎提供實(shí)現(xiàn))主要分為BOM和DOM
3.自定義對(duì)象
就是由開(kāi)發(fā)人員自主創(chuàng)建的對(duì)象

Object對(duì)象

-Object對(duì)象是什么
Object類(lèi)型與Array Math等一樣都是JavaScript的引用類(lèi)型不過(guò)Object類(lèi)型是JavaScript中所有類(lèi)型的父級(jí)(所有類(lèi)型的對(duì)象都可以使用Object的屬性和方法)
JavaScript可以通過(guò)Object的構(gòu)造函數(shù)來(lái)創(chuàng)建自定義對(duì)象當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí) Object等同于new Object()0

創(chuàng)建對(duì)象

對(duì)象初始化器方式

使用對(duì)象初始化器也被稱作通過(guò)字面值創(chuàng)建對(duì)象

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

構(gòu)造函數(shù)方式

1.通過(guò)JavaScript提供的預(yù)定義類(lèi)型的構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象

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

2.通過(guò)JavaScript提供的Object類(lèi)型的構(gòu)造函數(shù)來(lái)創(chuàng)建自定義對(duì)象

var obj = new Object();//創(chuàng)建一個(gè)自定義對(duì)象

Object.create()方法

Object.create()方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象
var 對(duì)象名 = Object.create(null) - 創(chuàng)建一個(gè)空對(duì)象
var 對(duì)象名 = Object.create(obj)
obj - 表示另一個(gè)對(duì)象
特點(diǎn) - 當(dāng)前創(chuàng)建的新對(duì)象擁有與obj對(duì)象相同的屬性和方法

對(duì)象與變量

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

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

對(duì)象的復(fù)制

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

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

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

//循環(huán)遍歷對(duì)象 - for...in 語(yǔ)句
for(var attr in obj1){
    console.log(attr);
}

對(duì)象的屬性

調(diào)用對(duì)象的屬性

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

新增對(duì)象的屬性

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

/*
     空對(duì)象默認(rèn)沒(méi)有自身屬性和方法(父級(jí)Object)
*/
var obj1 = {};
console.log(obj1);

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

修改對(duì)象的屬性

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

刪除對(duì)象的屬性

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

檢測(cè)對(duì)象的屬性

可以使用下面四種方法檢測(cè)對(duì)象中是否存在指定屬性:

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

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

// 1.判斷對(duì)象的屬性值是否為 undefined
if (obj.age !== undefined) {
    console.log("obj對(duì)象的age屬性存在...");
} else {
    console.log("請(qǐng)先定義obj對(duì)象的age屬性...");
}

// 2.判斷對(duì)象的屬性值 - 先轉(zhuǎn)換為Boolean類(lèi)型
if (obj.age) {
    console.log("obj對(duì)象的age屬性存在...");
}

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

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

遍歷對(duì)象的屬性

JavaScript屬性提供了三種原生方法用于遍歷或枚舉對(duì)象的屬性:
1.for..in循環(huán):該方法依次訪問(wèn)一個(gè)對(duì)象及其原型鏈中所有可枚舉的屬性
2.Object.keys(object)方法:該方法返回一個(gè)對(duì)象 o 自身包含(不包括原型中)的所有屬性的名稱的數(shù)組
3.Object.getOwnPropertyNames(object)方法:該方法返回一個(gè)數(shù)組它包含了對(duì)象 o 所有擁有的屬性(無(wú)論是否可枚舉)的名稱

對(duì)象的方法

調(diào)用對(duì)象的方法

對(duì)象方法的調(diào)用類(lèi)似于對(duì)象屬性的調(diào)用

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

新增對(duì)象的用法

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

刪除對(duì)象的方法

var obj = {
    name : "xxx",
    age : 18,
    sayMe : function(){
        console.log("我是xxx");
    }
}
// delete 對(duì)象名.方法名
delete obj.sayMe;
// 訪問(wèn)對(duì)象中不存在的方法 -> 報(bào)錯(cuò)(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);

// 以屬性是否存在的方式進(jìn)行判斷
if ("sayMe" in obj) {
    // 確認(rèn)目前是一個(gè)方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法調(diào)用
    }
}
// 以上代碼可以優(yōu)化為以下代碼
if ("sayMe" in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法調(diào)用
}