אב טיפוס של JavaScript מוסבר בדוגמאות

אב טיפוס

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

אובייקט אב טיפוס

לשם הבהירות, נבחן את הדוגמה הבאה:

function Point2D(x, y) { this.x = x; this.y = y; }

כאשר Point2Dמצהירים על פונקציה, prototypeייווצר עבורה מאפיין ברירת מחדל בשם (שימו לב שב- JavaScript פונקציה היא גם אובייקט). prototypeהנכס הוא אובייקט המכיל constructorנכס והערך שלה הוא Point2Dפונקציה: Point2D.prototype.constructor = Point2D. וכאשר אתה מתקשר Point2Dעם newמילת מפתח, אובייקטים שנוצרו לאחרונה ירשו את כל המאפייניםPoint2D.prototype . כדי לבדוק את זה, אתה יכול להוסיף שיטה בשם moveלתוך Point2D.prototypeכדלקמן:

Point2D.prototype.move = function(dx, dy) { this.x += dx; this.y += dy; } var p1 = new Point2D(1, 2); p1.move(3, 4); console.log(p1.x); // 4 console.log(p1.y); // 6

Point2D.prototypeנקרא אובייקט אב טיפוס או טיפוס של p1אובייקט עבור כל אובייקט אחר נוצר עם new Point2D(...)תחביר. אתה יכול להוסיף מאפיינים נוספים Point2D.prototypeלהתנגדות כרצונך. הדפוס הנפוץ הוא הצהרה על שיטות Point2D.prototypeותכונות אחרות יוכרזו בתפקוד קונסטרוקטור.

אובייקטים מובנים ב- JavaScript בנויים בצורה דומה. לדוגמה:

• אב טיפוס של אובייקטים שנוצרו עם new Object()או {}תחביר הוא Object.prototype.
• אב טיפוס של מערכים שנוצרו עם new Array()או []תחביר הוא Array.prototype.
• וכך הלאה עם חפצים מובנים אחרים כגון Dateו RegExp.

Object.prototypeעוברת בתורשה לכל האובייקטים ואין לו אב-טיפוס (האב-טיפוס שלו null).

שרשרת אב-טיפוס

מנגנון שרשרת האב-טיפוס פשוט: כשאתה ניגש למאפיין pעל אובייקט obj, מנוע JavaScript יחפש במאפיין זה בתוך objאובייקט. אם המנוע לא מצליח לחפש, הוא ממשיך לחפש באב-טיפוס של objהאובייקט וכן הלאה עד להגיע אליו Object.prototype. אם לאחר סיום החיפוש, ולא נמצא דבר התוצאה תהיה undefined. לדוגמה:

var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

בקטע הקודם, ההצהרה var obj2 = Object.create(obj1)תיצור obj2אובייקט עם obj1אובייקט אב-טיפוס . במילים אחרות, obj1הופך לאב-טיפוס של obj2במקום Object.prototypeכברירת מחדל. כפי שאתה יכול לראות, bהוא לא רכוש של obj2, אתה עדיין יכול לגשת אליו באמצעות שרשרת האב-טיפוס. עבור cנכס, לעומת זאת, אתה מקבל undefinedערך מכיוון שלא ניתן למצוא אותו ב- obj1ו- Object.prototype.

שיעורים

ב- ES2016, כעת נשתמש Classבמילת המפתח, כמו גם בשיטות שהוזכרו לעיל כדי לתפעל prototype. JavaScript Classמושך מפתחים מרקע OOP, אך למעשה הוא עושה את אותו הדבר כמו לעיל.

class Rectangle { constructor(height, width) { this.height = height this.width = width } get area() { return this.calcArea() } calcArea() { return this.height * this.width } } const square = new Rectangle(10, 10) console.log(square.area) // 100

זה בעצם אותו הדבר כמו:

function Rectangle(height, width) { this.height = height this.width = width } Rectangle.prototype.calcArea = function calcArea() { return this.height * this.width }

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

מידע נוסף על אב טיפוס של JS:

• כל מה שאתה צריך לדעת כדי להבין את האב-טיפוס של JavaScript