Heim > Artikel > Web-Frontend > JavaScript-Implementierungsklassen und Vererbung
1. Einführung
Manche Leute denken, dass JavaScript eine prozessorientierte Sprache ist. Denn die grundlegende Verwendung besteht im Wesentlichen darin, eine Funktion zu schreiben und sie dann aufzurufen. ==> Diese Idee ist falsch.
Der Gründer von JS ist: Brendan Eich Als JS gegründet wurde, waren Java und objektorientiertes Design bereits sehr beliebt.
Im Mai 1995 traf Netscape die Entscheidung, dass zukünftige Web-Skriptsprachen „Java ähnlich genug aussehen“ müssen, aber einfacher als Java sein müssen, damit nicht professionelle Webseitenautoren schnell loslegen können.
Auf dieser Grundlage lauten die Designideen:
(1) Lernen Sie von der grundlegenden Syntax der C-Sprache;
(2) Lernen Sie von den Datentypen und der Speicherverwaltung der Java-Sprache;
(3) Lernen Sie von der Scheme-Sprache und heben Sie Funktionen auf den Status „erstklassig“
(4) Lernen Sie von der Self-Sprache und verwenden Sie prototypbasierte Vererbung Mechanismus.
Weil der Autor selbst kein Interesse an der Java-Sprache hat. Die Javascript-Sprache ist also eigentlich eine Mischung aus zwei Sprachstilen – (vereinfachte) funktionale Programmierung + (vereinfachte) objektorientierte Programmierung
Interessanter ist, dass der Autor selbst ein tiefes Verständnis dieser Sprache hat sehr zufrieden ==》
"Es ist besser zu sagen, dass ich Javascript hasse, als dass ich es liebe. Es ist das Produkt eines One-Night-Stands zwischen C-Sprache und Self-Sprache"
2. Klassenbibliothek
JS verfügt nicht über das Konzept einer Klasse und verwendet Prototypen, um den Vererbungsmechanismus zu implementieren.
Für Programmierer, die mit dem Klassennutzungsmechanismus der Java- und C#-Sprachen vertraut sind, ist die Verwendung nicht sehr einfach.
John Resig, der Autor von JQuery, stellt auch eine Bibliothek bereit, die Sie in JS verwenden und erweitern können.
Class.js
[javascript]
/*
* Einfache JavaScript-Vererbung
* Von John Resig http:// ejohn.org/
* MIT-Lizenz
*
*********************** ** *******************************
* Beispielverwendung
**** ************************************************** *
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
},
dance: function(){
return this.dancing;
}
var Ninja = Person.extend({
init: function(){
this._super( false );
},
dance: function( ) {
// Rufen Sie die geerbte Version von dance() auf
return this._super(
},
swingSword: function() {
return true;
}
var p = new Person(true);
p.dance(); // => true var n = new Ninja(); n.dance(); > ;false n.swingSword(); // => true // Sollte alles wahr sein p instanceof Person && p Instanz von Klasse && n Instanz von Ninja && n Instanz von Person && n Instanz von Klasse ******************** * *********************************** */ // Inspiriert von base2 und Prototype (function(){ var fnTest = /xyz/.test(function(){xyz;}) ? /b_superb / : /.*/; // Die Basisklassenimplementierung (führt nichts aus) this.Class = function(){}; > // Eine neue Klasse erstellen, die von dieser Klasse erbt Class.extend = function(prop) { var _super = this.prototype; 🎜 > // Eine Basisklasse instanziieren (aber nur die Instanz erstellen, // den Init-Konstruktor nicht ausführen) initializing = true;var Prototyp = new this();
initializing = false;
// Kopieren Sie die Eigenschaften auf den neuen Prototyp
für ( var name in prop) {
// Überprüfen Sie, ob wir eine vorhandene Funktion überschreiben
prototyp[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// aber auf der Superklasse
this._super = _super[name];
// Die Methode muss nur vorübergehend gebunden sein, sodass wir
// sie entfernen, wenn wir fertiggestellt werden,
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) :
prop[name];
}
// Der Dummy-Klassenkonstruktor
function Class() {
// Die gesamte Konstruktion wird tatsächlich in durchgeführt die Init-Methode
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Unser konstruiertes Prototyp-Objekt füllen
Class.prototype = Prototyp;
// Erzwinge, dass der Konstruktor das ist, was wir erwarten
Class.prototype.constructor = Class;
// Und diese Klasse erweiterbar machen
Class.extend = arguments.callee;
Return-Klasse;
};
})();
3. 分析
以上的Class.js 实现机制其实很简单。 使用JS 的Prototype 和argumnet、apply、 callee 这些来实现的