JavaScript 之核心語(yǔ)法 [ 對(duì)象 ]

fxp 發(fā)布于2019-08-23 11:00 / 2907人閱讀

摘要：對(duì)象描述是一個(gè)擁有屬性和方法的集合體屬性表示該對(duì)象的外貌方法表示該對(duì)象的行為對(duì)象的分類內(nèi)置對(duì)象表示中的預(yù)定義對(duì)象宿主對(duì)象表示匹配瀏覽器的對(duì)象比如自定義對(duì)象表示由開(kāi)發(fā)人員定義的對(duì)象定義對(duì)象字面量方式語(yǔ)法對(duì)象名屬性名屬性值方法名方法體張小凡御雷

對(duì)象 描述

是一個(gè)擁有屬性和方法的集合體

屬性

表示該對(duì)象的外貌

方法

表示該對(duì)象的行為

對(duì)象的分類

內(nèi)置對(duì)象

表示JavaScript中的預(yù)定義對(duì)象

宿主對(duì)象

表示匹配瀏覽器的對(duì)象

比如：DOM、BOM

自定義對(duì)象

表示由開(kāi)發(fā)人員定義的對(duì)象

定義對(duì)象 字面量方式 語(yǔ)法

var 對(duì)象名 = {
    屬性名 ：屬性值,
    方法名 ：function () {
        方法體
    }
}

var obj1 = {
    name : "張小凡",
    nian : 20,
    qingyun : function () {
        console.log( "御雷真訣" )
    }
};
console.log( obj1 );

構(gòu)建函數(shù)方式 語(yǔ)法

var 對(duì)象名 = new Object({
    屬性名 ： 屬性值,
    方法名 : function(){
        方法體
    }
})

var obj2 = new Object( {
    name : "海龍",
    nian : 18,
    tianyin : function () {
        console.log( "萬(wàn)滅心鐘" )
    }
} );
console.log( obj2 );

Object.create()方法 語(yǔ)法

var 對(duì)象名 = Object.create()

var obj3 = Object.create( );
console.log( obj3 );

調(diào)用對(duì)象的屬性和方法 第一種方式 調(diào)用屬性

對(duì)象名.屬性名

不適合用于復(fù)雜的屬性名

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    "men-pai" : "qing-yun",
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );

/* 調(diào)用屬性 */
console.log( obj.name );// 顯示 張小凡
/* 調(diào)用復(fù)雜的屬性名時(shí)，該方法會(huì)報(bào)錯(cuò) */
console.log( obj.men-pai );// 顯示 ReferenceError: pai is not defined

調(diào)用方法

對(duì)象名.方法名()

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    "men-pai" : "qing-yun",
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );

/* 調(diào)用方法 */
console.log( obj.faqi() );// 顯示 嗜血 攝魂

第二種方式 調(diào)用屬性

對(duì)象名[屬性名]

適合用于復(fù)雜的屬性名

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    "men-pai" : "qing-yun",
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );

/* 調(diào)用屬性 */
console.log( obj["nian"] );// 顯示 20
/* 調(diào)用復(fù)雜的屬性名時(shí)，可以正常顯示 */
console.log( obj["men-pai"] );// 顯示 qing-yun

調(diào)用方法

對(duì)象名[方法名]()

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    "men-pai" : "qing-yun",
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );

/* 調(diào)用方法 */
console.log( obj["faqi"]() );// 顯示 嗜血 攝魂

新增對(duì)象的屬性和方法 第一種方式 新增屬性

對(duì)象名.新的屬性名 = 屬性值

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 新增屬性 */
obj.menpai = "青云";
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi], menpai: "青云" }

新增方法

對(duì)象名.新的方法名 = function(){ 方法體 }

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 新增方法 */
obj.gongfa = function () {
    console.log( "御雷真訣" )
}
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi], menpai: "青云", gongfa: [Function] }

第二種方式 新增屬性

