path: root/files/he/learn/javascript/objects/basics/index.html

---
title: JavaScript object basics
slug: Learn/JavaScript/Objects/Basics
translation_of: Learn/JavaScript/Objects/Basics
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>

<p class="summary">במאמר בזה, אנחנו נסתכל על עקרונות הסינטקס הבסיסים של אובייקטים ב-JavaScript, ונבקר בחלק ממאפייניה של השפה שנתקלנו בה בעבר, ונבין כי חלק ממאפיינים אלו הם בעצם אובייקטים.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>).</td>
  </tr>
  <tr>
   <th scope="row">מטרה:</th>
   <td>הבנת התיאוריה הבסיסית שעומדת מאחורי תכנות מונחה עצמים, כיצד זה מתקשר ל-JavaScript (״רוב הדברים הם אובייקטים״) והבנה כיצד ניתן לעבוד עם אובייקטים ב-JavaScript.</td>
  </tr>
 </tbody>
</table>

<h2 id="Object_-_אובייקטים_-_עקרונות_יסוד">Object - אובייקטים - עקרונות יסוד</h2>

<p>אובייקט הוא אוסף של מידע או פונקציונליות (בדרך מכיל מספר של מתשנים ופונקציות, אשר נקראים - מאפיינים (properties) ו-מתודות (Methodes) כאשר ה נמצאים בתוך אובייקט). נסתכל על דוגמא על מנת להמחיש את הנושא.</p>

<p>על מנת להתחיל, הכינו עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. קובץ זה מכיל אלמנט של {{HTMLElement("script")}} על מנת שבתוכו נכתוב את הקוד שלנו. אנחנו נשתמש בתצורה הזו על מנת להבין את הסינטקס הבסיסי של אובייקטים. יד עם קובץ זה, פתחו את <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a>.</p>

<p>כמו בהרבה דברים ב-JavaScript, יצירת אובייקט לרוב מתחילים עם הגדרת ואתחול של משתנה. נסו להכניס את הקוד הבא לתוך קוד ה-JavaScript שבקובץ ולאחר מכן שמרו ורעננו את הדף:</p>

<pre class="brush: js notranslate">const person = {};</pre>

<p>כעת פתחו את הקונסולה בדפדפן והזינוו <code>person</code> בתוך הקונסולה, ולאחר מכן לחצו על , <kbd>Enter</kbd>/<kbd>Return</kbd>. אתם אמורים לקבל תוצאה שנראית כך:</p>

<pre class="brush: js notranslate">[object Object]
Object { }
{ }
</pre>

<p>מזל טוב, הרגע יצרתם את האובייקט הראשון שלכם. יחד עם זאת, זהו אובייקט ריק, אז אין יותר מדי מה לעשות איתו. נעדכן את האובייקט שלנו בתוך הקובץ כך שייראה בתצורה הזו:</p>

<pre class="brush: js notranslate">const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  gender: 'male',
  interests: ['music', 'skiing'],
  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
};
</pre>

<p>לאחר שמירה ורענון של הדף, נסו להכניס את השורות הבאות לתוך הקונסולה:</p>

<pre class="brush: js notranslate">person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()</pre>

<p>כעת יש לנו מידע ופונקציונליות בתוך האובייקט שלנו, ואנחנו יכולים לגשת אליהם באמצעות סינטקס פשוט:</p>

<div class="note">
<p><strong>לתשומת לב</strong>: אם אינכם מצליחים לגרום לכך לעבוד, נסו להשוות אל מול הקובץ שלנו <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> או ראו את <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html"> דף האינטרנט ופתחו את הקונסולה בדף זה</a></p>
</div>

<p>אובייקט מורכב ממספר רכיבים, כאשר לכל רכיב יש שם   (<code>name</code> ו- <code>age</code> למעלה), וכן יש לכל רכיב value (e.g. <code>['Bob', 'Smith']</code> ו- <code>32</code>). כל צמד של שם/ערך חייב להיות מופרד באמצעות פסיק , והשם והערך בכל צמד חייבים להיות מופרדים עם :. הסינטקס תמיד ייראה בתבנית הזו:</p>

<pre class="brush: js notranslate">const objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};</pre>

<p>הערך של אובייקט יכול להיות כל דבר - במקרה שלנו, האובייקט person, יש לנו מחרוזת, מספר, שני מערכים, ושתי פונקציות. ארבעת הצמדים הראשונים הם פריטי מידע והם נקראים כ-properties של האובייקט. שני הצמדים האחרונים אלו פונקציות שמאפשרות לאובייקט לעשות משהו עם המידע הזה, והם נקראים ה-methods של האובייקט.</p>

