JavaScript-對象

對象是什麼

在JavaScript中,一個對象就像一個單獨擁有屬性和類型的實體。一個杯子做爲一個對象,杯子有顏色、重量等屬性。一樣,JavaScript對象也有屬性定義它的特徵。
方法是關聯到某個對象的函數,或者說,一個方法是一個值爲某個函數的對象屬性。
對象能夠分爲如下幾類函數

  • 內置對象/原生對象

就是JavaScript語言預約義的對象code

  • 宿主對象

是JavaScript運行環境提供的對象對象

  • 自定義對象

就是開發人員自主建立的對象ip

Object對象

Object類型是引用類型。但Object類型是全部JavaScript中全部類型的父級(全部類型的對象均可以是Object的屬性和方法)開發

建立對象

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

/* 2. 對象的構造函數方式
*      * 利用全部的引用類型建立對應的對象->具備具體的類型
*        var num = new Number;//number類型
*        var str = new String;//string類型
*        var boo = new Boolean;//boolean類型
*      * 利用Object做爲構造函數建立對象
*        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建立對象
*      var 對象名 = Object.create(null) -> 建立一個空對象
      var 對象名 = Object.create(obj)
      * obj - 表示另外一個對象
      * 特色 - 當前建立的新對象擁有與obj對象相同的屬性和方法*/
var obj4 = Object.create(null);
var obj5 = Object.create(obj);

對象的屬性

定義對象的屬性

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

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

調用對象的屬性

/*  調用對象的屬性
*     對象名.屬性名
*     不適用於複雜命名的屬性名稱*/
console.log(obj.name);

/*   對象名[屬性名]-通用方式
     適用於複雜命名的屬性名稱
*     */
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. 判斷對象的屬性值,先轉換爲boolean類型*/
if (obj.name){
    console.log('obj對象name屬性存在')
}

/*   3. 利用in關鍵字進行判斷*/
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) {
    // 經過對象屬性或方法對應的值的類型進行區別
    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];
    // 經過對象屬性或方法對應的值的類型進行區別
    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];
    // 經過對象屬性或方法對應的值的類型進行區別
    if (obj[objAttr] instanceof Function) {
        // 當前是對象的方法
        obj[objAttr]();
    } else {
        // 當前是對象的屬性
        console.log(obj[objAttr]);
    }
}

對象的方法

調用、新增、修改、刪除對象的方法

調用、新增、修改、刪除對象的方法和屬性基本同樣get

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

/*調用對象的方法*/
// 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 對象名[方法名]
相關文章
相關標籤/搜索