JavaScript-對象

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

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

對象是什么

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

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

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

宿主對象

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

自定義對象

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

Object對象

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

創(chuàng)建對象

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

/* 2. 對象的構(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();
var str = new Storage();
var boo = new Boolean();

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

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

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

對象的屬性就像是附加到對象上的變量

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

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

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

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

新增、刪除、修改對象的屬性

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

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

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

檢測對象的屬性

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

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

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

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

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

便利屬性

var obj = {
    name : "小薄荷",
    age : "0.3",
    variety : function () {
        console.log("薩摩耶")
    }
};
// 1.for...in語句
for (var objAttr in obj) {
    // 通過對象屬性或方法對應(yīng)的值的類型進行區(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];
    // 通過對象屬性或方法對應(yīng)的值的類型進行區(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];
    // 通過對象屬性或方法對應(yīng)的值的類型進行區(qū)別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

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

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

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

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

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

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

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