javascript - JS-Vererbung, wie man die Situation vermeidet, in der das Objekttypattribut des übergeordneten Klassenprototyps von der Unterklasse beeinflusst wird;

Question

parent ist die übergeordnete Klasse, child erbt parent. Wenn der Wert von sex der child-Instanz geändert wird, führt dies dazu, dass sex von parent und anderen Unterklasseninstanzen geändert wird
Kann diese Art von Objekttypattributen nur im Konstruktor platziert werden, oder ist vereinbart, dass das Objektattribut im Prototyp nicht geändert werden darf, um die Auswirkungen von Unterklasseninstanzen auf die übergeordnete Klasse und andere Unterklassen zu vermeiden? Gibt es noch eine andere Lösung?

    function extend(p, c) {
        var f = function () {};
        f.prototype = p.prototype;
        c.prototype = new f();
        c.prototype.constructor = c;
    }
    function parent() {}
    parent.prototype.aaa = 123;
    parent.prototype.sex = ['男', '女'];

    function child() {}
    extend(parent, child);
    c1 = new child();
    c2 = new child();
    console.log('设置实例c1之前，父类的sex值：',parent.prototype.sex);
    console.log('设置实例c1之前，实例c2的sex值：',c2.sex);
    c1.sex.push('其他');
    console.log('设置实例c1之后，父类的sex值：',parent.prototype.sex);
    console.log('设置实例c1之后，实例c2的sex值：',c2.sex);

Answer 1

这个方式可以让子类和对象访问 sex 的时候，如果 sex 不存在则为其创建一个父类 sex 的副本，存在则直接返回。

function extend(p, c) {
    var f = function() {};
    f.prototype = p.prototype;
    c.prototype = new f();
    c.prototype.constructor = c;
}

function parent() {}
parent.sex = ['男', '女'];
parent.prototype.aaa = 123;
Object.defineProperty(parent.prototype, 'sex', {
  configurable: true,
  enumerable: true,
  get: function () {
    if (this === parent || this === parent.prototype) {
      return parent.sex;
    }

    if (!this.hasOwnProperty('sex')) {
      Object.defineProperty(this, 'sex', {
        value: parent.sex.slice(),
        configurable: true,
        enumerable: true,
        writable: true
      });
    }
    return this.sex
  },
  set: function (value) {
    if (this === parent || this === parent.prototype) {
      parent.sex = value;
    } else if (!this.hasOwnProperty('sex')) {
      Object.defineProperty(this, 'sex', {
        value: value,
        configurable: true,
        enumerable: true,
        writable: true
      });
    } else {
      this.sex = value;
    }
  }
});

function child() {}
extend(parent, child);
var c1 = new child();
var c2 = new child();
var p1 = new parent();
console.log('设置实例c1之前，父类的sex值：', parent.prototype.sex);
console.log('设置实例c1之前，实例p1的sex值：', p1.sex);
console.log('设置实例c1之前，实例c2的sex值：', c2.sex);
c1.sex.push('其他');
console.log('设置实例c1之后，父类的sex值：', parent.prototype.sex);
console.log('设置实例c1之后，实例p1的sex值：', p1.sex);
console.log('设置实例c1之后，实例c1的sex值：', c1.sex);
console.log('设置实例c1之后，实例c2的sex值：', c2.sex);

Answer 2

子类定义一个同名属性, 覆盖父类的?

Answer 3

非方法的属性不推荐设置在原型上

Answer 4

在初始化子类child时候，定义私有属性：

function child() {
    this.sex = '';
}