JavaScript學(xué)習(xí)第六天筆記（對(duì)象）

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

摘要：宿主對(duì)象指的是運(yùn)行環(huán)境提供的對(duì)象。不過(guò)類(lèi)型是中所有類(lèi)型的父級(jí)所有類(lèi)型的對(duì)象都可以使用的屬性和方法可以通過(guò)的構(gòu)造函數(shù)來(lái)創(chuàng)建自定義對(duì)象。當(dāng)以非構(gòu)造函數(shù)形式被調(diào)用時(shí)，等同于。對(duì)象初始化器方式使用對(duì)象初始化器也被稱作通過(guò)字面值創(chuàng)建對(duì)象。

對(duì)象 概述

在JavaScript中的對(duì)象，和其他編程語(yǔ)言中的對(duì)象一樣，可以比照現(xiàn)實(shí)生活中的對(duì)象來(lái)理解它。

對(duì)象的分類(lèi)

1.內(nèi)置對(duì)象/原生對(duì)象
就是JavaScript運(yùn)行環(huán)境提供的對(duì)象。在ECMAScript標(biāo)準(zhǔn)定義，由JavaScript解釋器/引擎提供具體實(shí)現(xiàn)。
2.宿主對(duì)象
指的是JavaScript運(yùn)行環(huán)境提供的對(duì)象。一般是由瀏覽器廠商提供實(shí)現(xiàn)的（目前也有獨(dú)立的JavaScript解釋器/引擎提供實(shí)現(xiàn)），主要分為BOM和DOM。
3.自定義對(duì)象
就是由開(kāi)發(fā)人員自主創(chuàng)建的對(duì)象。

Object對(duì)象 概述

Object類(lèi)型與Array、Math等一樣都是JavaScript的引用類(lèi)型。不過(guò)Object類(lèi)型是JavaScript中所有類(lèi)型的父級(jí)（所有類(lèi)型的對(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ì)象的方法

Object對(duì)象的方法分為自有方法和原型方法兩種：
1.自由方法
a.creat（）值原定對(duì)象和屬性來(lái)創(chuàng)建一個(gè)新的對(duì)象
b.getOwnPropetyNames（）返回一個(gè)數(shù)組，它包含了指定對(duì)象所有的可枚舉或不可枚舉的屬性名。
c.keys（）返回一個(gè)數(shù)組，包含指定對(duì)象的所有自由可遍歷屬性的名稱。
2.原型方法
prototype.hasOwnProperty() 返回一個(gè)布爾值，該值指示對(duì)象是否包含制定的屬性。

對(duì)象初始化器方式

使用對(duì)象初始化器也被稱作通過(guò)字面值創(chuàng)建對(duì)象。通過(guò)對(duì)象初始化器創(chuàng)建對(duì)象的語(yǔ)法如下：

  var 函數(shù)名 ={
  屬性名：屬性值，
  方法名：function（）{
    }
  }

示例代碼如下：

var obj1 = {
    name:"EVA",
    age:14,
    sayMe:function(){
           console .log("EVA001");
           }
        }

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

利用Object作為構(gòu)造函數(shù)創(chuàng)建對(duì)象
var 對(duì)象名 = new Object();
var 對(duì)象名 = Object();

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

console.log(obj2);// {}
console.log(obj3);// {}

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

console.log(obj4);
console.log(obj5);

利用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);
console.log(obj7);

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

1.var obj1 = {};
2.var obj2 = new Object();
3.var obj3 = Object();
4.var obj4 = new Object(undefined);
5.var obj5 = new Object(null);
6.var obj6 = Object(undefined);
7.var obj7 = Object(null);
8.var obj8 = Object.create(null);

對(duì)象的復(fù)制

var obj1 = {
    name : "123",
    sayMe : function(){
        console.log("THIS IS 123");
    }
}
console.log(obj1);

var obj2 = obj1;
console.log(obj2);

// 修改obj1對(duì)象的name屬性值
obj1.name = "456";
console.log(obj1);
console.log(obj2);

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

var obj = {
name:"Chambers",
"Type-Content":"text/html",
sayMe : function(){
         console .log("Gemini");
         }
}

1.對(duì)象名.屬性名（不適用于復(fù)雜命名的屬性）
console .log(obj.name);//輸出結(jié)果：Chambers
2.對(duì)象名[屬性名]-通用的調(diào)用方式，適用于復(fù)雜命名的屬性名稱
console .log(obj["name"]);//輸出結(jié)果：Chambers
注意：當(dāng)訪問(wèn)一個(gè)對(duì)象不存在的屬性的值為undefined

新增對(duì)象的屬性

var obj = {
    name : "張無(wú)忌",
    sayMe : function(){
        console.log("我是張無(wú)忌");
    }
}
/*
    1.對(duì)象名.新的屬性名 = 屬性值
    2.對(duì)象名[新的屬性名] = 屬性值
 */
obj.age = 18;
console.log(obj);

空對(duì)象默認(rèn)沒(méi)有自身的屬性和方法（有父級(jí)Object的）

var obj1 = {};
console .log(obj1);
obj1.name = "EVA";
console .log(obj1);

修改對(duì)象的屬性

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

var obj {
name ："GEMINI";
sayMe : function(){
  console .log("this is eva");
  }
}
obj.name = "eva";
console .log(obj);

刪除對(duì)象的屬性

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

var obj ={
name:"EVA",
sayMe:function(){
console .log("this is eva");
   }
}
delete obj.name；
console .log(obj.name);//undefined

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

var obj = {
    name : "張無(wú)忌",
    age : 18
}

console.log(obj.age);// undefined

// 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類(lèi)型
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類(lèi)型提供了hasOwnProperty()方法
if (obj.hasOwnProperty("age")) {
    console.log("obj對(duì)象的age屬性存在...");
} else {
    console.log("obj對(duì)象的age屬性不存在...")
}

遍歷對(duì)象的屬性

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

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

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

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

var obj = {
    name : "EVA",
    age : 14,
    sayMe : function(){
        console.log("this is eva");
    }
}
// 1.對(duì)象名.方法名()
obj.sayMe();
// 2.對(duì)象名[方法名]()
obj["sayMe"]();

新增對(duì)象的方法

var obj = {
    name : "eva",
    age : 18,
    sayMe : function(){
        console.log("this is eva");
    }
}
// 1.對(duì)象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("shinji");
}
console.log(obj);
// 2.對(duì)象名[新的方法名] = function(){}

修改對(duì)象的方法

1.對(duì)象名.方法名 = function(){}
2.對(duì)象名[方法名] = function(){}

var obj = {
    name : "EVA",
    age : 18,
    sayMe : function(){
        console.log("this is eva");
    }
}

obj.sayMe = function(){
    console.log("shinji");
}
console.log(obj);
obj.sayMe();

刪除對(duì)象的方法

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

var obj = {
    name : "張無(wú)忌",
    age : 18,
    sayMe : function(){
        console.log("我是張無(wú)忌");
    }
}

delete obj.sayMe;
// 訪問(wèn)對(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)用
}