--- title: Object-oriented JavaScript for beginners slug: Learn/JavaScript/Objects/Object-oriented_JS translation_of: Learn/JavaScript/Objects/Object-oriented_JS ---

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

לאחר שסיימנו עם עקרונות היסוד, כעת אנחנו נתמקד על- object-oriented JavaScript (OOJS) — מאמר זה נועד להעניק מבט בסיסי של תיאוריית object-oriented programming (OOP) ולאחר מכן נחקור כיצד JavaScript מחקה (מלשון חיקוי) מחלקות אובייקטים באמצעות פנקציה בנאית (constructor functions), וכיצד אנחנו יכולים ליצור ״מופעי״ אובייקטים

ידע מוקדם:	Basic computer literacy, a basic understanding of HTML and CSS, familiarity with JavaScript basics (see First steps and Building blocks) and OOJS basics (see Introduction to objects).
מטרה:	להבין את בסיס התיאוריה שעומדת מאחורי תכנות מונחה עצמים, וכיצד זה מתקשר ל- JavaScript ("everything is an object"), ולהבין כיצד ליצור constructors ו- object instances.

Object-oriented programming — הבסיס

לשם ההצלחה, ננסה ללהעניק לכם נקודת מבט מופשטת, מלמעלה, של מה זה בעצם תכנות מונחה עצמים - Object-oriented programming (OOP). אנחנו אומרים מופשט מכיוון ש-0000 יכול להיות מורכב מאוד ופירוט של כל התיאוריה רוב הסיכויים תבלבל אתכם. הרעיון הבסיסי של OOP הוא שאנחנו משתמשים באובייקטים על מנת לדמות דברים אמיתיים מהעולם האמיתי שנרצה לכלול בתוך התוכנית שלנו, ו/או להעניק דרך פשוטה לגשת לפונקציונליות מסויימת, שבדרכים אחרות היה פשוט בלתי אפשרי או מסובך מאוד.

