הבנת המתודה ()hasOwnProperty ב- JavaScript

המתודה ()hasOwnProperty ב- JavaScript היא חיונית להבחנה בין מאפיינים שנמצאים בבעלות האובייקט לבין מאפיינים (properties) שירש משרשרת ה Prototype שלו. מתודה זו בודקת אם מאפיין מסוים הוא מאפיין ישיר של האובייקט ולא מאפיין שעבר בירושה, ומחזירה ערך בוליאני בהתאם.

עיינו בקישור הבא אם ברצונכם להבין את הבסיס של אובייקטים ב-JavaScript

כיצד עובדת המתודה ()hasOwnProperty

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

דוגמה פשוטה 1: בדיקת מאפיינים של אובייקט

const car = {
  make: 'Toyota',
  model: 'Corolla'
};

console.log(car.hasOwnProperty('make'));  // Output: true
console.log(car.hasOwnProperty('year'));  // Output: false

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

דוגמה פשוטה 2: שימוש ב- hasOwnProperty בתוך פונקציה

function hasProperty(obj, prop) {
  return obj.hasOwnProperty(prop);
}

const bike = {
  brand: 'Trek',
  type: 'mountain'
};

console.log(hasProperty(bike, 'brand'));  // Output: true
console.log(hasProperty(bike, 'price'));  // Output: false

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

דוגמה מורכבת: סינון מאפיינים בירושה

בדוגמה זו נלמד כיצד לסנן מאפיינים ישירים של אובייקט ממאפיינים שירש מהפרוטוטייפ שלו.

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.start = function() {
  return 'Starting...';
};

const car = new Vehicle('Car');
car.make = 'Toyota';
car.model = 'Corolla';

for (let prop in car) {
  if (car.hasOwnProperty(prop)) {
    console.log('Own property:', prop);
  } else {
    console.log('Inherited property:', prop);
  }
}
// Output: Own property: type
// Output: Own property: make
// Output: Own property: model
// Output: Inherited property: start

בואו נבחן דוגמה חיה

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

הפונקציה בודקת אם המאפיין שהוזן הוא מאפיין ישיר של האובייקט sampleObject (ולא מאפיין בירושה) ומציגה את התוצאה בפסקה עם המזהה (ID) בשם "result".

HTML:

<input type="text" id="propertyName" placeholder="Enter property name">
<button onclick="checkProperty()">Check Property</button>
<p id="result"></p>

JavaScript:

const sampleObject = {
    name: 'Sample',
    value: 100
};

function checkProperty() {
    const propName = document.getElementById('propertyName').value;
    const hasProp = sampleObject.hasOwnProperty(propName);
    document.getElementById('result').textContent = hasProp ?
        `${propName} is an own property.` :
        `${propName} is not an own property.`;
}

תוצאה:

בדוגמה זו, המתודה hasOwnProperty() תחזיר true עבור המאפיינים "name" ו-"value" כאשר יוזנו לשדה הקלט. כל שם מאפיין אחר שאינו "name" או "value" יחזיר false, ויצביע על כך שאינו מאפיין ישיר של sampleObject.

סיכום

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