Objektorientierte Kapselung und Vererbung von Javascript

Lassen Sie uns die objektorientierte Kapselung und Vererbung in js klären.

1. Kapselung
Es gibt viele Möglichkeiten, Kapselung in js zu implementieren. Hier sind einige häufig verwendete.

1.1 Im Originalmodus generiertes Objekt
Schreiben Sie unsere Mitglieder direkt in das Objekt und geben Sie es mit der Funktion zurück. Nachteile: Es ist schwierig, eine Instanz eines Musters zu erkennen.

Code:

       function Stu(name, score) {
            return {
                name: name,
                score: score
            }
        }
        var stu1 = Stu("张三", 80);
        var stu2 = Stu("李四", 90);
        console.log(stu1.name); // 张三

1.2 Generieren von Konstruktionsmusterobjekten

　js stellt uns ein Muster zur Verfügung, das Konstruktoren zum Generieren von Objekten verwendet, ¨Das sogenannte „ „Konstruktor“ ist eigentlich eine gewöhnliche Funktion, aber diese Variable wird intern verwendet. Wenn das Schlüsselwort new zum Generieren einer Instanz des Konstruktors verwendet wird, wird die Variable this an das Instanzobjekt gebunden.

Geben Sie den Code direkt ein:

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.name + "/" + stu2.score); // 张三  90
        console.log((stu1.constructor == Stu) + "/" + (stu2.constructor == Stu)); // true  true
        console.log((stu1 instanceof Stu) + "/" + (stu2 instanceof Stu)); // true  true

Es ist nicht schwer zu erkennen, dass das vom js-Konstruktor generierte Objekt genau das gleiche ist wie das von der Klasse in C# generierte Objekt. Beide verwenden Vorlagen um Objektmitglieder zu definieren und sie über das neue Schlüsselwort zu instanziieren.

Verwenden Sie C#-Code, um dasselbe Stu-Objekt zu generieren

Class Stu
{
　　public string name;
　　public double score;                    
}

OK, jetzt ist das Basisobjekt da. Jetzt brauchen wir also eine Methode, die allen Objekten gemeinsam ist und die es nur erlaubt, diese Methode einmal zu erstellen. (Nicht wiederholt mit Objekt neu erstellt) Was soll ich tun? Jeder weiß, dass wir in C# statische Member verwenden können. Wie macht man das also in js?

1.3 Prototypmodus

In js verfügt jeder Konstruktor über ein Prototypattribut. Alle Attribute und Methoden dieses Objekts werden von der Instanz des Konstruktors geerbt. Das direkte Hinzufügen von Mitgliedern zum Prototyp entspricht dann der Deklaration statischer Mitglieder in C#.

Code:

      function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        Stu.prototype.type='学生';
        Stu.prototype.log = function (s) {
            console.log(s);
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.type + "/" + stu2.type); // 学生 学生
        stu1.log('hello');  // hello
        console.log(stu1.log == stu2.log);  // true

Das war’s für die Kapselung. Schauen wir uns an, wie die Vererbung in js implementiert wird.

2. Erben

2.1 Konstruktorbindung

Rufen Sie die Call- oder Apply-Methode direkt in der untergeordneten Funktion auf und binden Sie den Konstruktor des übergeordneten Objekts an das untergeordnete Objekt am Objekt.

   function Stu(name, score) {
            Grade.apply(this, arguments);
            //Grade.call(this, arguments);
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
            this.ask = function () {
                console.log("大家好");
            }
        }
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(stu1.code); // 初中
        stu1.ask(); // 大家好

Die Anwendung hier führt zwei Dinge aus: Sie übergibt den ersten Parameter this an den Grade-Konstruktor (Aufrufer) und führt dann den Code in Grade aus. Dies entspricht der erneuten Ausführung der damit in Grade definierten Elemente in Stu.

2.2 Vererbung durch Prototyp
Schauen wir uns zuerst den Code an

Code:

   function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {
            this.code = "初中";
        }
        Stu.prototype = new Grade();
        Stu.prototype.constructor = Stu; //防止继承链的紊乱,手动重置声明
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        console.log(Stu.prototype.constructor); // 自己的构造函数
        console.log(stu1.code); // 初中

Wie bereits erwähnt, entspricht Prototyp einem statischen Mitglied in C#. Also werden wir einfach Alle Mitglieder der übergeordneten Klasse werden zu ihren eigenen statischen Mitgliedern, um eine Vererbung zu erreichen.

Die Vererbung über den Prototyp hat einen Nachteil: Alle geerbten Mitglieder sind statisch. Wie erbt man also Objektmitglieder?

2.3 Vererbung kopieren

Kopieren Sie alle Eigenschaften und Methoden des übergeordneten Objekts in das untergeordnete Objekt, um eine Vererbung zu erreichen.

Code:

    function Stu(name, score) {
            this.name = name,
            this.score = score
        }
        function Grade() {}
        Grade.prototype.code = "初中";
    }
        //函数封装
        function extend(C, P) {
            var p = P.prototype;
            var c = C.prototype;
            for (var i in p) {
                c[i] = p[i];
            }
        }
        extend(Stu, Grade);
        var stu1 = new Stu("张三", 80);
        var stu2 = new Stu("李四", 90);
        stu1.code='高中';
        console.log(stu1.code); // 高中
        console.log(stu2.code); // 初中
        console.log(Stu.prototype.constructor);
        console.log(Grade.prototype.constructor)

Das ist alles für die objektorientierte Organisation von js. Sie können bei der Verwendung Änderungen entsprechend Ihren eigenen Anforderungen vornehmen. Es gibt ein Sprichwort, das sehr gut ist, das Richtige ist das Beste.

Hier analysieren wir nur Kapselung und Vererbung. Wir werden in Zukunft einige weitere Artikel verfassen, um Ihnen ein tieferes Verständnis der objektorientierten JavaScript-Programmierung zu vermitteln. Natürlich handelt es sich hierbei um persönliche Absprachen. Sollten Sie Auslassungen haben, wenden Sie sich bitte an mich.

Weitere Artikel zum Thema JavaScript-objektorientierte Kapselung und Vererbung finden Sie auf der chinesischen PHP-Website!