JavaScript核心語法——對象

對象

對象的概述

對象是什麼

JavaScript中的對象,和其餘編程語言中的對象同樣。能夠對比現實生活中的一些東西來理解他。
在JavaScript中,一個對象可使一個單純的擁有屬性和類型的實體。假如和一個杯子相比較,一個杯子是一個對象,擁有屬性。杯子有顏色、圖案、重量等。一樣,JavaScript對象也有屬性來定義它的特徵。
方法是關聯到某個對象的函數,或者簡單來講,一個方法是一個值爲某和函數的對象屬性。定義方法就像定義普通的函數,出了他們必須被賦給對象的某個屬性。html

對象的分類

1.內置對象/原生對象
就是JavaScript語言預約義的對象。在ECMAScript標準定義,有JavaScript解釋器/引擎提供具體實現。
2.宿主對象
指的是JavaScript運行環境提供的對象。通常由瀏覽器廠商提供實現(目前也有獨立的JavaScript解釋器/引擎提供實現),主要分文BOM和DOM。
3.自定義對象
就是由開發人員自主建立的對象。
對象的初始化器常見方式,代碼以下;編程

Object對象

Object對象是什麼

Object類型與Array、Math等同樣都是JavaScript的引用類型。不過Object類型是JavaScript中全部類型的父級(全部類型的對象均可以使用Object的屬性和方法)。
JavaScript能夠經過Object的構造函數來建立自定義對象。當以非構造函數形式被調用時,Object等同於new Object()。數組

建立對象

對象初始化器方式

使用對象初始化器也被稱做經過字面值建立對象。瀏覽器

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

構造函數方式

構造函數時經過JavaScript提供的預約義類型的構造函數來建立對象的。
代碼以下;編程語言

對象的構造函數方式
       利用全部引用類型建立對應的對象 -> 具備具體的類型
        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();//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()方法建立一個擁有指定原型和若干個指定屬性的對象。
參數;
1.proto參數;一個對象,做爲新建立對象的原型
2.propertiesObject參數;可選。該參數對象是一組屬性與值,該對象的屬性名稱試試建立的對象的屬性名稱,值是屬性描述符。
代碼以下;函數

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

對象的屬性

定義對象的屬性

一個JavaScript對象有很對屬性。一個對象的屬性能夠解釋成一個附加到對象的變量。對象的屬性和普通的JavaScript變量基本沒有什麼區別,僅僅是屬性屬於某個對象。優化

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

    2.對象名[屬性名] - 通用的調用方式
       適用於複雜命名的屬性名稱
 
console.log(obj['name']);// 張無忌
console.log(obj['Type-Content']);// text/html

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

訪問對象的屬性

1.JavaScript能夠經過點符號來訪問一個對象的屬性。code

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

2.JavaScript對象的屬性也能夠經過方括號訪問。htm

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

遍歷屬性

JavaScript提供了三種原生方法用於遍歷或枚舉對象的屬性;
1.for...in循環:該方法依次訪問一個對象及其原型鏈中全部課枚舉的屬性。
2.Objectkeys(object)方法:該方法返回一個對象o自身包含(不包括原型中)的全部屬性的名稱的數組。
3.ObjectgetOwnpropertyNames(object)方法:該方法返回一個數組,他包含了對象o全部擁有的屬性(不管是否可枚舉)的名稱。對象

var obj = {
    name : '張三',
    age : 18,
    sayMe : 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]);
    }
}

屬性訪問出錯

當不肯定對象是否存在、對象的屬性是否存在時,可使用錯誤處理結構try...catch語句塊來捕捉拋出的錯誤,避免程序異常終止。

//訪問未聲明的變量
console.log(emp);

//訪問未聲明的屬性
var emp = {};
console.log(emp.ename);

//訪問未聲明的屬性的成員
console.log(emp.ename.length);

檢查對象的屬性

檢查對象的屬性可使用如下四種方法檢測對象中是否存在指定屬性
1.使用關鍵字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

對象的方法

定義對象的方法

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

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.對象名.方法名()
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) {
    // 確認目前是一個方法
    if (obj.sayMe instanceof Function) {
        obj.sayMe();// 方法調用
    }
}
// 以上代碼能夠優化爲如下代碼
if ('sayMe' in obj && obj.sayMe instanceof Function) {
    obj.sayMe();// 方法調用
}

// 2.delete 對象名[方法名]
相關文章
相關標籤/搜索