Heim  >  Artikel  >  Web-Frontend  >  Verwenden Sie Prototypen und Abschlüsse, um Komponentenmethoden zu vervollständigen

Verwenden Sie Prototypen und Abschlüsse, um Komponentenmethoden zu vervollständigen

高洛峰
高洛峰Original
2016-11-25 13:29:531014Durchsuche

Java-Code
var Player = (function(){
Player = function(){ //Dies ist nur eine leere Shell
throw new Error("Ein Player-Objekt kann nicht instanziiert werden.") ;
};
Player.MIN_EXTENDED_TIME = 3;
Player._player = false;
if( Player ._player){
alarm("Init...");
Player._player = {
_name : name,
setName : function(name){
this._name = name ;
},
toString : function(name){
return "Player: " + this._name
}
return Player._player; >};
return Player; //Reparierte Player-Komponentenmethode zurückgeben
})();

//var player = new Player(); Ausnahme
var player1 = Player.getInstance();
var player2 = Player.getInstance(
alert(player2.toString)); /Output RealPlayer
Schließlich müssen wir eine Komponentenmethode definieren und den Prototyp verwenden, um sie zu implementieren. Wie wäre es damit:
Java-Code
function Player(name){
Player.MIN_EXTENDED_TIME = 3;
this._name = name;
Player.prototype.setName = function(name){
this._name = name;
Player.prototype.toString = function(){
return "Player: " + this._name;

var player = new Player("WindowsMediaPlayer"); //Ausgabe WindowsMediaPlayer
player.setName( " RealPlayer");
alert(player.toString()); //Ausgabe RealPlayer
alert(Player.MAX_EXTENDED_TIME);

Nun, es gibt Kapselung, Konstanten und Überschreibung der Object toString-Methode , was die Vererbung und andere Dinge betrifft, darüber werden wir später sprechen, es sieht auf den ersten Blick gut aus. Diese Art der Komponentenmethodendefinition ist jedoch nicht elegant und intuitiv genug. Die Methoden werden an unabhängigen Orten definiert und nicht zusammen mit der ursprünglichen Komponentenmethode platziert.

Umsetzbar ist es übrigens durch Verschlüsse. Probieren Sie es aus:
Java-Code
function Player(name){
Player.MIN_EXTENDED_TIME = 3;
this._name = name; . setName = function(name){
this._name = name;
this.toString = function(){
return "Player: " + this._name }; ;
};

var player = new Player("WindowsMediaPlayer"); //Output WindowsMediaPlayer("RealPlayer") ;
alert(player.toString()); //Output RealPlayer
alert(Player.MAX_EXTENDED_TIME);

Abschlüsse wurden erheblich verbessert, einschließlich neuer Syntax-Abschlüsse Es gibt keine spezielle Syntax, die zusätzliches Lernen erfordert. Diese Variablen müssen nur in dem Kontext definiert werden, zu dem die Funktion gehört. Ist das Gegenteil eines Abschlusses nicht ein funktionaler Code, der keine ungebundenen Variablen enthält?
Das Schreiben war fertig, aber dann dachte ich, es sollte nur eine Kopie von Player geben, es ist ein Singleton. Am besten wäre es, wenn ich einen Singleton-Modus wie Java erstellen könnte :), aber es hat nicht geklappt , das habe ich nicht getan. Der Weg besteht darin, einen privaten Konstruktor in JavaScript zu erstellen. Es scheint nicht machbar, den Singleton-Modus mit dieser Idee zu implementieren...
Was soll ich tun?

Es gibt jedoch immer eine Möglichkeit: Ich kann Ihr neues Player-Objekt nicht steuern, aber ich kann die Eigenschaften und das Verhalten Ihres neuen Player-Objekts steuern! Wenn Sie Ihr neues Player-Objekt verwenden müssen, stellen Sie fest, dass dies überhaupt nicht möglich ist oder nur eine leere Hülle ist! Die Realität hängt immer noch von der klassischen getInstance-Methode im Singleton ab:
Java-Code
function Player(){
throw new Error("Ein Player-Objekt kann nicht instanziiert werden."); //Dies ist nur eine leere Shell

(function(){ //Das ist das Echte
Player .MIN_EXTENDED_TIME = 1;
Player.MAX_EXTENDED_TIME = 3;
Player._player = false;
Player.getInstance = function(){
if(!Player._player){
warning( "Init...");
Player._player = {
_name : name,
setName : function(name){
this._name = name; Tostring: Function (name) {
Return "Player:" + this._name;
}; ();

//var player = new Player(); //new Player() löst eine Ausnahme aus
var player1 = Player.getInstance(); ();
player2.setName("RealPlayer");
alert(player2.toString()); //Output RealPlayer

Okay, wirklich gut, Singleton-Modus funktioniert auch in JavaScript - Wenn Sie new Player(); wagen, wird eine Ausnahme ausgelöst, sodass Sie nichts erhalten. Nur das mit der getInstance-Methode erhaltene Objekt ist das echte Player-Objekt. Als Ergebnis der gesamten Ausführung des obigen Codes wird das Dialogfeld „Init…“ nur einmal angezeigt, was darauf hinweist, dass die eigentliche „Konstruktorlogik“ nur einmal aufgerufen wird.

Ich habe dies geschafft, aber es gibt immer noch ein kleines Bedauern. Die Definition von Player ist immer noch in zwei Teile geteilt, ein Teil definiert eine leere Shell und der andere Teil ist eine anonyme Funktion zum Definieren der Player-Konstanten und getInstance-Methode. Können diese beiden Teile nicht zu einem zusammengefasst werden?
Ja. Sie müssen nur eine kleine anonyme Funktion verwenden. Wenn Sie die Geduld haben, dies von Anfang an zu lesen, werden Sie es auf jeden Fall verstehen:

An diesem Punkt bin ich endlich erleichtert und habe ein tiefes Verständnis für JavaScript-Objekte. orientiert und nutzen Sie Prototypen und Verschlüsse. Nur mit scharfen Waffen können Sie exzellenten Front-End-Code schreiben. Einige Kollegen haben privat mit mir kommuniziert. Ich werde mein Bestes geben, um später prägnanten Code zu veröffentlichen. Ich hoffe, dass Kollegen mit einer grundlegenden objektorientierten und JavaScript-Grundlage etwas gewinnen können.

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
Vorheriger Artikel:JavaScript-TestsNächster Artikel:JavaScript-Tests