JavaScript中的對(duì)象個(gè)人分享

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

摘要：對(duì)象對(duì)象的概念所謂對(duì)象就是是一個(gè)擁有屬性和方法的集合體對(duì)象的分類內(nèi)置對(duì)象原生對(duì)象引用類型可以稱作為內(nèi)置對(duì)象宿主對(duì)象就是寄生在一個(gè)東西上的對(duì)象比如瀏覽器提供的對(duì)象比如自定義對(duì)象開發(fā)人員創(chuàng)建的對(duì)象對(duì)象是什么類型是所有類型的父級(jí)創(chuàng)建對(duì)象對(duì)象的初始

對(duì)象 對(duì)象的概念

所謂對(duì)象就是是一個(gè)擁有屬性和方法的集合體

對(duì)象的分類

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

引用類型可以稱作為內(nèi)置對(duì)象

宿主對(duì)象:

就是寄生在一個(gè)東西上的對(duì)象比如瀏覽器提供的對(duì)象

比如：DOM、BOM

自定義對(duì)象

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

Object對(duì)象是什么

object類型是所有JavaScript類型的父級(jí)

創(chuàng)建對(duì)象 對(duì)象的初始化器創(chuàng)建方式

var 對(duì)象名 = {
屬性名 : 屬性值,
方法名 : function(){
方法體
}
}

注意: 如果存在多個(gè)屬性名的話中間用 " , "隔開

示例代碼:

var obj1 = {
    name : "一花一世界",
    name1 : "一葉一孤城",
    soso : function () {
        console.log("你是哈士奇")
    }
};

對(duì)象的構(gòu)造函數(shù)方式

利用所有引用類型常見對(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();// Number類型
var num2 = Number();
var str = new String();// String類型
var boo = new Boolean();// Boolean類型

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

console.log(obj2);// {}// 調(diào)用結(jié)果為 { }
console.log(obj3);// {}// 調(diào)用結(jié)果為 { }

var obj4 = new Object(undefined);
var obj5 = new Object(null);

console.log(obj4);// 調(diào)用結(jié)果為 { }
console.log(obj5);// 調(diào)用結(jié)果為 { }

利用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 obj6 = Object.create(null);
var obj7 = Object.create(obj1);

console.log(obj6);// 調(diào)用結(jié)果為 { }
console.log(obj7);// 調(diào)用結(jié)果為 { }

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

創(chuàng)建空對(duì)象的方式目前有以下幾種

var obj1 = {};

var obj2 = new Object();

var obj3 = Object();

var obj4 = new Object(undefined);

var obj5 = new Object(null);

var obj6 = Object(undefined);

var obj7 = Object(null);

var obj8 = Object.create(null);

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

Number,String和Boolean

字面量方式創(chuàng)建的是原始類型,構(gòu)造函數(shù)方式創(chuàng)建是引用類型

Array和Object

無論是字面量方式還是構(gòu)造函數(shù)方式創(chuàng)建的都是引用類型

示例代碼:

// 1. Number類型
var num1 = 100;// 字面量方式
var num2 = new Number();// 構(gòu)造函數(shù)方式

// 2. String類型
var str1 = "一花一世界";// 字面量方式
var str2 = new String();//構(gòu)造函數(shù)方式

// 3.Boolean類型
var boo1 = true;// 字面量方式
var boo2 = new Boolean();// 構(gòu)造函數(shù)方式

// 4.Array類型
var arr1 = [];
var arr2 = new Array();

// 5.Object類型
var obj1 = {};
var obj2 = new Object();

變量與對(duì)象

示例代碼:

/* 變量聲明并初始化值 */
var obj = 100;
/* 輸出調(diào)用 */
console.log(obj);// 調(diào)用結(jié)果為 100
/* 變量重新賦值為對(duì)象 */
obj = {
    /* 對(duì)象的屬性 */
    name : "一花一世界",
    /* 對(duì)象的方法 */
    soso : function () {
        /* 方法體 */
        console.log("一葉一孤城");
    }
};
/* 輸出調(diào)用 */
console.log(obj);// 調(diào)用結(jié)果為 { name: "一花一世界", soso: [Function: soso] }

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

注意: 如果訪問一個(gè)對(duì)象不存在的屬性時(shí) - 值為 undefined

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.soso);// 調(diào)用結(jié)果為 undefined

