JS中如何利用字面量創建對象

本篇內容介紹了“JS中如何利用字面量創建對象”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

什么是字面量

字面量（literal）是表達一個固定值的表示法，又叫常量，用來為變量賦值時的常數量

通俗的理解，字面就是所見即所得，js 程序執行到代碼中的字面量，會立即知道它是什么類型的數據，值是多少

可以用于表示固定值，比如：數字、字符串、undefined、布爾類型、對象的字面值等

對象字面量創建對象

對象字面量的方式是最常用的創建對象的方式之一，它用內含屬性的花括號{...}快速創建對象。

var 對象名={ 
    .....
};

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

示例：

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

• 在這個例子中，左邊的花括號（{）表示對象字面量的開始，因為它出現在了表達式上下文（expression context）中。

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

• 賦值操作符（=）表示后面是一個值，所以左花括號在這里表示一個表達式的開始。

• 同樣的花括號，如果出現在一個語句上下文（statement context）中，例如跟在 if 語句條件的后面，則表示一個語句塊的開始。

• 例子中定義了 name屬性，之后是一個冒號，再后面是這個屬性的值（name:"Jack"）。在對象字面量中，使用逗號來分隔不同的屬性，因此”Jack”后面是一個逗號。但是，在 age屬性的值 10 的后面不能添加逗號，因為 age 是這個對象的最后一個屬性。在最后一個屬性后面添加逗號，會在 IE7 及更早版本和Opera 中導致錯誤。

• 不要忘記結束大括號右邊的（;）

對象字面量的值的類型

對象字面量的值可以是任何數據類型包括數組字面量，函數，嵌套的對象字面量

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

• 如果有任何的語法規則被打破，如缺少逗號或冒號或大括號，將會觸發JavaScript錯誤。

• 瀏覽器的錯誤信息在指出對象字面量語法錯誤的位置一般有幫助，但他們不一定會在指出錯誤的性質完全準確。

在使用對象字面量時，屬性名也可以用字符串

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

• 上述例子會創建一個對象，包含三個屬性，但這里的數值屬性名會自動轉換為字符串。

• 在通過對象字面量定義對象時，實際上不會調用Object構造函數（Firefox 2及更早版本會調用Object構造函數；但Firefox3之后就不會了）
  這是因為字面量法創建對象強調該對象僅是一個可變的hash映射，而不是從對象中提取的屬性或方法。

屬性名和變量名相同時可簡寫

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

// ES2015中，屬性名和變量名相同時可簡寫為：
var obj = { name, age };

擴展屬性

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

以字面量方式創建的對象屬性默認是可寫，可枚舉和可配置的

對象的調用

對象里面的屬性調用 : 對象.屬性名 ，這個小點 . 就理解為“ 的 ”

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

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

說明：

對象的原型默認為Object.prototype。通過定義屬性__proto__（只能使用冒號標記的屬性定義）的值來變更原型。只有給出的值是對象或null，對象的原型才會被設置為給出的值，否則原型不會改變。

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
// 不使用冒號標記的屬性定義，不會變更對象的原型，只是名字為__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中如何利用字面量創建對象”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！