JavaScript中的hasOwnProperty＆Object.keys無法正常工作

Question

目的：僅繼承對象鍵，而不繼承

兩個構造函數：Person和Teacher。 教師正在使用原型繼承來繼承屬性。

身高和體重是人與老師之間繼承的兩個關鍵。

據我了解，... in遍歷對象中的所有鍵以及繼承的鍵。 因此，hasOwnProperty用於過濾僅在Teacher對象內可用的屬性。 但是，代碼輸出的所有屬性（包括身高和體重）都不應該包含。

 /* eslint-disable no-console */ function Person(first, last, age, gender, interests, weight, height) { this.name = { first, last, }; this.age = age; this.gender = gender; this.interests = interests; this.weight = weight; this.height = height; } Person.prototype.greeting = () => { console.log(`Hi! I'm ${this.name.first}.`); }; function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gender, interests); this.subject = subject; } Teacher.prototype.greeting = () => { let prefix; if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { prefix = 'Mr.'; } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { prefix = 'Mrs.'; } else { prefix = 'Mx.'; } console.log(`Hello. My name is ${prefix} ${this.name.last}, and I teach ${this.subject}.`); }; Teacher.prototype = Object.create(Person.prototype); Object.defineProperty(Teacher.prototype, 'constructor', { value: Teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true, }); const teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics'); for(var key in teacher1){ if(teacher1.hasOwnProperty(key)){ console.log(key); } } // Output: name, age, gender, interests, weight, height, subject // weight and height should not be here 

Answer 1

teacher1的name ， age等屬性是自己的屬性。 他們不是從繼承teacher1的原型（ Teacher.prototype ）或它的原型（ Person.prototype ）。 盡管是“ Person來分配它們，但它們仍然是自己的屬性。 this在呼叫Person從Teacher是將被分配給對象teacher1 ，所以

this.age = age;

...使age成為teacher1 1的財產。

一旦在對象上創建了屬性，就無法知道是由哪個函數創建的。

---

您的代碼還有其他幾個問題：

1. 您正在將箭頭功能分配給Teacher.prototype.greeting 。 不要將箭頭函數用於將要繼承的方法， this將無法正確設置。 幾個相關的問題，其答案可能有用：

   • ES6對象中的方法：使用箭頭功能
   • JavaScript中“ =>”（等於或大於的箭頭）的含義是什么？

2. 您將分配給Teacher.prototype.greeting ，然后稍后完全替換Teacher.prototype （ Teacher.prototype = Object.create(Person.prototype); ）。 因此，您將沒有greeting方法。

3. 如果您按Teacher.prototype 替換 Teacher.prototype上的對象， Teacher.prototype務必確保其constructor屬性正確：

    Teacher.prototype = Object.create(Person.prototype); Teacher.prototype.constructor = Teacher; // <=== 

但是 ：由於您使用的ES2015 +功能呢（箭頭功能，模板文字，...），你可以讓這一切都通過使用更簡單的 class語法 。