Heim >Web-Frontend >js-Tutorial >Verstehen Sie kurz die Kapselungs- und Vererbungsfunktionen in JavaScript_Grundkenntnisse

Verstehen Sie kurz die Kapselungs- und Vererbungsfunktionen in JavaScript_Grundkenntnisse

WBOY
WBOYOriginal
2016-05-16 15:10:021335Durchsuche

Kapselung in JavaScript
Kapselung bedeutet einfach, dass die Außenwelt nur auf die allgemeinen Variablen und Funktionen des Objekts zugreifen kann, während die Details und Daten verborgen bleiben.
Es gibt drei Möglichkeiten, Objekte in js zu erstellen: Öffnen Sie die Tür, verwenden Sie Namenskonventionen zur Unterscheidung privater Variablen und schließen Sie sie, um echte private Variablen zu erstellen.
1. Offene Tür ist die grundlegendste Methode zum Realisieren von Objekten. Alle Methoden und Variablen sind gemeinsam und können von der Außenwelt aufgerufen werden.

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
} 
 
var book = new Book("哈哈"); 
//output:哈哈 哈哈 
console.log(book.name,book.getName()); 

Dieses Beispiel ist ein typisches Beispiel für eine offene Tür, bei der die Außenwelt direkt auf die Eigenschaften und Methoden des Objekts zugreifen kann. Sie können feststellen, dass mit „this“ Eigenschaften und Variablen erstellt werden.

2. Verwenden Sie Namenskonventionen, um private Variablen zu unterscheiden. Diese Methode ist eine optimierte Version der Open-Door-Methode. Sie wird nur durch „_“ vor privaten Variablen oder Methoden unterschieden Das Aufrufen der Methode kann immer noch nicht verhindert werden, da die Variablen dadurch nicht wirklich ausgeblendet werden.

3. Schließung erstellt echte private Variablen. Diese Methode nutzt die Tatsache aus, dass nur Funktionen in js einen Gültigkeitsbereich haben, und definiert relevante Variablen im Gültigkeitsbereich des Konstruktors. Auf diese Variablen kann von allen Funktionen im Gültigkeitsbereich der Definitionsdomäne zugegriffen werden.

var Book2 = function(name){ 
  if(check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  name = name; 
  function check(name){ 
    if(!name){ 
      return true; 
    } 
  } 
  this.getName = function(){ 
    return name; 
  } 
} 
Book2.prototype = { 
  display:function(){ 
    //无法直接访问name 
    return "display:"+this.getName(); 
  } 
} 
var book2 = new Book2("哈哈"); 
//output:undefined "哈哈" "display:哈哈" 
console.log(book2.name,book2.getName(),book2.display()); 

Wie Sie in diesem Beispiel sehen können, führt der direkte Zugriff auf den Namen zu undefinierten Ergebnissen. Sie können den Unterschied zwischen diesem Beispiel und dem Open-Door-Typ sehen. Die Variablen im Open-Door-Typ werden mit „this“ erstellt, während in diesem Beispiel var verwendet wird, um sie zu erstellen. Das Gleiche gilt für die Prüffunktion. Daher können die Namens- und Prüffunktionen nur im Konstruktor erstellt werden. Der Zugriff erfolgt innerhalb des Funktionsumfangs und kann von der Außenwelt nicht direkt aufgerufen werden.
Diese Methode löst die Probleme der ersten beiden Methoden, weist jedoch auch gewisse Nachteile auf. Im Open-Door-Objekterstellungsmodus werden alle Methoden im Prototypobjekt erstellt, sodass unabhängig von der Anzahl der generierten Objektinstanzen nur eine Kopie dieser Methoden im Speicher vorhanden ist. Mit dieser Methode wird jedes neu generierte Objekt erstellt eine neue Kopie privater Variablen und Methoden, die mehr Speicher verbraucht.

Vererbung in JavaScript
Grundkurs buchen:

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
} 

Geerbte Methode:

function extend(subClz,superClz){ 
var F = function(){} 
F.prototype = superClz.prototype; 
subClz.prototype = new F(); 
subClz.prototype.constructor = subClz; 
subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
} 


Durch die Verwendung der leeren Funktion F als Brücke kann der zusätzliche Aufwand durch den Aufruf des Konstruktors der übergeordneten Klasse beim direkten Instanziieren der übergeordneten Klasse vermieden werden. Wenn der Konstruktor der übergeordneten Klasse außerdem über Parameter verfügt, möchten Sie diese direkt über subClass.prototype = new superClass() implementieren. ; Der Aufruf des übergeordneten Klassenkonstruktors und die Vererbung über die Prototypenkette sind nicht zulässig.

subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
} 


Das Hinzufügen dieser drei Sätze kann verhindern, dass die Unterklasse die übergeordnete Klasse erbt und Book.call(this, name); schreibt. Schreiben Sie stattdessen einfach ArtBook.superClass.Constructor.call(this, name).
Und wenn die Unterklasse die Methode der übergeordneten Klasse überschreibt, kann sie die Methode der übergeordneten Klasse aufrufen:

ArtBook.prototype.getName = functiion(){ 
  return ArtBook.superClass.getName.call(this) + "!!!"; 
} 

ArtBook-Unterklasse:

var ArtBook = function(name,price){ 
  ArtBook.superClass.Constructor.call(this,name); 
  this.price = price; 
} 
extend(ArtBook,Book); 
ArtBook.prototype.getPrice = function(){ 
    return this.price; 
} 
ArtBook.prototype.getName = function(){ 
   return ArtBook.superClass.getName.call(this)+"!!!"; 
 } 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn