站長資訊網(wǎng)JavaScript中怎么利用字面量創(chuàng)建對象？下面本篇文章帶大家了解一下字面量，介紹一下JavaScript中如何利用對象字面量來創(chuàng)建對象，希望對大家有所幫助！
什么是字面量
字面量（literal）是表達(dá)一個(gè)固定值的表示法，又叫常量，用來為變量賦值時(shí)的常數(shù)量
通俗的理解，字面就是所見即所得，js 程序執(zhí)行到代碼中的字面量，會(huì)立即知道它是什么類型的數(shù)據(jù)，值是多少
可以用于表示固定值，比如：數(shù)字、字符串、undefined、布爾類型、對象的字面值等
對象字面量創(chuàng)建對象
對象字面量的方式是最常用的創(chuàng)建對象的方式之一，它用內(nèi)含屬性的花括號{...}快速創(chuàng)建對象。
var 對象名={ ..... };
對象字面值是封閉在花括號對({})中的一個(gè)對象的零個(gè)或多個(gè)“屬性名:值”列表。
示例：
var person={ name:"Jack", age:10, 5:true };
-
在這個(gè)例子中，左邊的花括號（
{）表示對象字面量的開始，因?yàn)樗霈F(xiàn)在了表達(dá)式上下文（expression context）中。 -
JavaScript 中的表達(dá)式上下文（expression context）指的是能夠返回一個(gè)值（表達(dá)式）。
-
賦值操作符（
=）表示后面是一個(gè)值，所以左花括號在這里表示一個(gè)表達(dá)式的開始。 -
同樣的花括號，如果出現(xiàn)在一個(gè)語句上下文（statement context）中，例如跟在 if 語句條件的后面，則表示一個(gè)語句塊的開始。
-
例子中定義了 name屬性，之后是一個(gè)冒號，再后面是這個(gè)屬性的值（
name:"Jack"）。在對象字面量中，使用逗號來分隔不同的屬性，因此”Jack”后面是一個(gè)逗號。但是，在 age屬性的值 10 的后面不能添加逗號，因?yàn)?age 是這個(gè)對象的最后一個(gè)屬性。在最后一個(gè)屬性后面添加逗號，會(huì)在 IE7 及更早版本和Opera 中導(dǎo)致錯(cuò)誤。 -
不要忘記結(jié)束大括號右邊的（
;）
對象字面量的值的類型
對象字面量的值可以是任何數(shù)據(jù)類型包括數(shù)組字面量，函數(shù)，嵌套的對象字面量
var Swapper = { // 數(shù)組字面量（用逗號分隔，所有都要加引號） images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"], pos: { //嵌套對象字面量 x: 40, y: 300 }, onSwap: function() { //函數(shù) } };
- 如果有任何的語法規(guī)則被打破，如缺少逗號或冒號或大括號，將會(huì)觸發(fā)JavaScript錯(cuò)誤。
- 瀏覽器的錯(cuò)誤信息在指出對象字面量語法錯(cuò)誤的位置一般有幫助，但他們不一定會(huì)在指出錯(cuò)誤的性質(zhì)完全準(zhǔn)確。
在使用對象字面量時(shí)，屬性名也可以用字符串
var person={ "name":"Jack", "age":29, 5:true };
- 上述例子會(huì)創(chuàng)建一個(gè)對象，包含三個(gè)屬性，但這里的數(shù)值屬性名會(huì)自動(dòng)轉(zhuǎn)換為字符串。
-
在通過對象字面量定義對象時(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)建對象強(qiáng)調(diào)該對象僅是一個(gè)可變的hash映射，而不是從對象中提取的屬性或方法。
屬性名和變量名相同時(shí)可簡寫
var obj = { name: name, age: age }; // ES2015中，屬性名和變量名相同時(shí)可簡寫為： var obj = { name, age };
擴(kuò)展屬性
// 擴(kuò)展屬性，ES2018新特性，可用于克隆或合并對象，淺拷貝，不包括原型 var obj2 = { ...obj3 };
以字面量方式創(chuàng)建的對象屬性默認(rèn)是可寫，可枚舉和可配置的
對象的調(diào)用
對象里面的屬性調(diào)用 : 對象.屬性名 ，這個(gè)小點(diǎn) . 就理解為“ 的 ”
對象里面屬性的另一種調(diào)用方式 : 對象['屬性名']，注意方括號里面的屬性必須加引號，我們后面會(huì)用 ? 對象里面的方法調(diào)用：對象.方法名() ，注意這個(gè)方法名字后面一定加括號
var obj1 = { dogName: '可可', type: '阿拉斯加犬', age: 5 + '歲', color: 'red', skill: function () { console.log('技能' + ':' + 'bark' + ',' + 'showFilm'); } } console.log(obj1.dogName); obj1.skill();
說明：
對象的原型默認(rèn)為Object.prototype。通過定義屬性__proto__（只能使用冒號標(biāo)記的屬性定義）的值來變更原型。只有給出的值是對象或null，對象的原型才會(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 // 不使用冒號標(biāo)記的屬性定義，不會(huì)變更對象的原型，只是名字為__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
【