對(duì)象名[新的屬性名] = 屬性值

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 新增屬性 */
obj["zhandouli"] = 20000;
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi], menpai: "青云", zhandouli: 20000 }

新增方法

對(duì)象名[新的方法名] = function(){ 方法體 }

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 新增方法 */
obj["biecheng"] = function () {
    console.log( "鬼厲先生" )
}
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi], menpai: "青云", gongfa: [Function], zhandouli: 20000, biecheng: [Function] }

修改對(duì)象的屬性和方法 第一種方式 修改屬性

對(duì)象名.已存在的屬性名 = 新的屬性值

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 修改屬性 */
obj.nian = 18;
console.log( obj );// 顯示 { name: "張小凡", nian: 18, faqi: [Function: faqi] }

修改方法

對(duì)象名.已存在的方法名 = 新的function(){ 方法體 }

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 修改方法 */
console.log( obj.faqi() );// 顯示 嗜血 攝魂
/* 對(duì)方法進(jìn)行修改 */
obj.faqi = function () {
    console.log( "誅仙" )
}
console.log( obj.faqi() );// 顯示 誅仙

第二種方式 修改屬性

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

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 修改屬性 */
obj["nian"] = 22;
console.log( obj );// 顯示 { name: "張小凡", nian: 22, faqi: [Function: faqi] }

修改方法

對(duì)象名[已存在的方法名] = 新的function(){ 方法體 }

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 修改方法 */
console.log( obj["faqi"]() );// 顯示 嗜血 攝魂
/* 對(duì)方法進(jìn)行修改 */
obj["faqi"] = function () {
    console.log( "誅仙" )
}
console.log( obj["faqi"]() );// 顯示 誅仙

刪除對(duì)象的屬性和方法 第一種方法 刪除屬性

delete 對(duì)象名.屬性名

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

delete obj.nian;
console.log( obj );// 顯示 { name: "張小凡", faqi: [Function: faqi] }

刪除方法

delete 對(duì)象名.方法名

刪除方法時(shí)不能帶小括號(hào)

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 刪除方法 */
delete obj.faqi;
console.log( obj );// 顯示 { name: "張小凡" }

第二種方法 刪除屬性

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

/* 定義一個(gè)對(duì)象 */

var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 刪除屬性 */
delete obj["name"];
console.log( obj );// 顯示 { nian: 20, faqi: [Function: faqi] }

刪除方法

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

刪除方法時(shí)不能帶小括號(hào)

/* 定義一個(gè)對(duì)象 */
var obj = {
    name : "張小凡",
    nian : 20,
    faqi : function () {
        console.log( "嗜血 攝魂" )
    }
};
console.log( obj );// 顯示 { name: "張小凡", nian: 20, faqi: [Function: faqi] }

/* 刪除方法 */
delete obj["faqi"];
console.log( obj );// 顯示 { nian: 20 }

刪除對(duì)象屬性和方法時(shí)的注意

調(diào)用一個(gè)已經(jīng)刪除的屬性會(huì)顯示 undefined

調(diào)用一個(gè)已經(jīng)刪除的方法會(huì)報(bào)錯(cuò)

/* 調(diào)用一個(gè)已經(jīng)刪除的屬性會(huì)顯示 undefined */
console.log( obj.name );// 顯示 undefined
/* 調(diào)用一個(gè)已經(jīng)刪除的方法會(huì)報(bào)錯(cuò) */
console.log( obj.faqi() );// 顯示 TypeError: obj.faqi is not a function

遍歷對(duì)象

通過(guò)循環(huán)語(yǔ)句遍歷對(duì)象來(lái)獲得對(duì)象中的屬性值或方法體中的內(nèi)容

由于無(wú)法確定對(duì)象長(zhǎng)度，所以while、do...while、for語(yǔ)句不合適使用，建議for...in語(yǔ)句

