JavaScript對(duì)象

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

摘要：對(duì)象的分類內(nèi)置對(duì)象原生對(duì)象就是語(yǔ)言預(yù)定義的對(duì)象，在標(biāo)準(zhǔn)定義，有解釋器引擎提供具體實(shí)現(xiàn)宿主對(duì)象指的是運(yùn)行環(huán)境提供的對(duì)象。不過(guò)類型是中所有類型的父級(jí)所有類型的對(duì)象都可以使用的屬性和方法，可以通過(guò)的構(gòu)造函數(shù)來(lái)創(chuàng)建自定義對(duì)象。

對(duì)象

javaScript中的對(duì)象，和其它編程語(yǔ)言中的對(duì)象一樣，可以比照現(xiàn)實(shí)生活中的對(duì)象來(lái)理解。在JavaScript中，一個(gè)對(duì)象可以是一個(gè)多帶帶擁有屬性和類型的實(shí)體。和杯子做一下比較，一個(gè)杯子是一個(gè)對(duì)象，擁有屬性，杯子有顏色、圖案、重量等。同樣，JavaScript也有屬性來(lái)定義它的特征。
方法是關(guān)聯(lián)到某個(gè)對(duì)象的函數(shù)，或者簡(jiǎn)單地說(shuō)，一個(gè)方法是一個(gè)值為某個(gè)函數(shù)的對(duì)象屬性，定義方法就像定義普通的函數(shù)，除了它們必須被賦給對(duì)象的某個(gè)屬性。

對(duì)象的分類

內(nèi)置對(duì)象/原生對(duì)象：就是JavaScript語(yǔ)言預(yù)定義的對(duì)象，在ECMAScript標(biāo)準(zhǔn)定義，有JavaScript解釋器/引擎提供具體實(shí)現(xiàn)

宿主對(duì)象：指的是javaScript運(yùn)行環(huán)境提供的對(duì)象。一般是由瀏覽器廠商提供實(shí)現(xiàn)(目前也有獨(dú)立的JavaScript解釋器/引擎提供實(shí)現(xiàn))，主要分為BOM和DOM

自定義對(duì)象：就是由開(kāi)發(fā)人員自主創(chuàng)建的對(duì)象

Object對(duì)象

Object類型與Array、Math等一樣都是JavaScript的引用類型。不過(guò)Object類型是JavaScript中所有類型的父級(jí)(所有類型的對(duì)象都可以使用Object的屬性和方法)，JavaScript可以通過(guò)Object的構(gòu)造函數(shù)來(lái)創(chuàng)建自定義對(duì)象。當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí)，Object等同于new Object()
Object對(duì)象的方法分為自有方法和原型方法兩種：
自有方法
create():指定原型對(duì)象和屬性來(lái)創(chuàng)建一個(gè)新的對(duì)象
getOwnOropertyNames():返回一個(gè)數(shù)組，它包含了指定對(duì)象所有的可枚舉或不可枚舉的屬性名
keys():返回一個(gè)數(shù)組，包含指定對(duì)象的所有自有可遍歷屬性的名稱
原型方法
prototype.hasOwnProperty():返回一個(gè)布爾值，該值指示對(duì)象是否包含指定的屬性

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

1.對(duì)象的初始化器創(chuàng)建方式
var 對(duì)象名={

屬性名:屬性值,
方法名:function(){
    方法體
}

}

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

2.對(duì)象的構(gòu)造函數(shù)方式
利用所有引用類型創(chuàng)建對(duì)應(yīng)的對(duì)象
利用Object作為構(gòu)造函數(shù)創(chuàng)建對(duì)象
var 對(duì)象名 = new Object();
var 對(duì)象名 = Object();

var obj = new Object();
var obj1 = Object();

3.利用Object.create()方法創(chuàng)建對(duì)象

//創(chuàng)建一個(gè)空對(duì)象：var 對(duì)象名 = Object.create(null)
var obj=Object.create(null);
/*當(dāng)前創(chuàng)建的新對(duì)象擁有與obj對(duì)象相同的屬性和方法：
  var 對(duì)象名 = Object.create(obj);
  obj表示另一個(gè)對(duì)象*/
var obj1=Object.create(obj2);

4.創(chuàng)建空對(duì)象

var obj={}

創(chuàng)建方式對(duì)比

Number、String和Boolean
字面量方式創(chuàng)建的是原始類型，構(gòu)造函數(shù)方式創(chuàng)建是引用類型
Array和Object
無(wú)論是字面量方式還是構(gòu)造函數(shù)方式創(chuàng)建的都是引用類型

變量、函數(shù)與對(duì)象