<p>אובייקט כמו זה נקרא <strong>object literal</strong> — אנחנו באופן ליטראלי )מפורש) יצרנו את האובייקט והתוכן שלו. זה בניגוד לאובייקטים שנוצרו ממחלקות (classs) שאשר נראה בהמשך.</p>

<p>זה נפוץ מאוד ליצור אובייקט באמצעות <strong>object literal</strong> כאשר אנחנו רוצים להעביר סדרה של פריטי מידע קשורים ובמבנה מסויים, לדוגמא, שליחת בקשה לשרת לצורך השמה במאגר המידע. שליחה של אובייקט יחיד היא יעילה יותר מאשר שליחה של כמה פריטי מידע בנפרד, וזה קל יותר לעבוד עם אובייקט מאשר עם מערך, כאשר אנחנו רוצים לזהות כל פריט באמצעות השם שלךו.</p>

<h2 id="Dot_notation_שימוש_בנקודה-">Dot notation שימוש בנקודה-</h2>

<p>למעלה, אנחנו יכולים לגשת למתודות ולפרופ׳ של האובייקט באמצעות <strong>dot notation</strong>. שם האובייקט - person - משמש כ-<strong>namespace</strong> - הוא חייב להיות מוכנס ראשון, על מנת לקבל גישה לכל מה שמוכס - <strong>encapsulated</strong> בתוך האובייקט. לאחר מכן אנחנו רושמים נקודה <code>.</code> ואז את הפריט מידע שאנחנו רוצים לגשת אליו - זה יכול שם של פרופ׳ מסויים, או לקרוא לאחת מהמתודות של האובייקט. לדוגמא:</p>

<pre class="brush: js notranslate">person.age
person.interests[1]
person.bio()</pre>

<h3 id="Sub-namespaces">Sub-namespaces</h3>

<p>זה אפילו אפשרי ליצור אובייקט כערך מסויים של אובייקט אחר. כך לדוגמא, נסו לשנות את ערך הפרופ׳ name מהקוד הבא:</p>

<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre>

<p>לקוד זה:</p>

<pre class="brush: js notranslate">name : {
  first: 'Bob',
  last: 'Smith'
},</pre>

<p>כאן אנחנו בעצם יצרנו <strong>sub-namespace</strong>. זה אולי נשמע מורכז, אבל זה לא - על מנת לגשת לפריטים אלו, אנחנו פשוט צריכים להשתמש בעוד נקודה <code>.</code>. נסו להזין את הקוד הבא בקונסולה:</p>

<pre class="brush: js notranslate">person.name.first
person.name.last</pre>

<p><strong>חשוב</strong>: לאחר שינוי זה אתם צריכים גם לשנות במתודות את צורת הכתיבה לאור כך ששינינו את הערך ממערך לאובייקט</p>

<pre class="brush: js notranslate">name[0]
name[1]</pre>

<p>לתצורה הבאה:</p>

<pre class="brush: js notranslate">name.first
name.last</pre>

<p>אחרת המתודות לא יעבדו.</p>

<h2 id="Bracket_notation_-_שימוש_בסוגריים_מרובעות">Bracket notation - שימוש בסוגריים מרובעות</h2>

<p>יש דרך נוספת לגשת לפרופ׳ של האובייקט - באמצעות שימוש בסוגריים מרובעות. במקום הקוד הבא:</p>

<pre class="brush: js notranslate">person.age
person.name.first</pre>

<p>אנחנו יכולים להשתמש בקוד זה:</p>

<pre class="brush: js notranslate">person['age']
person['name']['first']</pre>

<p>זה אמנם נראה מאוד דומה לדרך שבה אנחנו ניגשים לאיברים במערך, ובעיקרון זה אותו דבר - אך במקום להשתמש במספר אינדקס על מנת לבחור איבר מסויים, כפי שנאחנו עושים במערך, אנחנו משתמשים בשם המקושר לכל ערך. זה לא פלא שלפעמים אובייקטים נקראים <strong>associative arrays</strong> — they map strings to values in the same way that arrays map numbers to values.</p>

<h2 id="הגדרת_מפתחות_ומתודות_לאובייקט_-">הגדרת מפתחות ומתודות לאובייקט -</h2>

<p>עד עכשיו ראינו כיצד לאחזר או לגשת לפריטים באובייקט - אך אנחנו יכולים גם לקבוע או לעדכן את הערכים של אותם פריטים ואף ליצור מפתחות ומתודות חדשים, באמצעות הצהרה על אותו מפתח או מתודה שאנחנו רוצים לעדכן או קבוע - (באמצעות שימוש בנקודה או בסוגריים המרובעות) כך:</p>

