Warum ist es schlecht, Getter und Setter in JavaScript zu verwenden?

Wie Sie wissen, sind Getter und Setter Teil von JavaScript geworden. Sie unterstützen weitgehend alle gängigen Browser, sogar IE8.

Ich glaube nicht, dass diese Idee generell falsch ist, aber ich denke, dass sie für JavaScript nicht sehr geeignet ist. Es mag so aussehen, als ob Getter und Setter den Code vereinfachen und Zeit sparen, aber sie führen tatsächlich zu versteckten Fehlern, die auf den ersten Blick nicht offensichtlich sind.

Wie funktionieren Getter und Setter?

Zuerst eine kleine Zusammenfassung dessen, was das ist:

Manchmal möchten wir den Zugriff auf eine Eigenschaft zulassen, die einen dynamisch berechneten Wert zurückgibt, oder Sie möchten möglicherweise den Status einer internen Variablen widerspiegeln. ohne explizite Methodenaufrufe zu verwenden.

Um ihre Funktionsweise zu veranschaulichen, schauen wir uns ein Personenobjekt mit zwei Eigenschaften an: firstName und lastName, und einem berechneten Wert: fullName.

var obj = {
  firstName: "Maks",
  lastName: "Nemisj"
}

Der berechnete Wert fullName gibt die Verkettung von Vorname und Nachname zurück.

Object.defineProperty(person, 'fullName', {
  get: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

Um den berechneten Wert von fullName zu erhalten, sind die schrecklichen Klammern wie person.fullName() nicht erforderlich. Verwenden Sie einfach die einfache Variable var fullName = person.fullName.

Gleiches gilt für Setter, Sie können den Wert mithilfe einer Funktion festlegen:

Object.defineProperty(person, 'fullName', {
  set: function (value) {
    var names = value.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  }
});

Die Verwendung ist so einfach wie ein Getter: person.fullName = ‘Boris Gorbatschow’. Dadurch wird die oben definierte Funktion aufgerufen und Boris Gorbatschow in Vorname und Nachname aufgeteilt.

Was ist das Problem?

Sie denken vielleicht: „Hey, ich mag die Getter- und Setter-Methoden, sie fühlen sich natürlicher an, wie JSON. Sie haben Recht, aber lassen Sie uns einen Moment zurücktreten wie fullName vor Gettern und Settern funktioniert.

Um den Wert zu erhalten, verwenden wir etwas wie getFullName(), und um den Wert festzulegen, verwenden wir person.setFullName(‘Maks Nemisj’).

Was passiert, wenn der Funktionsname falsch geschrieben ist und person.getFullName() als person.getFulName() geschrieben wird?

JavaScript gibt einen Fehler aus:

person.getFulName();
       ^
TypeError: undefined is not a function

Dieser Fehler wird zur richtigen Zeit und am richtigen Ort ausgelöst. Der Zugriff auf ein Objekt, bei dem die Funktion nicht vorhanden ist, löst einen Fehler aus – das ist gut.

Jetzt wollen wir sehen, was passiert, wenn wir einen Setter mit dem falschen Namen verwenden?

person.fulName = 'Boris Gorbachev';

Nichts. Objekte sind erweiterbar und Schlüssel und Werte können dynamisch zugewiesen werden, sodass zur Laufzeit keine Fehler ausgegeben werden.

Ein solches Verhalten bedeutet, dass irgendwo in der Benutzeroberfläche ein Fehler angezeigt wird oder wenn eine Operation mit dem falschen Wert ausgeführt wird, und nicht im Moment eines Tippfehlers.

Es ist so interessant, Fehler zu verfolgen, die in der Vergangenheit hätten auftreten sollen, aber im zukünftigen Codefluss auftauchen.

Ist eine Versiegelung möglich?

Dieses Problem kann teilweise durch sealAPI gelöst werden. Solange das Objekt versiegelt ist, kann es nicht mutiert werden, was bedeutet, dass fulName versucht, dem Personenobjekt einen neuen Schlüssel zuzuweisen, was jedoch fehlschlägt.

Als ich dies in Node.js V4.0 getestet habe, hat es aus irgendeinem Grund nicht wie erwartet funktioniert. Daher kann ich diese Lösung nicht garantieren.

Was noch frustrierender ist, ist, dass es für Setter überhaupt keine Lösung gibt. Wie ich bereits erwähnt habe, sind Objekte erweiterbar und ausfallsicher, was bedeutet, dass der Zugriff auf einen nicht vorhandenen Schlüssel keine Fehler verursacht.

Wenn diese Situation nur auf Objektliterale zutreffen würde, würde ich mir nicht die Mühe machen, diesen Artikel zu schreiben, aber nach ECMAScript 2015 (ES6) und dem Aufkommen der Möglichkeit, Getter und Setter mit Klassen zu definieren, habe ich beschlossen, einen Blog zu schreiben über mögliche Fallstricke.

Die Ankunft der Klassen

Ich weiß, dass Klassen derzeit in einigen JavaScript-Communitys nicht sehr beliebt sind. Es wird diskutiert, ob sie in funktionalen/prototypbasierten Sprachen wie JavaScript benötigt werden. Tatsache ist jedoch, dass Klassen in der Spezifikation ECMAScript 2015 (ES6) enthalten sind und noch eine Weile dort bleiben werden.

Für mich sind Klassen eine Möglichkeit, eine wohldefinierte API zwischen der Außenwelt der Klasse (Konsumenten) und der Innenwelt der Anwendung zu spezifizieren. Dies ist eine Abstraktion, die die Regeln schwarz auf weiß darstellt, und wir gehen davon aus, dass sich diese Regeln so schnell nicht ändern werden.

Verbessern Sie das Personenobjekt und machen Sie daraus eine echte Klasse. Person definiert eine Schnittstelle zum Abrufen und Festlegen von fullName. Die Klasse

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
  setFullName(value) {
    var names = value.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  }
}

definiert eine strenge Schnittstellenbeschreibung, die Getter- und Setter-Methoden machen sie jedoch weniger streng. Bei der Arbeit mit Objektliteralen sind wir an aufgeblähte Fehler und bei der Arbeit mit JSON an Rechtschreibfehler in Schlüsseln gewöhnt. Ich wünschte, zumindest die Kurse wären strenger und würden in diesem Sinne den Entwicklern besseres Feedback geben.

Obwohl diese Situation nicht anders ist, wenn Getter und Setter für eine Klasse definiert werden. Aber es wird niemanden davon abhalten, es falsch zu schreiben.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName() {
    return this.firstName + ' ' + this.lastName;
  }
  set fullName(value) {
    var names = value.split(' ');
    this.firstName = names[0];
    this.lastName = names[1];
  }
}

