JavaScript-對(duì)象

xeblog 發(fā)布于2019-08-26 12:10 / 553人閱讀

摘要：對(duì)象是什么在中，一個(gè)對(duì)象就像一個(gè)多帶帶擁有屬性和類型的實(shí)體。一個(gè)杯子作為一個(gè)對(duì)象，杯子有顏色重量等屬性。同樣，對(duì)象也有屬性定義它的特征。方法是關(guān)聯(lián)到某個(gè)對(duì)象的函數(shù)，或者說，一個(gè)方法是一個(gè)值為某個(gè)函數(shù)的對(duì)象屬性。

對(duì)象是什么

在JavaScript中，一個(gè)對(duì)象就像一個(gè)多帶帶擁有屬性和類型的實(shí)體。一個(gè)杯子作為一個(gè)對(duì)象，杯子有顏色、重量等屬性。同樣，JavaScript對(duì)象也有屬性定義它的特征。
方法是關(guān)聯(lián)到某個(gè)對(duì)象的函數(shù)，或者說，一個(gè)方法是一個(gè)值為某個(gè)函數(shù)的對(duì)象屬性。
對(duì)象可以分為以下幾類

內(nèi)置對(duì)象/原生對(duì)象

就是JavaScript語言預(yù)定義的對(duì)象

宿主對(duì)象

是JavaScript運(yùn)行環(huán)境提供的對(duì)象

自定義對(duì)象

就是開發(fā)人員自主創(chuàng)建的對(duì)象

Object對(duì)象

Object類型是引用類型。但Object類型是所有JavaScript中所有類型的父級(jí)（所有類型的對(duì)象都可以是Object的屬性和方法）

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

/*
* 1. 對(duì)象的初始化器創(chuàng)建方式
*     var 對(duì)象名=｛
*      屬性名 : 屬性值
*      方法名 : function{
*         方法體
*      ｝
*    ｝
*/
var obj = {
    name : "九筒",
    age : 2,
    sayYou : function () {
        console.log("火鍋")
    }
};

/* 2. 對(duì)象的構(gòu)造函數(shù)方式
*      * 利用所有的引用類型創(chuàng)建對(duì)應(yīng)的對(duì)象->具有具體的類型
*        var num = new Number;//number類型
*        var str = new String;//string類型
*        var boo = new Boolean;//boolean類型
*      * 利用Object作為構(gòu)造函數(shù)創(chuàng)建對(duì)象
*        var 對(duì)象名 = new Object();
*        var 對(duì)象名 = Object();
*/
var num = new Number();
var str = new Storage();
var boo = new Boolean();

var obj2 = new Object();
var obj3 = Object();

/*   利用Object.create創(chuàng)建對(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ì)象相同的屬性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);

對(duì)象的屬性 定義對(duì)象的屬性

對(duì)象的屬性就像是附加到對(duì)象上的變量

/*對(duì)象介意定義多個(gè)屬性
*  屬性之間使用逗號(hào)分開*/
var obj = {
    name : "吳凡",
    age : 23,
    book : function () {
        console.log("暗毀")
    }
};

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

/*  調(diào)用對(duì)象的屬性
*     對(duì)象名.屬性名
*     不適用于復(fù)雜命名的屬性名稱*/
console.log(obj.name);

/*   對(duì)象名[屬性名]-通用方式
     適用于復(fù)雜命名的屬性名稱
*     */
console.log(obj["name"]);//屬性名是字符串形式

新增、刪除、修改對(duì)象的屬性

var obj = {
    name : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}
   /* 新增對(duì)象的屬性
   *    1對(duì)象名.新的屬性名 = 屬性值
   *    2對(duì)象名[新的屬性名] = 屬性值*/
obj.col="白色";
console.log(obj.col);//白色

   /*刪除對(duì)象的屬性
   * delete 對(duì)象名.屬性名
   * delete 對(duì)象名[屬性名]*/
delete obj.col
console.log(obj.col);//undefined

  /*修改對(duì)象的屬性
  * 對(duì)象名.已存在的屬性名 = 屬性值
  * 對(duì)象名[已存在的屬性名] = 屬性值*/
obj.name = "九筒";
console.log(obj.name);//九筒

檢測對(duì)象的屬性

var obj = {
    name : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
};
console.log(obj.name)

/*   1. 判斷對(duì)象的屬性值是否為undefined*/
if (obj.name !==undefined){
    console.log("obj對(duì)象name屬性存在")
}else{
    console.log("obj對(duì)象name屬性不存在")
}

/*   2. 判斷對(duì)象的屬性值，先轉(zhuǎn)換為boolean類型*/
if (obj.name){
    console.log("obj對(duì)象name屬性存在")
}

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

/*   4. Object類型提供了hasOwnProperty()方法*/
if (obj.hasOwnProperty("name")){
    console.log("obj對(duì)象name屬性存在")
}else{
    console.log("obj對(duì)象name屬性不存在")
}

便利屬性

var obj = {
    name : "小薄荷",
    age : "0.3",
    variety : function () {
        console.log("薩摩耶")
    }
};
// 1.for...in語句
for (var objAttr in obj) {
    // 通過對(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()方法 - 只能遍歷可枚舉的屬性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對(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()方法 - 包括不可枚舉的屬性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對(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]);
    }
}

對(duì)象的方法 調(diào)用、新增、修改、刪除對(duì)象的方法

調(diào)用、新增、修改、刪除對(duì)象的方法和屬性基本一樣

var obj = {
    name : "火鍋",
    variety : "比熊",
    age : function () {
        console.log("3")
    }
}

/*調(diào)用對(duì)象的方法*/
// 1.對(duì)象名.方法名()
obj.sayMe();
// 2.對(duì)象名[方法名]()
obj["sayMe"]();

/*新增對(duì)象的方法*/
// 1.對(duì)象名.新的方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
console.log(obj);
// 2.對(duì)象名[新的方法名] = function(){}

/*修改對(duì)象的方法*/
// 1.對(duì)象名.方法名 = function(){}
obj.name = function(){
    console.log("九筒");
}
// 2.對(duì)象名[方法名] = function(){}

/*刪除對(duì)象的方法*/
//1.delete 對(duì)象名.方法名
delete obj.sayMe;
// 訪問對(duì)象中不存在的方法 -> 報(bào)錯(cuò)(TypeError: obj.sayMe is not a function)
// obj.sayMe();
// 2.delete 對(duì)象名[方法名]