אובייקטים יכולים להכיל מידע וקוד הקשורים זה לזה, אשר מייצדים מידע אודות הדבר שנאחנו מנסים לדמות, ופונקציונליות או התנהגות שאנחנו רוצים שיהיה לאובייקט שלנו. המידע של האובייקט, ולרוב גם הפונקציות שלו, יכולות להיות מאוחסות בצורה מסודרת - (המילה המקצועית היא encapsulated - בתוך האובייקט (וניתן לתת להם שמות שיהוו הפניה לאותם ערכים, ולפעמים זה נקרא namespace), וכך נהיה פשוט לבנות ולגשת אליהם. אובייקטים גם לרוב משמשים כמאחסני מידע שאנחנו יכולים לשלוח בקלות ברשת.

הגדרה של טמפלייט של אובייקט

ננסה לחשוב על תוכנית פשוטה אשר מציגה מידע על תלמידים ועל מורים בבית ספר. אנחנו נסתכל על דוגמא זו ועל תיאוריית oop באופן כללי, מבלי להתייחס לשפת תכנות מסויימת.

על מנת להתחיל, אנחנו נחזור לאובייקט Person מהמאמר הקוד אובייקטים - עקרונות יסוד, אשר מגדיר את המידע והפונקציונליות הגנריות של בן אדם, של person. יש הרבה דברים שאנחנו יכולים לדעת על אדם (כתובת, גובה, מידת נעליים וכד׳), אבל במקרה שלנו אנחנו מעונינים להראות את השם, גיל, מין תחומי עניין שלהם, ואנחנו רוצים שתאפשר לנו לכתוב הקדמה קצרה עליהם, בהתבסס על המידע שיש לנו ולאפשר לאותו אובייקט להגיד שלום בצורה כלשהי. זה בעצם נקרה abstraction — יצירת מודל פשוט של משהו מורכב יותר אשר מייצג את האספקטיים החשובים ביותר בדרך כזו שניתן לעבוד איתה בתוכנית שלנו ולצרכי התוכנית שלנו.

יצירת אובייקטים

מהמחלקה שלנו אנחנו יכולים ליצור מופעי אובייקט - object instances — אלו בעצם אובייקטים המכילים את המידע והפונקציונליות שהוגדרו ב-מחלקה. מהמחלקה Person שלנו, אנחנו יכולים ליצור כמה אנשים בפועל:

כאשר נוצר מופע אובייקט ממחלקה, ה- constructor function של אותה מחלקה מורץ על מנת ליצור את האובייקט החדש. תהליך זה של יצירת מופע אובייקט ממחלקה נקרא instantiation — ומופע האובייקט שנוצר, האובייקט שנוצר, אנו אומרים שהוא instantiated מהמחלקה

Specialist classes

במקרה שלנו אנחנו לא רוצים אנשים שנראים אותו דבר - אנחנו רוצים מורים וסטודנטים, אשר הם בעלי מאפיינים ספיצפיים של בני אדם. ב-OOP, אנחנו יכולים ליצור מחלקות חדשות בהתבסס על מחלקות קיימות - אלו נקראים - child classes והם יכולים לרשת, ירושה של מידע ומאפיינים של קלאס האב שלהם, כך שאנחנו יכולים להשתמש בפונקציונליות שמשותפת לכל האובייקטים באמצעות אותה הורשה, מבלי שנצטרף לכתוב אותה מחדש בכל פעם. כאשר אנחנו צריכים להעניק תכונה או פונקציונליות פרטנית לאובייקט, אנחנו יכולים להגדיר אותם על אותו אובייקט באופן פרטני.

זהו מאוד שימושי - מורים וסטודנטים חולקים מאפיינים בסיסיים כמו שם, גיל, מין כך שזה יהיה נוח אם נוכל להגדיר את המאפיינים הללו פעם אחת בלבד. אנחנו גם יכולים להגדיר מאפיינים דומים באופן נפרד, במחלקות שונות, כך שכל מאפיין שכזה יהיה ב-namespace אחר. לדוגמא,הברה של סטודנט יכולה להיות שונה מהברכה של מורה. כך לדוגמא, הברכה של סטודנט תהיה "Yo, I'm [firstName]" (e.g Yo, I'm Sam), בעוד הברכה של מורה תהיה "Hello, my name is [Prefix] [lastName], and I teach [Subject]." (e.g Hello, My name is Mr Griffiths, and I teach Chemistry).

לתשומת לב: המילה הרשמית לאפשרות לשכפל אובייקטים ולהחיל עליהם את אותה פונקציונליות נקראת polymorphism. רק למקרה ותהיתם

אנחנו יכולים ליצור מופעי אובייקטים חדשים מה-child classes. לדוגמא:

בהמשך המאמר, אנחנו נסתכל כיצד תיאורית oop באה לידי ביטוי ב-JavaScript.

Constructors ו- object instances

JavaScript משתמש בפונקציות מיוחדות שנקראות constructor functions על מנת להגדיר ול initialize אובייקטים ואת המאפיינים שלהם. זה שימושי מאוד מכיוון שאנחנו ניתקל בסיטואציות שבהן אנחנו לא יודעים כמה אובייקטים אנחנו נרצה או נצטרף ליצור. constructors מאפשרים לנו ליצור אובייקטים כמה שנרצה בדרך אפקטיבית, וך צירוף המידע והפונקציות שלהם ככל שנרצה.

נחקור כעת יצירה של מחלקות באמצעות constructors ויצירה של מופעי אובייקט מהם ב-JavaScript. ראשית, אנא צרו עותק של oojs.html

דוגמא פשוטה

נתחיל בכך שנסתכל כיצד אנחנו יכולים להגדיר person באמצעות פונקציה רגילה. הוסיפו את הפונקציה הזו לתוך אלמנט script :
```
function createNewPerson(name) {
  var obj = {};
  obj.name = name;
  obj.greeting = function() {
    alert('Hi! I\'m ' + obj.name + '.');
  };
  return obj;
}
```
כעת אנחנו יכולים ליצור person חדש באמצעות קריאה לפונקציה זו - נסו להזין אתהקוד הבא בקונסולה:
```
var salva = createNewPerson('Salva');
salva.name;
salva.greeting();
```
זה עובד בצורה טובה, אבל קצת מפותלת. אם אנחנו יודעים שאנחנו רוצים ליצור אובייקט, מדוע אנחנו צריכים ליצור במפורש אובייקט ריק בהתחלה ולהחזיר אותו? למרבה המזל, javascript מעניקה לנו קיצור שימושי פונקציה בנאית- constructor functions - בואו ניצור אחת יחד:

החליפו את הפונקציה הקודמת עם הפונקציה הנוכחית:

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

ה-constructor function היא הגרסה של javascript למחלקות. שימו לב שיש לה את כל המאפיינים שאנחנו נצפה לראות בפונקציה, למרות שהיא לא מחזירה שום דבר או יוצרת אובייקט באופן מפורש - היא בסך הכל מגדירה מפתחות ומתודות. אנו משתמשים במילה השמורה this — זה בעיקרון אומר שבכל פעם שנוצר מופע אובייקט, ה- name property יהיה שווה לערך של name value שהועבר לתוך ה- constructor, והמתודה greeting() תשתמש באותם ערכים שהועברו ל- constructor.

שימו לב:שם של constructor function בדרך כלל מתחיל עם אות גדולה - זו מוסכמה מקובלת על מנת לזהות בקלותconstructor functions קוד שלנו.

אז כיצד אנחנו קוראים ל-constructor function על מנת ליצור אובייקטים?

הוסיפו את השורות הבאות מתחת לקוד הקודם שהוספתם:
```
var person1 = new Person('Bob');
var person2 = new Person('Sarah');
```
שמרו ורעננו את הדף ולאחר מכן הזינו את השורות הבאות בקונסולה:
```
person1.name
person1.greeting()
person2.name
person2.greeting()
```

אתם תראו שאנחנו יצרנו שני אובייקטים חדשים, כאשר כל אחד מהם נשמר תחת שם אחר — כאשר אנחנו רוצים לגשת למפתחות ולמתודות שלהם, אנחנו צריכים להתחיל עם קריאה ל person1 או ל- person2; הפונקציונליות המאוחסנת בהם ארוזה בצורה מסודרת כך שהיא תתנגש עם פונקציונליות אחרת. יחד עם זאת, יש להם את אותו מפתח name ואת אותה מתודת greeting() שזמינה עבורה. שימו לב שהם משתמשים בערך של ה - name שניתן להם כאשר הם נוצרו. זו אחת מהסיבות מדוע זה מאוד חשוב להתשמש במילה this, כך שהם ישתמשו בערכים שלהם ולא בערכים אחרים.

נסתכל שוב על הקריאות ל- constructor שוב:

var person1 = new Person('Bob');
var person2 = new Person('Sarah');

בכל אחת מהקריאות, המילה השמורה new משמשת על מנת להגיד לדפדפן שאנחנו רוצים ליצוא מופע אובייקט חדש, ולאחר מכן יש את שם הפונקציה עם הפרמטרים הרלוונטיים בתוך הסוגריים והתוצאה של אותה פונקציה, של אותה constructor function, מאוחסנת בתוך משתנה - זה דומה מאוד לאיך שפונקציה רגילה מופעלת או לאיך שקוראים לפונקציה רגילה. כל מופע אובייקט שכזה נוצר בהתאם להגדרה של ה-constructor function:

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

לאחר שהאובייקטים החדשים נוצרו, המשתנים person1 ו- person2 מכילים את האובייקטים הבאים:

{
  name: 'Bob',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

{
  name: 'Sarah',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

שימו לב שכאשר אנחנו קוראים ל-constructor function שלנו, אנחנו מגדירים את המתודה greeting() בכל פעם - משהו שאינו אידיאלי. על מנת להימנע מכך, אנחנו נגדיר פונקציות שהוא בתבנית האב - אנו נגע בנושא זה בהמשך.

יצירת ה-constructor הסופי שלנו

הדוגמא שהסברנו למעלה הייתה דוגמא פשוטה שנועדה רק לסבר לנו את האוזן. כעת, ניצור את ה-constructor function code>Person() הסופי שלנו.

הסירו את הקוד שהכנסתם עד עכשיו, והוסיפו את ה - constructor הזה - הוא בעצם אותו דבר כמו בדוגמא למעלה, רק קצת יותר מורכב: :

function Person(first, last, age, gender, interests) {
  this.name = {
     first : first,
     last : last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
}

כעת, הוסיפו את הקוד הבא מתחת, על מנת ליצור מופעי אובייקט מ-constructor:
```
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
```

אתם תראו שאנחנו יכולים לגשת לכל אחד מהמפתחות והמתודות בדיוק כפי שיכלנו לפני כן - נסו להזין את הקוד הבא בקונסולה:

person1['age']
person1.interests[1]
person1.bio()
// etc.

לתשומת לב: אם אתם נתקלים בבעיות, נסו להשוות את הקוד שלכם לקוד שלנו - oojs-class-finished.html או ראו את דף האינטרנט.

תרגולים נוספים

על מנת להתחיל, הוסיפו כמה אובייקטים נוספים משלכם, ונסו לקבל או לקבוע את המידע שלהם.

בנוסף, יש מספר בעיות עם המתודה bio() — הפלט שלה תמיד יציג פלט בלשון זכר, למרות ש-person הוא נקבה. והמתמודה גם תציג רק שני תחומי עניין, אפילו אם בתוך המערך interests יש יותר תחומי עניין. האם אתם יכולים לתקן את זה ב-constructor שלנו? אם יכולים לשים כל קוד בתוך הconstructor (אתם כנראה תצרו משפטי תנאי ולולאה). חשבו כיצד המשפטים אמורים להיראות בצורה שונה כאשר מדובר במין שונה ומה עושים כאשר מספר תחומי העניין הוא 1, 2 או יותר מ-2.

לתשומת לב: אם אתם נתקעים, ראו את התשובה ב- GitHub repo או בדף היאנטרנט) — אך נסו בעצמכם לפני כן

דרכים נוספות ליצירת מופעי אובייקט - ליצירת אובייקטים חדשים

עד עכשיו ראינו שתי דרכים ליצירת מופעי אובייקט — הצהרה על אובייקט ליטראלי, ובאמצעות שימוש ב - constructor function (כפי שראינו למעלה).

ישנם דרכים נוספים ואנחנו נרצה להציג לכם אותם על מנת שתכירו אותם במידה ותיתקלו בהם בהמשך הדרך

The Object() constructor

ראשית, אתם יכולים לעשות שימוש ב constructor Object() על מנת ליצור אובייקט חדש. כן, גם אובייקטים גנריים יש להם constructor, אשר יוצר אובייקט ריק.

נסו להזין את הקוד הבא לתוך הקונסולה:
```
var person1 = new Object();
```
קוד זה מאחסן בעצם אובייקט ריק בתוך המשתנה person1 .אנחנו יכולים להוסיף מפתחות ומתודות לאובייקט זה באמצעות שימוש ב- dot או dot; נסו להזין את הדוגמאות הבאות בקונסולה:
```
person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
};
```
אתם גם יכולים להעביר object literal ל- Object() constructor כפרמטר, על מנת למלא מראש את הפרופ׳ והמתודות: נסו להזין את הקוד הבא בקונסולה:
```
var person1 = new Object({
  name: 'Chris',
  age: 38,
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});
```

שימוש במתודת create()

Constructors יכולים לעזור להעניק סדר לקוד שלנו - אנחנו יכולים ליצור את הconstructors במקום אחד ואז ליצור מופעים שלהם כמה שנרצה, במקום אחר, וזה יהיה ברור מאיפה הם נוצרוץ

יחד עם זאת, ישנם מפתחים אשר מעדיפים ליצור מופעי אובייקט מבלי ליצור תחילה constructors, במיוחד אם אתם יוצרים רק מספר קטם של מופעי אובייקט. ל-JavaScript יש מתודה מובנת שנקראת create() אשר מאפשרת לנו לעשות זאת. עם מתודה זו, אנחנו יכולים ליצור אובייקט חדש, בהתבסס על אובייקט קיים.

העלו את התרגיל שסיימתם בתרגול הקודם לדפדפן והוסיפו את הקוד הבא לקונסולה: :
```
var person2 = Object.create(person1);
```
כעת נסו להזין את הקוד הבא בקונסולה:
```
person2.name
person2.greeting()
```

אתם תראו ש-person2 נוצר בהתבסס על person1 - יש לו את אותם פרופ׳ ומתודות שזמינות עבורו.

הגבלה אחת שיש בשימוש עם מתודת create() היא שדפדפן IE8 does לא תומך בה. אז constructors יכולים להיות דרך רלוונטם במידה ואתם צריכים לתמוך בגרסה זו.

אנו נחקור את המתודה create() בפרטי פרטים בהמשך הקורס.

לסיכום

מאמר זה העניק לכם מבט מופשט על תיאוריית פיתוח מונחה עצמים - זה לא הסיפור המלא כמובן, אבל זה נועד לתת לכם את הרעיון שאיתו אנחנו ממשיכים. בנוסף, התחלנו לגלות כיצד אנחנו יכולים ליצור מופעי אובייקט, או אובייקטים חדשים, בדרכים שונות.

במאמר הבא אנחנו נחקור את נושא JavaScript object prototypes.