創(chuàng)建一個(gè)對(duì)象 - 具有name和age屬性與sayMe()方法

對(duì)象的屬性 - 類似于變量

其實(shí)定義的變量就是某個(gè)對(duì)象的屬性,定義的函數(shù)就是某個(gè)對(duì)象的方法

JavaScript找那個(gè)具有一個(gè)全局對(duì)象(Global) - 僅存在與概念

瀏覽器運(yùn)行環(huán)境 - BOM中Window(窗口)對(duì)象

Node.js運(yùn)行環(huán)境

示例代碼:

var obj1 = {
    name : "一花一世界",
    age : "有點(diǎn)飄",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};
console.log(Object);// 調(diào)用結(jié)果為 [Function: Object]
console.log(Global);// 調(diào)用結(jié)果為報(bào)錯(cuò) - ReferenceError: Global is not defined

控制臺(tái)調(diào)用圖:

調(diào)用對(duì)象的屬性方式 對(duì)象名.屬性名 - 名稱簡單的調(diào)用方式

注意: 不適合用于復(fù)雜命名的屬性名稱

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.neme);// 調(diào)用結(jié)果為 一花一世界

控制臺(tái)調(diào)用圖:

對(duì)象名稱[屬性名] - 通用的調(diào)用方式

適用于復(fù)雜命名的屬性名稱

特點(diǎn): 該種方式比較通用

示例代碼:

var obj = {
    neme : "一花一世界",
    "Type-Content" : "text/HTML",
    sayMe : function () {
        console.log("一葉一孤城");
    }
};

console.log(obj.neme);// 調(diào)用結(jié)果為 一花一世界
console.log(obj["Type-Content"]);// 調(diào)用結(jié)果為 text/HTML

控制臺(tái)調(diào)用圖:

修改對(duì)象的屬性 對(duì)象名.已存在的屬性名 = 屬性值

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj.name = "一葉一孤城";
console.log(obj);// 調(diào)用結(jié)果為 { name: "一葉一孤城", sayMe: [Function: sayMe] }

對(duì)象名[已存在的屬性名] = 屬性值

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

obj["name"]
console.log(obj);// 調(diào)用結(jié)果為 { name: "一葉一孤城", sayMe: [Function: sayMe] }

刪除對(duì)象的屬性 delete 對(duì)象名.屬性名

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj.name;
console.log(obj.name);//調(diào)用結(jié)果為 undefined

delete 對(duì)象名[屬性名]

示例代碼:

var obj = {
    name : "一花一世界",
    sayMe : function(){
        console.log("一花一世界");
    }
}

delete obj["name"];
console.log(obj.name);//調(diào)用結(jié)果為 undefined

檢測(cè)對(duì)象的屬性 判斷對(duì)象的屬性值是否為 undefined

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

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

判斷對(duì)象的屬性值 - 先轉(zhuǎn)換為Boolean類型

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

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

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

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

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

Object類型提供了hasOwnProperty()方法

示例代碼:

var obj = {
    name : "張無忌",
    age : 18
}

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

遍歷對(duì)象的屬性

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : 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]);
    }
}

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

對(duì)象名.方法名()

對(duì)象名[方法名]()

示例代碼:

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

新增對(duì)象的方法

注意: 和新增對(duì)象的屬性方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是風(fēng)兒");
    }
}
// 1.對(duì)象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是沙");
}
console.log(obj);
// 2.對(duì)象名[新的方法名] = function(){}

修改對(duì)象的方法

注意: 和修改對(duì)象屬性的方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("我是風(fēng)兒");
    }
}
// 1.對(duì)象名.方法名 = function(){}
obj.sayMe = function(){
    console.log("你是沙");
}
console.log(obj);
obj.sayMe();
// 2.對(duì)象名[方法名] = function(){}

刪除對(duì)象的方法

注意: 和刪除對(duì)象屬性的方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一笑一人生");
    }
}
// 1.delete 對(duì)象名.方法名
delete obj.sayMe;
// 訪問對(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)用
}

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