JavaScript中的對象個人分享

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

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

對象 對象的概念

所謂對象就是是一個擁有屬性和方法的集合體

對象的分類

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

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

宿主對象:

就是寄生在一個東西上的對象比如瀏覽器提供的對象

比如：DOM、BOM

自定義對象

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

Object對象是什么

object類型是所有JavaScript類型的父級

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

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

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

示例代碼:

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

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

利用所有引用類型常見對應的對象 - 就是具有具體的類型

var num = new Number();// Number類型

var str = new String();// String類型

var boo = new Boolean();// Boolean類型

利用Object作為構(gòu)造函數(shù)創(chuàng)建對象

var 對象名 = new Object();

var 對象名 = 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)建對象

var 對象名 = Object.create(null) - 就是創(chuàng)建一個空對象

var 對象名 = Object.create(obj)

obj - 表示另一個對象

特點 - 當前創(chuàng)建的新對象擁有與obj對象相同的屬性和方法

示例代碼:

var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

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

創(chuàng)建空對象

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

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)建方式的對比

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();

變量與對象

示例代碼:

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

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

注意: 如果訪問一個對象不存在的屬性時 - 值為 undefined

示例代碼:

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

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

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

對象的屬性 - 類似于變量

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

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

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

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

示例代碼:

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

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

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

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

示例代碼:

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

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

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

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

適用于復雜命名的屬性名稱

特點: 該種方式比較通用

示例代碼:

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

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

修改對象的屬性 對象名.已存在的屬性名 = 屬性值

示例代碼:

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

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

對象名[已存在的屬性名] = 屬性值

示例代碼:

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

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

刪除對象的屬性 delete 對象名.屬性名

示例代碼:

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

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

delete 對象名[屬性名]

示例代碼:

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

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

檢測對象的屬性 判斷對象的屬性值是否為 undefined

示例代碼:

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

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

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

示例代碼:

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

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

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

示例代碼:

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

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

Object類型提供了hasOwnProperty()方法

示例代碼:

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

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

遍歷對象的屬性

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一花一世界");
    }
}
// 1.for...in語句
for (var objAttr in obj) {
    // 通過對象屬性或方法對應的值的類型進行區(qū)別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

// 2.Object類型提供了keys()方法 - 只能遍歷可枚舉的屬性
var arr = Object.keys(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對象屬性或方法對應的值的類型進行區(qū)別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

// 3.Object類型提供了getOwnPropertyNames()方法 - 包括不可枚舉的屬性
var arr = Object.getOwnPropertyNames(obj);
for (var v in arr) {
    var objAttr = arr[v];
    // 通過對象屬性或方法對應的值的類型進行區(qū)別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

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

對象名.方法名()

對象名[方法名]()

示例代碼:

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

新增對象的方法

注意: 和新增對象的屬性方法類似

示例代碼:

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

修改對象的方法

注意: 和修改對象屬性的方法類似

示例代碼:

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

刪除對象的方法

注意: 和刪除對象屬性的方法類似

示例代碼:

var obj = {
    name : "一花一世界",
    age : 18,
    sayMe : function(){
        console.log("一笑一人生");
    }
}
// 1.delete 對象名.方法名
delete obj.sayMe;
// 訪問對象中不存在的方法 -> 報錯(TypeError: obj.sayMe is not a function)
// obj.sayMe();
console.log(obj.sayMe);// undefined
console.log(obj);

// 以屬性是否存在的方式進行判斷
if ("sayMe" in obj) {
    // 確認目前是一個方法
    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 對象名[方法名]