JavaScript對象

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

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

對象

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

對象的分類

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

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

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

Object對象

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

創(chuàng)建對象

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

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

}

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

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

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

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

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

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

var obj={}

創(chuàng)建方式對比

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

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

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

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

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

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

新增對象的屬性

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

修改對象的屬性

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

刪除對象的屬性

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

檢測對象的屬性

1.判斷對象的屬性是否為undefined

if(obj.age!==undefined){
    console.log("obj對象的age屬性存在...");
}else{
    console.log("請定義obj對象的age屬性...");
}

2.判斷對象的屬性值，先轉(zhuǎn)換為Boolean類型

if(obj.age){
    console.log("obj對象的age屬性存在...");
}

3.利用in關(guān)鍵字進(jìn)行判斷

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屬性不存在...");
}

遍歷對象的屬性

1.for...in語句

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

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

//創(chuàng)建一個對象
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];
    //通過對象屬性或方法對應(yīng)的值的類型進(jìn)行區(qū)別
    if(obj[objAttr]) instanceof Function){
        //當(dāng)前是對象的方法
        obj[objAttr]();
    }else{
        //當(dāng)前是對象的屬性
        console.log(obj[objAttr]);
    }
}

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

//創(chuàng)建一個對象
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];
    //通過對象屬性或方法對應(yīng)的值的類型進(jìn)行區(qū)別
    if(obj[objAttr] instanceof Function){
        //當(dāng)前是對象的方法
        obj[objAttr]();
    }else{
        //當(dāng)前是對象的屬性
        console.log(obj[objAttr]);
    }
}

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

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

新增對象的方法

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

修改對象的方法

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

刪除對象的方法

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

//2.delete 對象名[方法名];
delete obj[sayMe];