其實(shí)定義的變量就是某個(gè)對(duì)象的屬性，定義的函數(shù)就是某個(gè)對(duì)象的方法
JavaScript中具有一個(gè)全局對(duì)象(Global)，僅存在于概念
1.瀏覽器運(yùn)行環(huán)境，BOM中Window(窗口)對(duì)象
2.Node.js運(yùn)行環(huán)境

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

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

//1.對(duì)象名.屬性名：不適用于復(fù)雜命名的屬性名稱
console.log(obj.name);
//2.對(duì)象名[屬性名]：通用的調(diào)用方式，與數(shù)組類似，適用于復(fù)雜命名的屬性名稱
console.log(obj["name"]);
//訪問(wèn)一個(gè)對(duì)象不存在的屬性，返回undefined
console.log(obj.age);//返回undefined

新增對(duì)象的屬性

//1.對(duì)象名.新的屬性名=屬性值
obj.age=18;
//2.對(duì)象名[新的屬性名]=屬性值
obj["name"]="張三";

修改對(duì)象的屬性

//1.對(duì)象名.已存在的屬性名=屬性值
obj.age=20;
2.對(duì)象名[已存在的屬性名]=屬性值
obj["name"]="李四";

刪除對(duì)象的屬性

1.delete 對(duì)象名.屬性名
delete obj.age;
2.delete 對(duì)象名[屬性名]
delete obj["name"];

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

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類型

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類型提供了hasOwnProperty()方法

if(obj.hasOwnProperty("age")){
    console.log("Obj對(duì)象的age屬性存在...");
}else{
    console.log("obj對(duì)象的age屬性不存在...");
}

遍歷對(duì)象的屬性

1.for...in語(yǔ)句

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//for...in語(yǔ)句
for(var objAttr in obj){
    //通過(guò)對(duì)象屬性或方法對(duì)應(yīng)的值的類型進(jìn)行區(qū)別
    if(obj[objAttr] instanceof Function){
        //當(dāng)前是對(duì)象的方法
        obj[objAttr]();
    }else{
        //當(dāng)前是對(duì)象的屬性
        console.log(obj[objAttr]);
    }
}

2.Object類型提供了keys()方法，只能遍歷可枚舉的屬性

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//Object類型提供了keys()方法
var arr=Object.keys(obj);
for(var v in arr){
    var objAttr=arr[v];
    //通過(guò)對(duì)象屬性或方法對(duì)應(yīng)的值的類型進(jìn)行區(qū)別
    if(obj[objAttr]) instanceof Function){
        //當(dāng)前是對(duì)象的方法
        obj[objAttr]();
    }else{
        //當(dāng)前是對(duì)象的屬性
        console.log(obj[objAttr]);
    }
}

3.Object類型提供了getOwnPropertyNames()方法，包括不可枚舉的屬性

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
} 
//Object類型提供了getOwnPropertyNames()方法
var arr=Object.getOwnPropertyNames(obj);
for(var v in arr){
    var objAttr=arr[v];
    //通過(guò)對(duì)象屬性或方法對(duì)應(yīng)的值的類型進(jìn)行區(qū)別
    if(obj[objAttr] instanceof Function){
        //當(dāng)前是對(duì)象的方法
        obj[objAttr]();
    }else{
        //當(dāng)前是對(duì)象的屬性
        console.log(obj[objAttr]);
    }
}

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

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.對(duì)象名.方法名()
obj.sayMe();
//2.對(duì)象名[方法名]()
obj["sayMe"]();

新增對(duì)象的方法

//創(chuàng)建一個(gè)新的對(duì)象
var obj={
    name:"李四",
    age:20,
    sayMe:function(){
        console.log("我是李四");
    }
}
//1.對(duì)象名.新的方法名=function(){}
obj.sayYou=function(){
    console.log("你是張三");
}
//2.對(duì)象名[新的方法名]=function(){}
obj[sayHe]=function(){
    console.log("他是大王");
}

修改對(duì)象的方法

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.對(duì)象名.方法名=function(){}
obj.sayMe=function(){
    console.log("你是李四");
}
//2.對(duì)象名[方法名]=function(){}
obj[sayMe]=function(){
    console.log("你是李四");
}

刪除對(duì)象的方法

//創(chuàng)建一個(gè)對(duì)象
var obj={
    name:"張三",
    age:20,
    sayMe:function(){
        console.log("我是張三");
    }
}
//1.delete 對(duì)象名.方法名
delete obj.sayMe;
//訪問(wèn)對(duì)象中不存在的方法，報(bào)錯(cuò)(TypeError: obj.sayMe is not a function)

//2.delete 對(duì)象名[方法名];
delete obj[sayMe];