Ausführungen mit Tippfehlern führen zu keinen Fehlern:

var person = new Person('Maks', 'Nemisj');
console.log(person.fulName);

Dasselbe laxe, ausführliche und nicht nachvollziehbare Verhalten kann zu Fehlern führen.

在我发现这一点后，我有一个问题：在使用getter和setter的时候，有没有什么可以做的，以便于使得类更严格？我发现：有是肯定有，但是这值得吗？增加额外层次的复杂性到代码就只是为了使用数量更少的括号？对于API定义，也可以不使用getter和setter，而这样一来就能解决这个问题。除非你是一个铁杆开发人员，并愿意继续进行，不然还有另一种解决方案，如下所述。

proxy来帮助？

除了getter和setter方法，ECMAScript 2015（ES6）还自带proxy对象。proxy可以帮助你确定委托方法，这些委托方法可以在实际访问键执行之前，用来执行各种操作。事实上，它看起来像动态getter / setter方法。

proxy对象可以用来捕捉任何到类的实例的访问，并且如果在类中没有找到预先定义的getter或setter就会抛出错误。

为了做到这一点，必须执行下面两个操作：

• 创建基于Person原型的getter和setter清单。

• 创建将测试这些清单的Proxy对象。

让我们来实现它。

首先，为了找出什么样的getter和setter方法可以用在类Person上，可以使用getOwnPropertyNames和getOwnPropertyDescriptor：

var names = Object.getOwnPropertyNames(Person.prototype);
var getters = names.filter((name) => {
  var result =  Object.getOwnPropertyDescriptor(Person.prototype, name);
  return !!result.get;
});
var setters = names.filter((name) => {
  var result =  Object.getOwnPropertyDescriptor(Person.prototype, name);
  return !!result.set;
});

在此之后，创建一个Proxy对象：

var handler = {
  get(target, name) {
    if (getters.indexOf(name) != -1) {
      return target[name];
    }
    throw new Error('Getter "' + name + '" not found in "Person"');
  },
  set(target, name) {
    if (setters.indexOf(name) != -1) {
      return target[name];
    }
    throw new Error('Setter "' + name + '" not found in "Person"');
  }
};
person = new Proxy(person, handler);

现在，只要你尝试访问person.fulName，就会显示Error: Getter “fulName” not found in “Person”的消息。

Das obige ist der detaillierte Inhalt vonWarum ist es schlecht, Getter und Setter in JavaScript zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!