Detaillierte Erläuterung des JavaScript-Konstruktors

Ein gutes Verständnis der Konstruktoren ist der Schlüssel zur Beherrschung der JavaScript-Sprache. Wir alle wissen, dass JavaScript nicht wie andere Sprachen ist. Es hat nicht das Schlüsselwort class, aber einen Konstruktor, der function sehr ähnlich ist. In diesem Artikel erfahren Sie im Detail, wie JavaScript-Konstruktoren Objekte erstellen.

Konstruktoren sind gewöhnlichen Funktionen sehr ähnlich, wir verwenden sie jedoch über das Schlüsselwort new. Es gibt zwei Haupttypen von Konstruktoren: native-Konstruktoren (Array, Object), die automatisch in der Ausführungsumgebung generiert werden können, und benutzerdefinierte Konstruktoren, in denen Sie Ihre eigenen Methoden und Eigenschaften definieren können.

Die Verwendung von Konstruktoren ist sehr effektiv, wenn Sie viele ähnliche Objekte (mit denselben Eigenschaften und Methoden) erstellen möchten. Die meisten Programmierer folgen der Konvention, einen Großbuchstaben zu verwenden, um Konstruktoren von gewöhnlichen Funktionen zu unterscheiden. Schauen Sie sich den Code unten an.

function Book() { 
    // unfinished code} 
var myBook = new Book();

Die letzte Codezeile erstellt ein Book-Objekt und weist es einer Variablen zu, nachdem dies abgeschlossen ist. Auch wenn der Book-Konstruktor nichts tut, ist myBook auch eine Instanz von Book . Wie Sie sehen, gibt es abgesehen von der Großschreibung des ersten Buchstabens und der Verwendung des Schlüsselworts new keinen Unterschied zwischen einem Konstruktor und einer normalen Funktion.

Bestimmen Sie den Typ der Instanz

Um festzustellen, ob ein Objekt eine bestimmte Instanz ist, können wir den Operator instanceof verwenden:

myBook instanceof Book    // => truemyBook instanceof String  // => false

Hinweis: Wenn die rechte Seite keine Instanz einer Funktion ist, wird ein Fehler gemeldet:

myBook instanceof {}; // => TypeError: invalid 'instanceof' operand ({})

Eine andere Methode besteht darin, das Attribut constructor zu verwenden. Alle Objektinstanzen haben ein Attribut constructor , der auf den erstellten Konstruktor verweist.

myBook.constructor == Book;   // => true

ist wie myBooks constructor, der auf Book zeigt. Alle Objekte erben das Attribut constructor von ihrem Prototyp:

var s = new String("text");
s.constructor === String;      // => true"text".constructor === String; // => truevar o = new Object();
o.constructor === Object;      // => truevar o = {};
o.constructor === Object;      // => truevar a = new Array();
a.constructor === Array;       // => true[].constructor === Array;      // => true

Obwohl die Verwendung von constructor zum Erkennen von Instanztypen verwendet werden kann, wird die Verwendung der Methode instanceof empfohlen. Da das Attribut constructor überschrieben werden kann, ist die Verwendung nicht sehr zuverlässig.

Benutzerdefinierter Konstruktor

Der Konstruktor ist wie ein Keksstempel. Alle sind aus dem gleichen Abdruck gefertigt, sie sehen alle gleich aus (dasselbe gilt für Männer, die nichts Gutes haben). Der

function Book(name, year) {    this.name = name;    this.year = '(' + year + ')';
}

Book-Konstruktor erfordert zwei Parameter. Wenn das Schlüsselwort new zum Konstruieren eines Objekts verwendet wird, werden die beiden formalen Parameter an Book und name von Objekt. year

var firstBook = new Book("Pro AngularJS", 2014);var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013); 
var thirdBook = new Book("JavaScript Patterns", 2010);

console.log(firstBook.name, firstBook.year);           
console.log(secondBook.name, secondBook.year);           
console.log(thirdBook.name, thirdBook.year);

Wie Sie sehen, können wir durch die Übergabe verschiedener Parameter schnell ein weiteres Buch erstellen. Das Gleiche gilt für JavaScripts

und Array(). Date()

Object.defineProperty-Methode Die

-Methode kann im Konstruktor zum Konfigurieren von Eigenschaften verwendet werden. Object.defineProperty

