JavaScript核心語法——對象

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

摘要：張無忌對象的屬性存在對象的屬性不存在使用進行判斷。張無忌對象的屬性存在請先定義對象的屬性使用語句進行判斷張無忌對象的屬性存在刪除對象的屬性可以用操作符刪除一個不是繼承而來的屬性。

對象 對象的概述 對象是什么

JavaScript中的對象，和其他編程語言中的對象一樣?？梢詫Ρ痊F(xiàn)實生活中的一些東西來理解他。
在JavaScript中，一個對象可以使一個單純的擁有屬性和類型的實體。假如和一個杯子相比較，一個杯子是一個對象，擁有屬性。杯子有顏色、圖案、重量等。同樣，JavaScript對象也有屬性來定義它的特征。
方法是關(guān)聯(lián)到某個對象的函數(shù)，或者簡單來說，一個方法是一個值為某和函數(shù)的對象屬性。定義方法就像定義普通的函數(shù)，出了他們必須被賦給對象的某個屬性。

對象的分類

1.內(nèi)置對象/原生對象
就是JavaScript語言預(yù)定義的對象。在ECMAScript標(biāo)準(zhǔn)定義，有JavaScript解釋器/引擎提供具體實現(xiàn)。
2.宿主對象
指的是JavaScript運行環(huán)境提供的對象。一般由瀏覽器廠商提供實現(xiàn)（目前也有獨立的JavaScript解釋器/引擎提供實現(xiàn)），主要分文BOM和DOM。
3.自定義對象
就是由開發(fā)人員自主創(chuàng)建的對象。
對象的初始化器常見方式，代碼如下；

Object對象 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（）。

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

使用對象初始化器也被稱作通過字面值創(chuàng)建對象。

  1.對象的初始化器創(chuàng)建方式
      var 對象名 = {
        屬性名 : 屬性值,
        方法名 : function(){
            方法體
        }
      }
 
var obj1 = {
    name : "張無忌",
    age : 18,
    sayMe : function(){
        console.log("我是張無忌");
    }
}

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

構(gòu)造函數(shù)時通過JavaScript提供的預(yù)定義類型的構(gòu)造函數(shù)來創(chuàng)建對象的。
代碼如下；

    對象的構(gòu)造函數(shù)方式
       利用所有引用類型創(chuàng)建對應(yīng)的對象 -> 具有具體的類型
        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);//{}空對象
console.log(obj3);//{}空對象

var obj4 = new Object(undefined);
var obj5 = new Object(null);
console.log(obj4);//{}空對象
console.log(obj5);//{}空對象

Object.create（）方法

Object.create（）方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。
參數(shù)；
1.proto參數(shù)；一個對象，作為新創(chuàng)建對象的原型
2.propertiesObject參數(shù)；可選。該參數(shù)對象是一組屬性與值，該對象的屬性名稱試試創(chuàng)建的對象的屬性名稱，值是屬性描述符。
代碼如下；

      利用Object.create()方法創(chuàng)建對象
      var 對象名 = Object.create(null) -> 創(chuàng)建一個空對象
      var 對象名 = Object.create(obj)
      obj - 表示另一個對象
      特點 - 當(dāng)前創(chuàng)建的新對象擁有與obj對象相同的屬性和方法
 
var obj6 = Object.create(null);
var obj7 = Object.create(obj1);

對象的屬性 定義對象的屬性

一個JavaScript對象有很對屬性。一個對象的屬性可以解釋成一個附加到對象的變量。對象的屬性和普通的JavaScript變量基本沒有什么區(qū)別，僅僅是屬性屬于某個對象。

var obj = {
    name : "張無忌",
    "Type-Content" : "text/html",
    sayMe : function(){
        console.log("我是張無忌");
    }
}
/*
    1.對象名.屬性名
      * 不適用于復(fù)雜命名的屬性名稱
 */
console.log(obj.name);// 張無忌
// console.log(obj.Type-Content);

    2.對象名[屬性名] - 通用的調(diào)用方式
       適用于復(fù)雜命名的屬性名稱
 
console.log(obj["name"]);// 張無忌
console.log(obj["Type-Content"]);// text/html

 訪問一個對象不存在的屬性 -> 值為 undefined
console.log(obj.age);

訪問對象的屬性

1.JavaScript可以通過點符號來訪問一個對象的屬性。

var emp = {
    ename:"Tom",salary:3500
};
emp.ename = "Tommy"http://修改屬性的值
console.log(emp.ename);//獲取屬性的值

2.JavaScript對象的屬性也可以通過方括號訪問。

var emp = {
    ename:"Tom",salary:3500
};
emp["ename"] = "Tony"；//修改屬性的值
console.log(emp["ename"]);//獲取屬性的值

遍歷屬性

JavaScript提供了三種原生方法用于遍歷或枚舉對象的屬性；
1.for...in循環(huán)：該方法依次訪問一個對象及其原型鏈中所有課枚舉的屬性。
2.Objectkeys（object）方法：該方法返回一個對象o自身包含（不包括原型中）的所有屬性的名稱的數(shù)組。
3.ObjectgetOwnpropertyNames(object)方法：該方法返回一個數(shù)組，他包含了對象o所有擁有的屬性（無論是否可枚舉）的名稱。

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

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

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

屬性訪問出錯

當(dāng)不確定對象是否存在、對象的屬性是否存在時，可以使用錯誤處理結(jié)構(gòu)try...catch語句塊來捕捉拋出的錯誤，避免程序異常終止。

//訪問未聲明的變量
console.log（emp）；

//訪問未聲明的屬性
var emp = {}；
console.log（emp.ename）；

//訪問未聲明的屬性的成員
console.log（emp.ename.length）；

檢查對象的屬性

檢查對象的屬性可以使用以下四種方法檢測對象中是否存在指定屬性
1.使用關(guān)鍵字in

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

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

2.使用Object對象的hasOwnProperty（）方法。

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

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

3.使用undefined進行判斷。

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

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

4.使用if語句進行判斷

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

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

刪除對象的屬性

可以用delete操作符刪除一個不是繼承而來的屬性。

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

    1.delete 對象名.屬性名
    2.delete 對象名[屬性名]
 
delete obj.name;
console.log(obj.name);// undefined

對象的方法 定義對象的方法

定義方法就像定義普通的函數(shù)，出了他們必須被賦予給對象的某個屬性。

var obj = {
    name : "張無忌",
    age : 18,
    sayMe : function(){
        console.log("我是張無忌");
    }
}
// 1.對象名.新的方法名 = function(){}
obj.sayYou = function(){
    console.log("你是周芷若");
}
console.log(obj);
// 2.對象名[新的方法名] = function(){}

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

對象方法的調(diào)用類似于對象屬性的調(diào)用，很簡單有兩種屬性

var obj = {
    name : "張無忌",
    age : 18,
    sayMe : function(){
        console.log("我是張無忌");
    }
}
// 1.對象名.方法名()
obj.sayMe();
// 2.對象名[方法名]()
obj["sayMe"]();

刪除對象的方法

可以用delete操作符刪除對象
代碼示例；

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) {
    // 確認(rèn)目前是一個方法
    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 對象名[方法名]