<pre class="brush: js notranslate">person.age = 45;
person['name']['last'] = 'Cratchit';</pre>

<p>נסו להזין את השורות למעלה ואז לגשת לערכים ששיניתם באמצעות הקוד על מנת לראות השינוי:</p>

<pre class="brush: js notranslate">person.age
person['name']['last']</pre>

<p>קביעת ערכים במפתחות או מתודות קיימים היא רק אחד מהדברים שניתן לעשות. כפי שאמרנו למעלה, ניתן גם ליצור מפתחות ומתודות חדשים לאותו אובייקט. נסו להזין את הקוד הבא בקונסולה:</p>

<pre class="brush: js notranslate">person['eyes'] = 'hazel';
person.farewell = function() { alert("Bye everybody!"); }</pre>

<p>וכעת בדקו את המפתח והמתודה החדשה כך:</p>

<pre class="brush: js notranslate">person['eyes']
person.farewell()</pre>

<p>היבט מאוד שימושי של שימוש בסוגריים מרובעות הוא שזה לא רק מאפשר לנו לקבוע את הערכים של אותו פריט בצורה דינאמית, אלא גם את השם של אותו פרופ׳ . נניח שאנחנו רוצים שהמשתמשים יוכלו לאחסן ערכים שונים בתוך המידע, באמצעות One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too. Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:</p>

<pre class="brush: js notranslate">let myDataName = nameInput.value;
let myDataValue = nameValue.value;</pre>

<p>We could then add this new member name and value to the <code>person</code> object like this:</p>

<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre>

<p>To test this, try adding the following lines into your code, just below the closing curly brace of the <code>person</code> object:</p>

<pre class="brush: js notranslate">let myDataName = 'height';
let myDataValue = '1.75m';
person[myDataName] = myDataValue;</pre>

<p>Now try saving and refreshing, and entering the following into your text input:</p>

<pre class="brush: js notranslate">person.height</pre>

<p>הוספת פרופ׳ לאובייקט באמצעות המתודה לעיל אינה אפשרית כאשר אנחנו משתמשים ב-dot notation, כי היא מקבלת רק ערך ליטרלי ולא ערך של משתנה מסויים שמצביע על אותו שם.</p>

<h2 id="מה_זה_this">מה זה "this"?</h2>

<p>אולי שמתם לב למשהו קצת מוזר בתוך המתודות שלנו. ראו את הדוגמא הבאה:</p>

<pre class="brush: js notranslate">greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}</pre>

<p>אתם בטח שואלים את עצמכם מה זה "this". המילה השומרה <code>this</code> מתייחסת לאובייקט שהקוד נכתב בתוכו - אז במקרה הזה המילה <code>this</code> שווה ל- <code>person</code>. אז מדוע לא לרשום <code>person</code> במקום? כפי שתראו במאמר שלנו בנושא<a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript מתחילים</a> - כאשר אנחנו יוצרים קונסטרקטורים, המילה <code>this</code> היא מאוד שימושית - היא תבטיח לנו תמיד שהערכים הנכונים מושמים בכל פעם שהמופעים של האובייקט פפפפפ נוצרים - גלומר - אובייקטים שנוצרו - 999999, יהיו בעלי ערכים שונים article, when we start creating constructors and so on, <code>this</code> is very useful — it will always ensure that the correct values are used when a member's context changes (e.g. two different <code>person</code> object instances may have different names, but will want to use their own name when saying their greeting).</p>

<p>ננסה לפשט ולהסביר באמצעות יצירת שני אובייקטים של person:</p>

<pre class="brush: js notranslate">const person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

const person2 = {
  name: 'Brian',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}</pre>

<p>במקרה הזה, <code>person1.greeting()</code> יציג "Hi! I'm Chris.";ואילו <code>person2.greeting()</code> יציג "Hi! I'm Brian.", למרות שהקוד של המתודה הוא זהה לחלוטין. כפי שאמרנו למעלה, <code>this</code> שוה בעצם לאובייקט שהקוד נמצא בתוכו - this לא משמעותי ושימושי כאשר אנחנו יוצרים אובייקטים באמצעות אובייקט ליטראלי, אבל הוא מאוד שימושי כאשר אנחנו יוצרים אובייקטים באופן דינאמי (באמצעות קונסטרקטורים לדוגמא). זה יהיה ברור יותר בהמשך הדרך, מבטיחים.</p>

<h2 id="השתמשנו_באובייקטים_לאורך_כל_הזמן_הזה">השתמשנו באובייקטים לאורך כל הזמן הזה</h2>

<p>ככל שאנחנו עוברים על הדוגמאות הללו, אתם בטח חושבים לעצמכם שכבר השתמשנו בעבר בתחביר של סימון נקודה, וזה נכון. בכל פעם שאנחנו השתמשנו בדוגמא אשר משתמשת ב-api מובנה של הדפדפן או באובייקט של javascript, אנחנו בעצם השתמשנו באובייקטים, מכיוון שאותם מאפיינים נבנו באמצעות שימוש במבנה זה למבנה של אובייקט שהסברנו עליו במודול זה, אמנם בצורה קצת יותר מורכבת מהדוגמאות שלנו כאן, אך במבנה דומה.</p>

<p>כאשר אנחנו משתמשים במתודות של מחרוזות כאלו לדוגמא:</p>

<pre class="brush: js notranslate">myString.split(',');</pre>

<p>אנחנו בעצם מתשמשים במתודה שזמינה לנו באמצעות האובייקט הגלובלי <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. בכל פעם שאנחנו יוצרים מחרוזת בקוד שלנו, מחרוזת זו באופן אוטומטי נוצרת כמופע/מודל/דוגמא של <code>String</code>, ולכן יש לה מספר מתודות ופרופ׳ אשר זמינות לה.</p>

<p>כאשר אנחנו ניגשים ל-<strong>d</strong>ocument <strong>o</strong>bject <strong>m</strong>odel אמצעות הקוד הבא:</p>

<pre class="brush: js notranslate">const myDiv = document.createElement('div');
const myVideo = document.querySelector('video');</pre>

<p>אנחנו מתשמשים במתודות שזמינות לנו עבור מופע של ה-<code><a href="/en-US/docs/Web/API/Document">Document</a></code>. לכל דף אינטרנט שמועלה, נוצר מופע של <code>Document</code>, אשר נקרא <code>document</code>והוא מייצג את כל המבנה, תוכן ומאפיינים נוספים של אותו דף (כמו לדוגמא ה-URL שלו). וזה אומר שיש לו מספר מתודות ומפתחות שזמינים עבור אותו מופע זה.</p>

<p>אותו הדבר בערך קורה עם הרבה אובייקטים מובנים/api שאנחנו משתשמים בהם — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, וכך הלאה.</p>

<p>שימו לב שbuilt in Objects/APIs לא תמיד יוצרים מופעים של אובייקט באופן אוטומטי. לדוגמא, ה- <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — אשר מאפשר לדפדפנים מודרניים להזרים התראות מערת - דורש מאיתנו לייצר מופע אובייקט חדש באמצעות קונסטקטור, עבור כל התראה שנרצה להזרים. נסו להזין את הקוד הבא בקוסולה: :</p>

<pre class="brush: js notranslate">const myNotification = new Notification('Hello!');</pre>

<p>אנו נסתכל על קונסרקטורים במאמרים הבאים.</p>

<div class="note">
<p><strong>לתשומת לב</strong>: זה מאוד שימושי לחשוב על הדרך שבה אובייקטים מתקשרים כ- <strong>message passing</strong> — כאשר אובייקט אחד צריך אובייקט אחד על מנת לבצע פעולה מסויימת, הוא לרוב ישלח הודעה לאותו אובייקט באמצעו תאחת המתודות שלו ויחכה לתגובה, שהיא בעצם ה- return value.</p>
</div>

<h2 id="לסיכום">לסיכום</h2>

<p>סיימנו את המאמר הראשונות שלנו בנושא אובייקטים ב-JavaScript - כעת, אמור להיות לכם בסיס כיצד לעבוד עם אובייקטים ב-JavaScript, כיצד ליצור אובייקטים פשוטים בעצמם. הבנו גם שאובייקטים הם מבנה מאוד שימוש לאחסון של מידע ופונקציונליות הקשורים זה בזה - אם היינו מנסים לשמור את כל המידע והפונקציונליות של האובייקט <code>person</code> כמשתנים ופונקציות נפרדות, זה היה מאתגר וקשה. אבוייקטים מאפשרים לנו לשמור את המידע בצורה בטוחה ונעולה בתוך חבילה משל עצמו.</p>

<p>במאמר הבא אנחנו נסתכל על תיאוריית object-oriented programming (OOP), וכיצד טכניקות שכאלו יכולות לשמש אותנו ב- JavaScript.</p>

<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>

<h2 id="במודול_זה">במודול זה</h2>

<ul>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Basics">אובייקטים - עקרונות יסוד</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript למתחילים</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Inheritance">הורשה ב-JavaScript</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/JSON">עבודה עם JSON data</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Object_building_practice">שיטות ליצירת אובייקטים</a></li>
 <li><a href="/he/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
</ul>