Erfahren Sie mehr über Konstruktoren in JavaScript

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 verfügt nicht über das Schlüsselwort class, sondern über einen Konstruktor, der der Funktion sehr ähnlich ist. In diesem Artikel erfahren wir 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, mit 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, ist myBook auch eine Book-Instanz, selbst wenn der Book-Konstruktor nichts tut. Wie Sie sehen, gibt es abgesehen von der Großschreibung des ersten Buchstabens und der Verwendung des Schlüsselworts new keinen Unterschied zwischen Konstruktoren und gewöhnlichen Funktionen.

Um den Typ der Instanz zu bestimmen

Um festzustellen, ob ein Objekt eine Instanz irgendeiner Art ist, können wir den Operator instanceof verwenden: instanceof操作符：

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

注意：如果右边不是一个函数的实例，那么将会报错：

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

另一种方法是使用constructor属性，所有对象实例都有一个constructor属性，这个属性指向创建它的构造函数。

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

就像myBook的constructor指向Book一样。 所有对象都从它们的原型上继承了constructor这个属性：

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

尽管使用constructor可以用来检测实例类型，但是建议还是使用instanceof方法。因为constructor属性是可以被重写的..用起来不太靠谱。

自定义构造函数

构造函数就像饼干印模。同一印模制作出来的，都是同一个diao样(男人没一个好东西也是这个道理)。

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

Book构造器需要两个参数，当使用new关键字构造对象时，会把两个形参传给Book对象的name 和 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);

如你所见，我们可以通过传不同参数，快速创建另一本书。JavaScript的Array(),Date()也是这个道理。

Object.defineProperty 方法

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 false
delete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications
// but we can change the value of the name property
myBook.name = "Testable JavaScript";
console.log(myBook.name);    // => Book: Testable JavaScript

上面的代码中是调用了祖先的方法。它提供了getter和setter接口。getter方法负责返回封装的值，setter方法接受参数，并把值赋给属性。当我们在某个属性上操作存取时，调用的就是这两个方法。通过配置configurable，我们可以设置该值能否被删除。

对象字面量表示法是首选的构造函数

JavaScript语言九种内建的构造器：Object(), Array(), String(), Number(), Boolean(), Date(), Function(), Error() 以及 RegExp()。当我们需要创建这些值的时候，我们可以自由选择使用字面量或者构造器。但是相同情况下，字面量对象不仅易读，而且运行速度更快，因为他们可以在解析的时候被优化。所以当你需要使用简单对象的时候就使用字面量吧。

// a number object
// numbers have a toFixed() method
var obj = new Object(5);
obj.toFixed(2);     // => 5.00
// we can achieve the same result using literals
var 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 above
var string = "text";
string.slice(0,2);  // => "te"

使用new关键字是必不可少的

记得使用构造器的时候要用new关键字，如果你不小心忘记了，那么构造器中的this指向的是global对象(浏览器中默认为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);

上面的代码运行结果如下所示：

如果是在严格模式下，上面的代码将会抛出错误，因为严格模式不允许我们不使用new关键字调用构造器。

适用范围更高的构造器

为了解决可能会忘记使用new关键字的风险，我们可以通过判断this的值创建适用范围更高的构造器。

function Book(name) { 
    if (!(this instanceof Book)) { 
        // the constructor was called without "new".
        return new Book(name);
    } 
}

加上这段代码之后，我们就可以‘肆无忌惮’地使用构造器了。

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);    // => true
console.log(person2 instanceof Book);    // => true

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

