JS中如何利用字面量創(chuàng)建對(duì)象

本篇內(nèi)容介紹了“JS中如何利用字面量創(chuàng)建對(duì)象”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

什么是字面量

字面量（literal）是表達(dá)一個(gè)固定值的表示法，又叫常量，用來(lái)為變量賦值時(shí)的常數(shù)量

通俗的理解，字面就是所見(jiàn)即所得，js 程序執(zhí)行到代碼中的字面量，會(huì)立即知道它是什么類(lèi)型的數(shù)據(jù)，值是多少

可以用于表示固定值，比如：數(shù)字、字符串、undefined、布爾類(lèi)型、對(duì)象的字面值等

對(duì)象字面量創(chuàng)建對(duì)象

對(duì)象字面量的方式是最常用的創(chuàng)建對(duì)象的方式之一，它用內(nèi)含屬性的花括號(hào){...}快速創(chuàng)建對(duì)象。

var 對(duì)象名={ 
    .....
};

對(duì)象字面值是封閉在花括號(hào)對(duì)({})中的一個(gè)對(duì)象的零個(gè)或多個(gè)“屬性名:值”列表。

示例：

var person={ 
    name:"Jack", 
    age:10,
    5:true  
};

• 在這個(gè)例子中，左邊的花括號(hào)（{）表示對(duì)象字面量的開(kāi)始，因?yàn)樗霈F(xiàn)在了表達(dá)式上下文（expression context）中。

• JavaScript 中的表達(dá)式上下文（expression context）指的是能夠返回一個(gè)值（表達(dá)式）。

• 賦值操作符（=）表示后面是一個(gè)值，所以左花括號(hào)在這里表示一個(gè)表達(dá)式的開(kāi)始。

• 同樣的花括號(hào)，如果出現(xiàn)在一個(gè)語(yǔ)句上下文（statement context）中，例如跟在 if 語(yǔ)句條件的后面，則表示一個(gè)語(yǔ)句塊的開(kāi)始。

• 例子中定義了 name屬性，之后是一個(gè)冒號(hào)，再后面是這個(gè)屬性的值（name:"Jack"）。在對(duì)象字面量中，使用逗號(hào)來(lái)分隔不同的屬性，因此”Jack”后面是一個(gè)逗號(hào)。但是，在 age屬性的值 10 的后面不能添加逗號(hào)，因?yàn)?age 是這個(gè)對(duì)象的最后一個(gè)屬性。在最后一個(gè)屬性后面添加逗號(hào)，會(huì)在 IE7 及更早版本和Opera 中導(dǎo)致錯(cuò)誤。

• 不要忘記結(jié)束大括號(hào)右邊的（;）

對(duì)象字面量的值的類(lèi)型

對(duì)象字面量的值可以是任何數(shù)據(jù)類(lèi)型包括數(shù)組字面量，函數(shù)，嵌套的對(duì)象字面量

var Swapper = {    
        // 數(shù)組字面量（用逗號(hào)分隔，所有都要加引號(hào)）
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"],
    pos: { 
            //嵌套對(duì)象字面量
        x: 40,
        y: 300
    },
    onSwap: function() { 
            //函數(shù)
    }
};

• 如果有任何的語(yǔ)法規(guī)則被打破，如缺少逗號(hào)或冒號(hào)或大括號(hào)，將會(huì)觸發(fā)JavaScript錯(cuò)誤。

• 瀏覽器的錯(cuò)誤信息在指出對(duì)象字面量語(yǔ)法錯(cuò)誤的位置一般有幫助，但他們不一定會(huì)在指出錯(cuò)誤的性質(zhì)完全準(zhǔn)確。

在使用對(duì)象字面量時(shí)，屬性名也可以用字符串

var person={
    "name":"Jack",
    "age":29,
    5:true
};

• 上述例子會(huì)創(chuàng)建一個(gè)對(duì)象，包含三個(gè)屬性，但這里的數(shù)值屬性名會(huì)自動(dòng)轉(zhuǎn)換為字符串。

• 在通過(guò)對(duì)象字面量定義對(duì)象時(shí)，實(shí)際上不會(huì)調(diào)用Object構(gòu)造函數(shù)（Firefox 2及更早版本會(huì)調(diào)用Object構(gòu)造函數(shù)；但Firefox3之后就不會(huì)了）
  這是因?yàn)?/strong>字面量法創(chuàng)建對(duì)象強(qiáng)調(diào)該對(duì)象僅是一個(gè)可變的hash映射，而不是從對(duì)象中提取的屬性或方法。

屬性名和變量名相同時(shí)可簡(jiǎn)寫(xiě)

var obj = { name: name, age: age };

// ES2015中，屬性名和變量名相同時(shí)可簡(jiǎn)寫(xiě)為：
var obj = { name, age };

擴(kuò)展屬性

// 擴(kuò)展屬性，ES2018新特性，可用于克隆或合并對(duì)象，淺拷貝，不包括原型
var obj2 = { ...obj3 };

以字面量方式創(chuàng)建的對(duì)象屬性默認(rèn)是可寫(xiě)，可枚舉和可配置的

對(duì)象的調(diào)用

對(duì)象里面的屬性調(diào)用 : 對(duì)象.屬性名 ，這個(gè)小點(diǎn) . 就理解為“ 的 ”

對(duì)象里面屬性的另一種調(diào)用方式 : 對(duì)象['屬性名']，注意方括號(hào)里面的屬性必須加引號(hào)，我們后面會(huì)用 ? 對(duì)象里面的方法調(diào)用：對(duì)象.方法名() ，注意這個(gè)方法名字后面一定加括號(hào)

var obj1 = {
    dogName: '可可',
    type: '阿拉斯加犬',
    age: 5 + '歲',
    color: 'red',
    skill: function () {
        console.log('技能' + ':' + 'bark' + ',' + 'showFilm');
    }
}
console.log(obj1.dogName);
obj1.skill();

說(shuō)明：

對(duì)象的原型默認(rèn)為Object.prototype。通過(guò)定義屬性__proto__（只能使用冒號(hào)標(biāo)記的屬性定義）的值來(lái)變更原型。只有給出的值是對(duì)象或null，對(duì)象的原型才會(huì)被設(shè)置為給出的值，否則原型不會(huì)改變。

var obj1 = {};
Object.getPrototypeOf(obj1) === Object.prototype;	// true

var obj2 = { __proto__: null };
Object.getPrototypeOf(obj2) === null;				// true

var __proto__= {};
var obj3 = { "__proto__": __proto__ };
Object.getPrototypeOf(obj3) === __proto__;			// true
// 不使用冒號(hào)標(biāo)記的屬性定義，不會(huì)變更對(duì)象的原型，只是名字為_(kāi)_proto__的普通屬性
var obj4 = { __proto__ };
Object.getPrototypeOf(obj4) === __proto__;			// false
obj4.hasOwnProperty("__proto__");					// true
Object.getPrototypeOf(obj4) === Object.prototype;	// true

var obj5 = { __proto__: "not an object or null" };
obj5.hasOwnProperty("__proto__");					// false
Object.getPrototypeOf(obj5) === Object.prototype;	// true

“JS中如何利用字面量創(chuàng)建對(duì)象”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！