JavaScript基礎知識：對象

When beginners hear the word “object” in programming – often in the context of terms like object-oriented programming or Document Object Model – they tend to freeze up. But objects are actually very easy to understand.

當初學者在程式設計中聽到“對象”一詞時(通常是在面向對象程式設計或文檔對象模型之類的術語中)，他們傾向于當機。 但是對象實際上很容易了解 。

While they are part of most modern programming languages, here I’ll be discussing objects in the particular context of JavaScript. If you can understand objects, you can understand the core of JavaScript.

盡管它們是大多數現代程式設計語言的一部分，但在這裡我将讨論JavaScript特定上下文中的對象。 如果您能了解對象，那麼您就可以了解JavaScript的核心。

Let’s consider the object concept as a tangible physical thing: a coffee cup. A cup object has properties:

讓我們将對象概念視為有形的實體事物：咖啡杯。 杯子對象具有以下屬性 ：

• color

  color

• height

  height

• temperature

  temperature

• filled

  filled

Many of those properties will have values:

這些屬性中的許多将具有值 ：

• white

  white

• 5

  (centimeters)

  5

  (厘米)

• 35

  (degrees Celcius)

  35

  (攝氏度)

• true

  true

In JavaScript, almost everything you interact with is an object. Let’s make a virtual coffee cup object in your browser’s console. Objects are simply special forms of variables:

在JavaScript中，您與之互動的幾乎所有東西都是一個對象。 讓我們在浏覽器的控制台中建立一個虛拟咖啡杯對象。 對象隻是變量的特殊形式：

var coffeecup = new Object();
           

Or shorter, and preferably:

或更短，最好：

var coffeecup = {};
           

Now let’s describe the properties of the coffee cup, attaching values at the same time:

現在讓我們描述咖啡杯的屬性，同時附加值：

coffeecup.color = 'white';
coffeecup.radius = 5;
coffeecup.temperature = 35;
coffeecup.filled = true;
           

Alternatively, you could create the object together with its properties and values in a single statement:

或者，您可以在單個語句中建立對象及其屬性和值：

var coffeecup = { 
	color: 'white',
	radius: 4,
	temperature: 35,
	filled: true
}
           

Note that properties can take different kinds of values: we’ve given color a text string, radius and temperature numeric values, and used a boolean value in filled.

請注意，性能可以采取不同類型的值：我們已經給顔色的文本字元串， 半徑和溫度數值，并用于填充一個布爾值。

You can think of object properties as characteristics of that object. More abstractly, the coffee cup’s properties and their values might be considered a table of data:

你可以把對象的屬性為對象的特征 。 更抽象地，咖啡杯的屬性及其值可以視為資料表：

coffeecup object properties

property	color	height	temperature	filled
value	white	5	35	true

咖啡杯對象屬性

屬性	color	height	temperature	filled
值	white	5	35	true

To show what we’ve attached to the

coffeecup

object, use the console:

要顯示我們已附加到

coffeecup

對象的内容，請使用控制台：

console.log(coffeecup);
           

You can address the properties of

coffeecup

using dot notation:

您可以使用點表示法解決

coffeecup

的屬性：

coffeecup.color
           

Or with bracket notation:

coffeecup['color'];

或使用方括号表示法：

coffeecup['color'];

In bracket notation, objects are treated as associative arrays.

用方括号表示法，将對象視為關聯數組。

You can use either form of notation to address object properties except if the property name contains a dash. In that case, you must use bracket notation:

可以使用任何一種表示法來尋址對象屬性， 除非屬性名稱包含破折号。 在這種情況下， 必須使用括号表示法：

coffeecup['material-density']
           

As it is shorter and faster to write, dot notation is often preferred in JavaScript, but using it demands awareness of “gotchas” like this.

由于編寫起來更短，更快，是以在JavaScript中通常首選點符号，但使用它需要像這樣的“陷阱”意識。

Note that we can both read and write to most properties: we could paint a coffee cup a different color, change its temperature in a microwave, etc, by writing a new value to the appropriate property.

請注意，我們可以讀取和寫入大多數屬性：通過将新值寫入适當的屬性，我們可以為咖啡杯塗上不同的顔色，在微波爐中更改其溫度等。

In JavaScript, almost everything is an object: functions, arrays, dates, elements and more.

在JavaScript中，幾乎所有東西都是對象：函數，數組，日期，元素等。

Of course, working with a virtual coffee cup is rather limited: our virtual construction doesn’t represent anything real. Let’s change that.

當然，使用虛拟咖啡杯非常有限：我們的虛拟構造并不代表任何真實的東西。 讓我們改變它。

Make a simple HTML page: say a

<div>

element with a brief bit of paragraph text inside it:

制作一個簡單的HTML頁面：說一個

<div>

元素，其中帶有簡短的段落文本：

<div id="container"><p>Text content</div>
           

Using the console, we can look at the dozens of properties associated with the

div

element:

使用控制台，我們可以檢視與

div

元素關聯的數十個屬性：

document.getElementById("container").innerText;
           

Returns:

"Text content"

傳回：

"Text content"

document.getElementById("container").innerHTML
           

Returns:

"<p>Text content</p>"

傳回：

"<p>Text content</p>"

All of this has been obvious, things we already knew about the element. Let’s try something that’s not so obvious:

所有這些都是顯而易見的，對于元素我們已經知道了。 讓我們嘗試一些不太明顯的東西：

document.getElementById("container").offsetLeft;
           

The result is 8: the number of pixels from the left of the browser’s window to the left edge of the element’s box. In other words, the container object has, among many qualities, a

offsetLeft

property that has a current value of 8.

結果為8 ：從浏覽器視窗左側到元素框左側邊緣的像素數。 換句話說， 容器 對象具有許多品質，其中

offsetLeft

屬性的目前值為8 。

There’s much more that we can work with in objects, which I’ll explore in future articles.

我們可以在對象中使用更多功能，我将在以後的文章中進行探讨。

翻譯自: https://thenewcode.com/770/JavaScript-Fundamentals-Objects