JavaScript 之核心語法 [ 對象 ]

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

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

對象描述

是一個擁有屬性和方法的集合體

屬性

表示該對象的外貌

方法

表示該對象的行為

對象的分類

內置對象

表示JavaScript中的預定義對象

宿主對象

表示匹配瀏覽器的對象

比如：DOM、BOM

自定義對象

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

定義對象 字面量方式 語法

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

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

構建函數(shù)方式 語法

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

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

Object.create()方法 語法

var 對象名 = Object.create()

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

調用對象的屬性和方法 第一種方式 調用屬性

對象名.屬性名

不適合用于復雜的屬性名

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

/* 調用屬性 */
console.log( obj.name );// 顯示 張小凡
/* 調用復雜的屬性名時，該方法會報錯 */
console.log( obj.men-pai );// 顯示 ReferenceError: pai is not defined

調用方法

對象名.方法名()

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

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

第二種方式 調用屬性

對象名[屬性名]

適合用于復雜的屬性名

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

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

調用方法

對象名[方法名]()

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

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

新增對象的屬性和方法 第一種方式 新增屬性

對象名.新的屬性名 = 屬性值

/* 定義一個對象 */
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: "青云" }

新增方法

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

/* 定義一個對象 */
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] }

第二種方式 新增屬性

對象名[新的屬性名] = 屬性值

/* 定義一個對象 */
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 }

新增方法

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

/* 定義一個對象 */
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] }

修改對象的屬性和方法 第一種方式 修改屬性

對象名.已存在的屬性名 = 新的屬性值

/* 定義一個對象 */
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] }

修改方法

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

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

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

第二種方式 修改屬性

對象名[已存在的屬性名] = 新的屬性值

/* 定義一個對象 */
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] }

修改方法

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

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

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

刪除對象的屬性和方法 第一種方法 刪除屬性

delete 對象名.屬性名

/* 定義一個對象 */
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 對象名.方法名

刪除方法時不能帶小括號

/* 定義一個對象 */
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 對象名[屬性名]

/* 定義一個對象 */

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 對象名[方法名]

刪除方法時不能帶小括號

/* 定義一個對象 */
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 }

刪除對象屬性和方法時的注意

調用一個已經(jīng)刪除的屬性會顯示 undefined

調用一個已經(jīng)刪除的方法會報錯

/* 調用一個已經(jīng)刪除的屬性會顯示 undefined */
console.log( obj.name );// 顯示 undefined
/* 調用一個已經(jīng)刪除的方法會報錯 */
console.log( obj.faqi() );// 顯示 TypeError: obj.faqi is not a function

遍歷對象

通過循環(huán)語句遍歷對象來獲得對象中的屬性值或方法體中的內容

由于無法確定對象長度，所以while、do...while、for語句不合適使用，建議for...in語句

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

檢測對象 調用對象時會出現(xiàn)的問題

在調用一個不存在的對象屬性時會顯示 undefined

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

解決方法

可以先對對象的屬性或方法進行檢測

檢測是否有該屬性或方法

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

云服務器 GPU云服務器 AJAX核心對象面向對象語法分析 javascript核心 javascript 語法

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96908.html

《JavaScript 闖關記》之簡介

摘要：瀏覽器只是實現(xiàn)的宿主環(huán)境之一，其他宿主環(huán)境包括和。年月，版發(fā)布，成為國際標準。事件定義了事件和事件處理的接口。對于已經(jīng)正式納入標準的來說，盡管各瀏覽器都實現(xiàn)了某些眾所周知的共同特性，但其他特性還是會因瀏覽器而異。 JavaScript 是面向 Web 的編程語言，絕大多數(shù)現(xiàn)代網(wǎng)站都使用了 JavaScript，并且所有的現(xiàn)代 Web 瀏覽器（電腦，手機，平板）均包含了 JavaScri...

baihe 2019-08-21 10:55 評論0 收藏0
JavaScript 闖關記

摘要：對象數(shù)組初始化表達式，闖關記之上文檔對象模型是針對和文檔的一個。闖關記之數(shù)組數(shù)組是值的有序集合。數(shù)組是動態(tài)的，根闖關記之語法的語法大量借鑒了及其他類語言如和的語法。《JavaScript 闖關記》之 DOM（下） Element 類型除了 Document 類型之外，Element 類型就要算是 Web 編程中最常用的類型了。Element 類型用于表現(xiàn) XML 或 HTML 元素...

mj 2019-08-21 18:45 評論0 收藏0
【JavaScript】核心語法之對象

摘要：對象一對象對象是什么理解成你所看到的任何物體獨有屬性并且使用方法對象的分類內置對象原生對象是以為標準定義好的對象，可直接拿來使用宿主對象是以瀏覽器自身運行環(huán)境下提供的對象，并且才可使用自定義對象開發(fā)人自身創(chuàng)建的對象，并使用二創(chuàng)建對象對象初始 JS(JavaScript) 對象一.對象1.對象是什么；理解成你所看到的任何物體獨有屬性并且使用方法2.對象的分類；內置對象/原生對象；是以...

haoguo 2019-08-26 12:10 評論0 收藏0
JavaScript 之核心語法 [ 數(shù)據(jù)類型 ]

摘要：數(shù)據(jù)類型數(shù)據(jù)類型表示數(shù)值的類型類型的分類原始類型類型數(shù)字類型類型分為整數(shù)和浮點數(shù)整數(shù)正整數(shù)負整數(shù)變量為數(shù)字類型整數(shù)顯示浮點數(shù)小數(shù)變量為數(shù)字類型浮點數(shù)顯示浮點數(shù)在小數(shù)點前面如果沒有數(shù)字，會被默認為在小數(shù)點前的數(shù)字為比如會顯示浮點數(shù)的數(shù)據(jù)類型數(shù)據(jù)類型 - 表示數(shù)值的類型類型的分類原始類型 number類型（數(shù)字類型） number類型分為整數(shù)和浮點數(shù) 整數(shù) - 正整數(shù) 、0 、負...

luffyZh 2019-08-23 10:46 評論0 收藏0
【JavaScript】核心語法之數(shù)據(jù)類型

摘要：數(shù)據(jù)類型原始類型類型實為數(shù)字不區(qū)分整數(shù)和浮點類型整數(shù)類型包括負整數(shù)，和正整數(shù)浮點類型表示小數(shù)類型整數(shù)和浮點數(shù)小數(shù)或并不區(qū)分整數(shù)與浮點數(shù)變量的定義并初始化字面量或直接量定義數(shù)字值浮點類型是只該數(shù)值包含整數(shù)部分，小數(shù)部分，小數(shù)點和小數(shù)部分浮點類 JS(JavaScript) 數(shù)據(jù)類型； 1.原始類型； number類型；實為數(shù)字JS不區(qū)分整數(shù)和浮點類型；整數(shù)類型；包括負整數(shù)，0和正...

iflove 2019-08-23 11:32 評論0 收藏0