Explication détaillée du constructeur JavaScript

Avoir une bonne compréhension des constructeurs est la clé pour maîtriser le langage JavaScript. Nous savons tous que JavaScript n'est pas comme les autres langages. Il n'a pas le mot-clé class, mais il a un constructeur très similaire à function. Dans cet article, nous apprendrons en détail comment les constructeurs JavaScript construisent des objets.

Les constructeurs sont très similaires aux fonctions ordinaires, mais nous les utilisons via le mot-clé new. Il existe deux principaux types de constructeurs, les constructeurs native (Array, Object) qui peuvent être générés automatiquement dans l'environnement d'exécution, et les constructeurs personnalisés dans lesquels vous pouvez définir vos propres méthodes et propriétés.

L'utilisation de constructeurs est très efficace lorsque vous souhaitez créer de nombreux objets similaires (avec les mêmes propriétés et méthodes). La plupart des programmeurs suivent la convention consistant à utiliser une lettre majuscule pour distinguer les constructeurs des fonctions ordinaires. Jetez un œil au code ci-dessous.

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

La dernière ligne de code crée un objet Book et l'assigne à une variable ; une fois cette opération terminée, même si le constructeur Book ne fait rien, myBook est également une instance de Book . Comme vous pouvez le voir, à part mettre la première lettre en majuscule et utiliser le mot-clé new, il n'y a aucune différence entre un constructeur et une fonction normale.

Déterminer le type d'instance

Pour déterminer si un objet est une certaine instance, nous pouvons utiliser l'opérateur instanceof :

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

Remarque : Si le côté droit n'est pas une instance d'une fonction, une erreur sera signalée :

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

Une autre méthode consiste à utiliser l'attribut constructor Toutes les instances d'objet ont un constructor. attribut, qui pointe vers le constructeur créé.

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

est comme celui de myBook constructor pointant vers Book. Tous les objets héritent de l'attribut constructor de leur prototype :

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

Bien que l'utilisation de constructor puisse être utilisée pour détecter les types d'instances, il est recommandé d'utiliser la méthode instanceof. Parce que l'attribut constructor peut être remplacé... il n'est pas très fiable à utiliser.

Constructeur personnalisé

Le constructeur est comme un tampon à cookies. Tous fabriqués à partir de la même impression, ils se ressemblent tous (il en va de même pour les hommes qui n’ont pas de bonne chose). Le constructeur

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

Book nécessite deux paramètres Lorsque vous utilisez le mot-clé new pour construire un objet, les deux paramètres formels seront transmis au Book et au name du objet. 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);

Comme vous pouvez le constater, nous pouvons créer rapidement un autre livre en passant différents paramètres. La même chose est vraie pour les

et Array() de JavaScript. Date()

Méthode Object.defineProperty La méthode

peut être utilisée dans le constructeur pour configurer les propriétés. 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

Le code ci-dessus appelle la méthode ancêtre. Il fournit les interfaces

et getter. La méthode setter est chargée de renvoyer la valeur encapsulée. La méthode getter accepte les paramètres et attribue la valeur à l'attribut. Lorsque l'on opère un accès sur une propriété, ces deux méthodes sont appelées. En configurant setter, nous pouvons définir si la valeur peut être supprimée. configurable

La notation littérale d'objet est le constructeur préféré

Le langage JavaScript possède neuf constructeurs intégrés :

, Object(), Array(), String(), Number(), Boolean(), Date(), Function() et Error(). Lorsque nous devons créer ces valeurs, nous sommes libres d'utiliser des littéraux ou des constructeurs. Mais dans les mêmes circonstances, les objets littéraux sont non seulement plus faciles à lire, mais aussi plus rapides car ils peuvent être optimisés lors de l'analyse. Utilisez donc des littéraux lorsque vous devez utiliser des objets simples. 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"

L'utilisation du mot-clé new est essentielle.

N'oubliez pas d'utiliser le mot-clé

lorsque vous utilisez le constructeur. Si vous oubliez accidentellement, alors le new pointe vers le this. objet (la valeur par défaut est global dans le navigateur). 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);

Le résultat de l'exécution du code ci-dessus est le suivant :

S'il est en mode strict, le code ci-dessus générera une erreur car Le mode strict ne nous permet pas d'appeler le constructeur sans utiliser le mot-clé

. new

Constructeur avec une portée plus élevée

Afin de résoudre le risque d'oubli d'utiliser le mot-clé

, nous pouvons créer un constructeur avec une portée plus élevée en jugeant la valeur de new . this

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

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

Après avoir ajouté ce code, nous pouvons utiliser le constructeur sans retenue.

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篇

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!