var obj = {
    "name" : "張小凡",
    "nian" : 20,
    "faqi" : function(){
        console.log( "嗜血 攝魂" );
    }
}
/* 對(duì) 對(duì)象中的內(nèi)容進(jìn)行遍歷 */
for ( var of in obj ) {
    /* 設(shè)置條件表達(dá)式來(lái)選擇判斷屬性和方法進(jìn)行區(qū)分顯示 */
    if (typeof o1[of] === "function") {
        // 是對(duì)象的方法
        obj[of]();
    } else {
        // 是對(duì)象的屬性
        console.log( obj[of] );
    }
}

檢測(cè)對(duì)象 調(diào)用對(duì)象時(shí)會(huì)出現(xiàn)的問(wèn)題

在調(diào)用一個(gè)不存在的對(duì)象屬性時(shí)會(huì)顯示 undefined

var obj = {
    "name" : "張小凡",
    "nian" : 20,
    "faqi" : function(){
        console.log( "嗜血 攝魂" );
    }
}
console.log( obj.zy );// 顯示：undefined

解決方法

可以先對(duì) 對(duì)象的屬性或方法進(jìn)行檢測(cè)

檢測(cè)是否有該屬性或方法

/* 使用 in 關(guān)鍵字判斷對(duì)象中是否存在指定的屬性 */
if ( "name" in obj ) {
    console.log( obj.name );// 有屬性 會(huì)直接顯示 - 張小凡
}
/* 使用 Object 提供的 hasOwnProperty()  */
if ( obj.hasOwnProperty( "zy" ) ) {
    console.log( obj.zy );//沒(méi)有沒(méi)有屬性 會(huì)不顯示
}

云服務(wù)器 GPU云服務(wù)器 AJAX核心對(duì)象面向?qū)ο?語(yǔ)法分析 javascript核心 javascript 語(yǔ)法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96908.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fxp

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

《黑馬（三）》常用網(wǎng)頁(yè)開(kāi)發(fā)工具和骨架標(biāo)簽新增代碼

閱讀 3387·2021-11-22 09:34
SpringCloud升級(jí)之路2020.0.x版-37. 實(shí)現(xiàn)異步的客戶端封裝配置管理的意義與設(shè)計(jì)

閱讀 660·2021-11-19 11:29
Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

閱讀 1363·2019-08-30 15:43
關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 樣式應(yīng)用篇

閱讀 2243·2019-08-30 14:24
【每日一包0025】events

閱讀 1876·2019-08-29 17:31
【每日一包0009】group-array

閱讀 1235·2019-08-29 17:17
CSS中的一些小細(xì)節(jié)

閱讀 2624·2019-08-29 15:38
Vue+webpack+Element 兼容問(wèn)題總結(jié)

閱讀 2741·2019-08-26 12:10

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 之核心語(yǔ)法 [ 對(duì)象 ]

相關(guān)文章

**《JavaScript 闖關(guān)記》之簡(jiǎn)介**

JavaScript 闖關(guān)記

【JavaScript】核心語(yǔ)法之對(duì)象

JavaScript 之核心語(yǔ)法 [ 數(shù)據(jù)類型 ]

**【JavaScript】核心語(yǔ)法之數(shù)據(jù)類型**

發(fā)表評(píng)論

0條評(píng)論

fxp

男|高級(jí)講師

TA的文章

《黑馬（三）》常用網(wǎng)頁(yè)開(kāi)發(fā)工具和骨架標(biāo)簽新增代碼

SpringCloud升級(jí)之路2020.0.x版-37. 實(shí)現(xiàn)異步的客戶端封裝配置管理的意義與設(shè)計(jì)

Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 樣式應(yīng)用篇

【每日一包0025】events

【每日一包0009】group-array

CSS中的一些小細(xì)節(jié)

Vue+webpack+Element 兼容問(wèn)題總結(jié)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript 之 核心語(yǔ)法 [ 對(duì)象 ]

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

JavaScript 之核心語(yǔ)法 [ 對(duì)象 ]