Detaillierte Erläuterung praktischer Möglichkeiten zum Erstellen von Objekten und zur Objektvererbung in JavaScript_Grundkenntnisse

Konvention in diesem Artikel: Ohne spezielle Deklaration beziehen sich Attribute auf Attribute oder Methoden.

Das Erstellen von Objekten und die Objektvererbung sind eigentlich dasselbe: Die von uns benötigten Instanzobjekte erhalten private Eigenschaften über den Konstruktor und gemeinsame Eigenschaften über die Prototypenkette. Was ist ein guter Weg? Private Eigenschaften werden über den Konstruktor abgerufen (unabhängig von benutzerdefinierten privaten Eigenschaften in der Instanz) und müssen nicht neu geschrieben werden. Gemeinsame Eigenschaften werden über die Prototypenkette gefunden und müssen nicht wiederholt erstellt werden.

Universeller Ansatz

Erstellen Sie Objekte mit einer Kombination aus Konstruktormuster und Prototypmuster

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
Object.defineProperty(HNU_student, 'constructor', {value: HNU_student});

var hiyohoo = new HNU_student('xujian');

Der Prototyp wird durch Literale neu geschrieben und der Konstruktor des Prototyps zeigt auf Object. Bei Bedarf muss der Konstruktor neu definiert werden.

Parasitäre kombinatorische Vererbung

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
function inheritPrototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};

function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  }
}
inheritPrototype(Student_2011, HNU_student);
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
};

var hiyohoo = new Student_2011('xujian', 20110803203);

Die Rolle von object(): Verwandelt das als Parameter übergebene Objekt in den Prototyp der Instanz, und die Eigenschaften des Objekts werden von allen Instanzen gemeinsam genutzt.

Gemeinsame Attribute: inheritPrototype(Student_2011, HNU_student);, der Unterkonstruktor-Prototyp wird zu einer Instanz des Superkonstruktor-Prototyps und die Attribute im Superkonstruktor-Prototyp werden mit dem Unterkonstruktor geteilt.
Private Eigenschaften: HNU_student.call(this, name); Rufen Sie beim Erstellen einer Instanz über den Unterkonstruktor den Superkonstruktor auf, um private Eigenschaften zu erstellen.

Andere Möglichkeiten, Objekte zu erstellen

Dynamischer Prototypenmodus

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };

  if (!HNU_student.prototype.school) {
    HNU_student.prototype.school = 'HNU';
    HNU_student.prototype.saySchool = function() {
      return this.school;
    };
  }
}

var hiyohoo = new HNU_student('xujian');

Fügen Sie die im Prototyp definierten gemeinsamen Eigenschaften in den Konstruktor ein, verwenden Sie Beurteilungsanweisungen und initialisieren Sie die gemeinsamen Eigenschaften des Prototyps, wenn der Konstruktor zum ersten Mal aufgerufen wird, um eine Instanz zu erstellen.

Parasitäres Konstruktormuster

function SpecialArray() {
  var values = new Array();
  values.push.apply(values, arguments);
  values.toPipedString = function() {
    return this.join('|');
  };

  return values;
}

var colors = new SpecialArray('red', 'black', 'white');

wird verwendet, um dem nativen Konstruktor spezielle Attribute hinzuzufügen.

Andere Möglichkeiten der Objektvererbung

Kombinierte Vererbung

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};
function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  };
}
Student_2011.prototype = new HNU_student();
Student_2011.prototype.constructor = Student_2011;
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
}
var hiyohoo = new Student_2011('xujian', 20110803203);

Gemeinsame Attribute: Student_2011.prototype = new HNU_student();, der Prototyp des Unterkonstruktors zeigt auf den Prototyp des Superkonstruktors und die Instanz findet alle gemeinsam genutzten Attribute über die Prototypenkette.
Private Eigenschaften: HNU_student.call(this, name); Rufen Sie beim Erstellen einer Instanz über den Unterkonstruktor den Superkonstruktor auf, um private Eigenschaften zu erstellen.

Fehler: Der Superkonstruktor wird zweimal aufgerufen. Student_2011.prototype = new HNU_student(); gleichzeitig werden die vom Superkonstruktor definierten privaten Eigenschaften im Unterkonstruktorprototyp überschrieben und durch die gleichnamigen Eigenschaften blockiert Beispiel.

Prototypische Vererbung, parasitäre Vererbung

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = object(student1);

Object.creat() ist eine neue Methode in ECMAScript5. Sie akzeptiert zwei Parameter: Einer ist das Originalobjekt als Prototyp und der andere ist das Objekt, das Attribute überschreibt oder hinzufügt. Seine Funktion ist dieselbe wie das benutzerdefinierte Objekt ().

var student1 = {
  name: 'xujian',
  school: 'HNU'
};
var student2 = Object.create(student1, {
  name: {
    value: 'huangjing'
  }
});

Parasitische Vererbung fügt zusätzliche Attribute hinzu, um Objekte basierend auf der prototypischen Vererbung zu verbessern.

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
function creatAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('Hi!');
  };
  return clone;
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = creatAnother(student1);

Prototypische Vererbung und parasitäre Vererbung werden verwendet, um Instanzobjekte zu erstellen, die vorhandenen Objekten ähneln.