Hinweis: Wenn die rechte Seite keine Instanz einer Funktion ist, wird ein Fehler gemeldet: 🎜rrreee🎜Eine andere Methode besteht darin, das Konstruktorattribut zu verwenden. Alle Objektinstanzen haben ein Konstruktorattribut, das auf den Konstruktor verweist, der sie erstellt hat. 🎜rrreee🎜 Genau wie der Konstruktor von myBook auf Book verweist. Alle Objekte erben die Eigenschaft „constructor“ von ihrem Prototyp: 🎜rrreee🎜 Obwohl die Verwendung des Konstruktors zum Erkennen von Instanztypen verwendet werden kann, wird die Verwendung der Methode „instanceof“ empfohlen. Da das Konstruktorattribut überschrieben werden kann, ist die Verwendung nicht sehr zuverlässig. 🎜🎜🎜Custom Constructor🎜🎜🎜Constructors sind wie Keksstempel. Alle sind aus dem gleichen Abdruck gefertigt, sie sehen alle gleich aus (dasselbe gilt für Männer, die nichts Gutes haben). 🎜rrreee🎜Der Book-Konstruktor benötigt zwei Parameter. Wenn das Schlüsselwort new zum Erstellen eines Objekts verwendet wird, werden die beiden formalen Parameter an den Namen und das Jahr des Book-Objekts übergeben. 🎜rrreee

🎜🎜Wie Sie sehen, können wir schnell ein weiteres Buch erstellen, indem wir verschiedene Parameter übergeben. Das Gleiche gilt für Array() und Date() von JavaScript.
🎜🎜🎜Object.defineProperty-Methode🎜🎜🎜Die Object.defineProperty-Methode kann im Konstruktor zum Konfigurieren von Eigenschaften verwendet werden. 🎜rrreee🎜Der obige Code ruft die Ancestor-Methode auf. Es bietet Getter- und Setter-Schnittstellen. Die Getter-Methode ist für die Rückgabe des gekapselten Werts verantwortlich, und die Setter-Methode akzeptiert Parameter und weist den Wert der Eigenschaft zu. Wenn wir auf ein bestimmtes Attribut zugreifen, werden diese beiden Methoden aufgerufen. Durch die Konfiguration konfigurierbar können wir festlegen, ob der Wert gelöscht werden kann. 🎜🎜🎜Objektliteraldarstellung ist der bevorzugte Konstruktor 🎜🎜🎜Die JavaScript-Sprache verfügt über neun integrierte Konstruktoren: Object(), Array(), String(), Number(), Boolean(), Date(), Function() , Error() und RegExp(). 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. 🎜rrreee🎜🎜Die Verwendung des neuen Schlüsselworts ist unerlässlich. 🎜🎜🎜Denken Sie daran, das neue Schlüsselwort zu verwenden, wenn Sie den Konstruktor verwenden. Wenn Sie es versehentlich vergessen haben, verweist dies im Konstruktor auf das globale Objekt (im Browser ist die Standardeinstellung „window“). 🎜rrreee🎜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, da der strikte Modus die Verwendung von nicht zulässt neues Schlüsselwort Rufen Sie den Konstruktor auf. 🎜🎜🎜Konstruktor mit einem höheren Anwendungsbereich🎜🎜🎜Um das Risiko des Vergessens der Verwendung des neuen Schlüsselworts zu beseitigen, können wir einen Konstruktor mit einem höheren Anwendungsbereich erstellen, indem wir dessen Wert beurteilen. 🎜rrreee🎜Nachdem wir diesen Code hinzugefügt haben, können wir den Konstruktor ohne Einschränkungen verwenden. 🎜rrreee🎜Viele integrierte Konstruktoren tun dies. Durch Beurteilung, ob this der aktuelle Typ ist. Wenn der Programmierer vergisst, das Schlüsselwort new hinzuzufügen, geben wir ein über new übergebenes Objekt zurück. 🎜

Fazit

JavaScript hat keine Klasse (kann aber objektorientiert sein), daher ist es für Programmierer, die es gewohnt sind, Klassen zu verwenden, verwirrend. Natürlich unterscheiden sich JavaScript-Konstruktoren nicht von gewöhnlichen Funktionen, sie werden lediglich mit dem Schlüsselwort new generiert. Es ist sehr nützlich, wenn wir „Cookies drucken“ müssen.

Empfohlenes Tutorial: „JavaScript-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Konstruktoren in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!