function Book(name) { 
    Object.defineProperty(this, "name", { 
        get: function() { 
            return "Book: " + name;       
        },        
        set: function(newName) {            
            name = newName;        
        },               
        configurable: false     
    }); 
}var myBook = new Book("Single Page Web Applications");
console.log(myBook.name);    // => Book: Single Page Web Applications// we cannot delete the name property because "configurable" is set to falsedelete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications// but we can change the value of the name propertymyBook.name = "Testable JavaScript";
console.log(myBook.name);    // => Book: Testable JavaScript

Der obige Code ruft die Ancestor-Methode auf. Es bietet

- und getter-Schnittstellen. Die setter-Methode ist für die Rückgabe des gekapselten Werts verantwortlich. Die getter-Methode akzeptiert Parameter und weist den Wert dem Attribut zu. Wenn wir auf ein bestimmtes Attribut zugreifen, werden diese beiden Methoden aufgerufen. Durch die Konfiguration von setter können wir festlegen, ob der Wert gelöscht werden kann. configurable

Objektliteral-Notation ist der bevorzugte Konstruktor

Die JavaScript-Sprache verfügt über neun integrierte Konstruktoren:

, Object(), Array(), String(), Number(), Boolean(), Date(), Function() und Error(). Wenn wir diese Werte erstellen müssen, können wir Literale oder Konstruktoren verwenden. Unter den gleichen Umständen sind Literalobjekte jedoch nicht nur einfacher zu lesen, sondern auch schneller, da sie beim Parsen optimiert werden können. Verwenden Sie also Literale, wenn Sie einfache Objekte verwenden müssen. RegExp()

// a number object// numbers have a toFixed() methodvar obj = new Object(5);
obj.toFixed(2);     // => 5.00// we can achieve the same result using literalsvar num = 5;
num.toFixed(2);     // => 5.00// a string object// strings have a slice() method var obj = new String("text");
obj.slice(0,2);     // => "te"// same as abovevar string = "text";string.slice(0,2);  // => "te"

Die Verwendung des neuen Schlüsselworts ist unerlässlich.

Denken Sie daran, das Schlüsselwort

zu verwenden, wenn Sie den Konstruktor verwenden. Wenn Sie es versehentlich vergessen haben, zeigt new auf this Objekt (Standard ist global im Browser). window

function Book(name, year) {
    console.log(this);    this.name = name;    this.year = year;
}var myBook = Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(window.name, window.year);var myBook = new Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(myBook.name, myBook.year);

Das Ergebnis der Ausführung des obigen Codes ist wie folgt:

Wenn es sich im strikten Modus befindet, gibt der obige Code einen Fehler aus, weil Im strikten Modus können wir den Konstruktor nicht ohne Verwendung des Schlüsselworts

aufrufen. new

Konstruktor mit höherem Gültigkeitsbereich

Um das Risiko zu vermeiden, dass die Verwendung des Schlüsselworts

vergessen wird, können wir einen Konstruktor mit höherem Gültigkeitsbereich erstellen, indem wir den Wert von new beurteilen. this

function Book(name) { 
    if (!(this instanceof Book)) { 

        // the constructor was called without "new".        return new Book(name);
    } 
}

Nachdem wir diesen Code hinzugefügt haben, können wir den Konstruktor ohne Einschränkungen verwenden.

function Book(name, year) { 
    if (!(this instanceof Book)) { 
        return new Book(name, year);
    }    this.name = name;    this.year = year;
}var person1 = new Book("js book", 2014);var person2 = Book("js book", 2014);
console.log(person1 instanceof Book);    // => trueconsole.log(person2 instanceof Book);    // => true

很多内建的构造器都是这么做的。通过判断this是否为当前类型。如果程序员忘记加new关键字，那么我们就返回一个通过new出来的对象。

结论

JavaScript没有类这种说法（但是它可以使面向对象的），所以对于习惯了使用类的程序员来说是种困惑。当然JavaScript的构造函数跟普通函数没什么区别，只是通过new关键字生成出来而已。如果我们需要”印饼干”的话，它就非常有用了。

相关推荐：

JavaScript构造器模式实例分析

什么是构造器？引用类型是什么？

有关查询构造器的文章推荐7篇

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