Detaillierte Erläuterung der JavaScript-Setter und -Getter

Dieser Artikel stellt hauptsächlich die Setter- und Getter-Methoden von JavaScript vor. Ich hoffe, dass er Ihnen helfen kann.

Ich habe die Setter- und Getter-Methoden von Javascript noch nie beim Schreiben von Projekten verwendet, daher ist es ein Konzept, das verstanden werden muss. Heute habe ich diesen Wissenspunkt in einem Buch gelesen, und er ist immer noch vage. Also beschloss ich, es zu studieren.

Die Eigenschaften eines Javascript-Objekts bestehen aus einem Namen, einem Wert und einer Reihe von Merkmalen. Werfen wir also zunächst einen Blick auf die beiden Eigenschaften von Objekten:

Dateneigenschaften, die wir häufig verwenden und mit denen wir vertraut sein sollten
Accessor-Eigenschaften, auch Accessor-Eigenschaften genannt

Was sind Accessor-Eigenschaften? Es handelt sich um eine Reihe von Funktionen, die Werte abrufen und festlegen. In ECMAScript5 können Eigenschaftswerte mit einer oder zwei Methoden festgelegt werden. Die beiden Methoden sind Getter und Setter. Daher werden durch Getter und Setter definierte Eigenschaften als Accessor-Eigenschaften bezeichnet.

var o = {
  get val(){
    /*函数体*/
    return ;
  },
  set val(n){
    /*函数体*/
  }
}

Das Obige ist die einfachste Möglichkeit, ein Accessor-Attribut zu definieren. Es ist ersichtlich, dass die Getter- und Setter-Methoden tatsächlich Funktionen sind, die die Funktion ersetzen.

var o = {
  a:3,
  get val(){
    return Math.pow(this.a,2);
  }
}

console.log(o.val);//9
o.val = 100;
console.log(o.val);//9

Die Getter-Methode hat keine Parameter und gibt einen Wert zurück. Wenn die Getter-Methode separat festgelegt wird, kann sie nur den Attributwert abrufen und ihr definiertes Attribut nicht ändern Wert. , Gewährleistung der Datensicherheit;

var o = {
  a:3,
  set val(n){
    this.a = n;
  }
}

console.log(o.val);//undefined

Die Setter-Methode verfügt über Parameter und keinen Rückgabewert. Die Attribute können nicht gelesen werden.

var o ={
  a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

console.log(o.a);//3
console.log(o.val);//9
o.val = 10;
console.log(o.a);//10
console.log(o.val);//100

Wie aus dem obigen Code ersichtlich ist, bezieht sich dies auf sein Objekt (d. h. das „o“ im Code); 🎜>

Darüber hinaus können auch Accessor-Eigenschaften vererbt werden;

var o ={
   a:3,
  get val(){
    return Math.pow(this.a,n);
  },
  set val(n){
    this.a = Math.max(this.a,n);
  }
}

o.val = 10;
var foo = Object.create(o);
console.log(foo.val);//10
foo.val = 9;
console.log(foo.val);//10

Verwandte Empfehlungen:

Grundlegende Einführung in Getter und Setter in Javascript

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

Beispielcode-Sharing der Getter/Setter-Implementierung in JavaScript

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Setter und -Getter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!