Tutoriel d'introduction minimaliste JavaScript (2) : compétences objets et fonctions_javascript

La lecture de cet article nécessite une expérience en programmation dans d'autres langages.

Les types simples en JavaScript incluent :

1. Les chiffres
2. Chaîne
3.Booléen (vrai et faux)
4.null
5.indéfini

Tous les autres types sont des objets (ne nous laissons pas tromper par la valeur de retour de l'opérateur typeof), par exemple :

1. Fonction
2.Tableau
3. Expression régulière
4. Objets (les objets sont naturellement des objets)

Bases des objets

En JavaScript, un objet est une collection d'attributs (un objet est un tableau associatif). Chaque attribut comprend :

1. Nom de l'attribut, doit être une chaîne
2. Valeur d'attribut, qui peut être n'importe quelle valeur sauf indéfinie

Créer un objet à partir d'un littéral d'objet :

Copier le code Le code est le suivant :

//Créer un objet vide via le littéral d'objet {}
var objet_vide = {};

Nom de l'attribut et valeur de l'attribut :

Copier le code Le code est le suivant :

var comparse = {
// "prénom" est le nom de l'attribut, "Jérôme" est la valeur de l'attribut
"prénom": "Jérôme",
// "last-name" est le nom de l'attribut, "Howard" est la valeur de l'attribut
"nom": "Howard"
};

Si le nom de l'attribut est un identifiant légal, les guillemets peuvent être omis :

Copier le code Le code est le suivant :

var vol = {
compagnie aérienne : "Océanic",
Numéro : 815,
départ : {
IATA : "SYD",
Heure : "2004-09-22 14:55",
         ville : "Sydney"
},
arrivée : {
IATA : "LAX",
Heure : "2004-09-23 10:42",
Ville : "Los Angeles"
>
};

Regardons un exemple d'accès à la propriété :

Copier le code Le code est le suivant :

var propriétaire = { nom : "Name5566" };

propriétaire.nom; // "Nom5566"
propriétaire["nom"]; // "Nom5566"

propriétaire.job; // non défini
propriétaire.job = "codeur"; // ou propriétaire["job"] = "codeur";

Si le nom de l'attribut n'est pas un identifiant légal, il doit être placé entre guillemets. Une propriété qui n’existe pas a la valeur indéfinie. Les objets sont passés par référence plutôt que par valeur :

Copier le code Le code est le suivant :

var x = {};
var propriétaire = x;
propriétaire.nom = "Nom5566";
x.nom; // x.nom === "Nom5566"

Ici, x et propriétaire font référence au même objet.

Les propriétés d'un objet peuvent être supprimées à l'aide de l'opérateur delete :

Copier le code Le code est le suivant :

delete obj.x; // Supprime l'attribut x de l'objet obj

Prototype de l'objet

Chaque objet est lié à un objet prototype, et les objets peuvent hériter des propriétés de l'objet prototype. Nous créons un objet via un objet littéral, et son objet prototype est l'objet Object.prototype (l'objet Object.prototype lui-même n'a pas d'objet prototype). Lorsque nous créons un objet, nous pouvons définir l'objet prototype de l'objet (nous discuterons plus tard de la méthode de configuration spécifique). Lorsque vous essayez d'obtenir (plutôt que de modifier) ​​une propriété d'un objet, si la propriété n'existe pas sur l'objet, JavaScript tentera d'obtenir la propriété de l'objet prototype de l'objet si la propriété n'existe pas dans l'objet prototype. , puis à partir de l'objet prototype L'objet prototype est recherché, et ainsi de suite, jusqu'à l'objet prototype Object.prototype. Par rapport à l'obtention d'attributs, lorsque nous modifions un certain attribut de l'objet, cela n'affectera pas l'objet prototype.

Bases des fonctions

En JavaScript, les fonctions sont également des objets, qui sont liés à l'objet prototype Function.prototype (Function.prototype est lié à Object.prototype). La fonction a une propriété nommée prototype, et le type de sa valeur est un objet. Cet objet a une propriété constructeur, et la valeur du constructeur est cette fonction :

Copier le code Le code est le suivant :

var f = fonction() {}

typeof f.prototype; // 'objet'
typeof f.prototype.constructor; // 'fonction'

f === f.prototype.constructor; // vrai

Les fonctions sont des objets. Vous pouvez utiliser des fonctions comme des objets. C'est-à-dire que les fonctions peuvent être enregistrées dans des variables et des tableaux, transmises aux fonctions en tant que paramètres, et que les fonctions peuvent être définies à l'intérieur des fonctions. En remarque, les fonctions ont deux propriétés cachées :

1. Contexte de la fonction
2. Code de fonction

La fonction est créée de la façon suivante :

Copier le code Le code est le suivant :

var f = fonction ajouter (a, b) {
Renvoyer un b ;
>

console.log(f); // Sortie [Fonction : ajouter]

Le nom de la fonction après le mot-clé function est facultatif. Nous formulons le nom de la fonction principalement à plusieurs fins :

1. Pour les appels récursifs
2. Utilisé par les débogueurs, les outils de développement, etc. pour identifier les fonctions

Souvent, nous n'avons pas besoin d'un nom de fonction. Une fonction sans nom de fonction est appelée une fonction anonyme. La liste des paramètres est placée entre parenthèses. JavaScript ne nécessite pas de correspondance entre les paramètres réels et les paramètres formels, par exemple :

Copier le code Le code est le suivant :

var ajouter = fonction (a, b) {
Renvoyer un b ;
>

add(1, 2, 3); // Les paramètres réels et les paramètres formels ne correspondent pas

S'il y a trop de paramètres réels, les paramètres réels supplémentaires seront ignorés. S'il y a trop peu de paramètres réels, la valeur du paramètre formel non attribué ne sera pas définie. La fonction doit avoir une valeur de retour. Si la valeur de retour n'est pas spécifiée via l'instruction return, la valeur de retour de la fonction n'est pas définie.

Une fonction et les variables externes auxquelles elle accède forment une fermeture. C’est la principale beauté de JavaScript.

Appel de fonction

Lorsque chaque fonction est appelée, elle recevra deux paramètres supplémentaires :

1.ce
2.arguments

La valeur de ceci est liée au mode d'appel spécifique. Il existe quatre modes d'appel en JavaScript :

1. Mode d'appel de méthode. Si une propriété d’un objet est une fonction, on l’appelle une méthode. Si une méthode est appelée via o.m(args), il s'agit de l'objet o (on voit que this et o ne sont liés que lorsque l'appel est effectué), par exemple :

Copier le code Le code est le suivant :

var obj = {
Valeur : 0,
incrément : fonction (v) {
This.value = (typeof v === 'number' ? v : 1);
>
};
obj.increment(); // ceci === obj

2. Mode d'appel de fonction. Si une fonction n'est pas une propriété d'un objet, elle sera appelée comme une fonction, et celle-ci sera liée à l'objet global, par exemple :

Copier le code Le code est le suivant :

message = 'Bonjour tout le monde';
var p = fonction() {
console.log(ce.message);
>

p(); // Sortie 'Bonjour tout le monde'

Ce comportement prête parfois à confusion, regardons un exemple :

Copier le code Le code est le suivant :

obj = {
Valeur : 0,
incrément : fonction() {
        var helper = fonction() {
                     // Ajoutez 1 à la valeur dans l'objet global
Cette.valeur = 1;
>

               // l'assistant est appelé en tant que fonction
​​​​ // C'est donc l'objet global
        assistant();
>
};

obj.increment(); // obj.value === 0

Le résultat souhaité doit être :

Copier le code Le code est le suivant :

obj = {
Valeur : 0,
incrément : fonction() {
        var ça = ceci ;
        var helper = fonction() {
Cette.valeur = 1;
>

        assistant();
>
};

obj.increment(); // obj.value === 1

3. Mode d'appel du constructeur. Les fonctions destinées à être préfixées par new sont appelées constructeurs, par exemple :

Copier le code Le code est le suivant :

// Le test s'appelle le constructeur
var Test = fonction (chaîne) {
This.message = string;
>

var monTest = new Test("Hello World");

Une fonction peut être appelée en ajoutant new devant elle (ces fonctions commencent généralement par une majuscule). Après avoir ajouté new, un objet lié à la propriété prototype de cette fonction sera créé, et ce dans le constructeur. être cet objet.

4.appliquer le mode d'appel. La méthode apply de la fonction est utilisée pour appeler la fonction, qui a deux paramètres, le premier est ceci et le second est le tableau de paramètres, par exemple :

Copier le code Le code est le suivant :

var ajouter = fonction (a, b) {
Renvoyer un b ;
>

var ret = add.apply(null, [3, 4]); // ret === 7

Lorsque la fonction est appelée, nous pouvons accéder à un tableau de classes nommé arguments (pas un vrai tableau JavaScript), qui contient tous les paramètres réels, afin que nous puissions implémenter des paramètres de longueur variable :

Copier le code Le code est le suivant :

var ajouter = fonction() {
var somme = 0;
pour (var i=0; i         somme = arguments[i];
>
Somme de retour ;
>

ajouter(1, 2, 3, 4);

Exception

Parlons maintenant du mécanisme de gestion des exceptions de JavaScript. Nous utilisons l'instruction throw pour lancer des exceptions et l'instruction try-cache pour intercepter et gérer les exceptions :

Copier le code Le code est le suivant :

var ajouter = fonction (a, b) {
If (typeof a !== 'number' || typeof b !== 'number') {
​​​​ // lancer une exception
lancer {
nom : 'TypeError',
                message : « ajouter des numéros de besoins »
        };
>
Renvoyer un b ;
>

//Attraper et gérer les exceptions
essayez {
Ajouter("sept");
// e est l'objet d'exception lancé
} attraper(e) {
console.log(e.name ': ' e.message);
>

Ajouter des propriétés aux types JavaScript

Des constructeurs existent pour la plupart des types en JavaScript :

1. Le constructeur de l'objet est Object
2. Le constructeur du tableau est Array
3. Le constructeur de la fonction est Function
4. Le constructeur de string est String
5. Le constructeur des nombres est Number
6. Le constructeur de Boolean est Boolean
7. Le constructeur de l'expression régulière est RegExp

On peut ajouter des propriétés (souvent des méthodes) au prototype du constructeur pour rendre cette propriété disponible aux variables associées :

Copier le code Le code est le suivant :

Number.prototype.integer = function() {
Retour Math[this < 0 ? 'ceil' : 'floor'](this);
>

(1.1).entier(); // 1

Portée

JavaScript nécessite des fonctions pour créer la portée :

Copier le code Le code est le suivant :

fonction() {
// ...
}();

Une fonction anonyme est créée et exécutée ici. Vous pouvez masquer les variables que vous ne souhaitez pas exposer via la portée :

Copier le code Le code est le suivant :

var obj = fonction() {
//Masquer la valeur, inaccessible de l'extérieur
valeur var = 0;

Retour {
// Seule cette méthode peut modifier la valeur
incrément : fonction() {
valeur = 1;
},
// Seule cette méthode peut lire la valeur
         getValue : fonction() {
              valeur de retour ;
>
};
}();

obj.increment();
obj.getValue() === 1;

Hériter

Il existe de nombreuses façons d’implémenter l’héritage en JavaScript.
Lors de la création d'un objet, nous pouvons définir l'objet prototype associé à l'objet. Nous faisons ceci :

Copier le code Le code est le suivant :

//Créer un objet o dont l'objet prototype est {x:1, y:2}
var o = Objet.create({x:1, y:2});

La méthode Object.create est définie dans ECMAScript 5. Si vous utilisez ECMAScript 3, vous pouvez implémenter vous-même une méthode create :

Copier le code Le code est le suivant :

// Si la méthode Object.create n'est pas définie
if (typeof Object.create !== 'function') {
// Créer une méthode Object.create
Objet.create = fonction (o) {
var F = fonction () {};
          F.prototype = o;
​​​​ //Créer un nouvel objet, l'objet prototype de cet objet est o
          renvoie le nouveau F();
};
>

Grâce à la méthode Object.create, nous effectuons un héritage basé sur un prototype : un nouvel objet hérite directement des propriétés d'un ancien objet (par rapport à l'héritage basé sur une classe, il n'est pas nécessaire qu'il existe une classe, et l'objet directement hérite de l'objet). Exemple :

Copier le code Le code est le suivant :

var monMammifère = {
nom : 'Herb le mammifère',
Get_name : function() {
         return this.name;
},
dit : fonction() {
          renvoie ceci en disant || >
};

// Hériter de myMammal
var monChat = Object.create(myMammal);
monChat.name = 'Henrietta';
monChat.saying = 'miaou';
monChat.purr = fonction(n) {
var je, s = '';
pour (i = 0; i < n; i = 1) {
          si (s) {
          s = '-';
>
        s = 'r';
>
Retour s;
};
monCat.get_name = function() {
Renvoie this.says() ' ' this.name ' ' this.says();
};

Le code ci-dessus est très simple, mais il ne peut pas protéger les membres privés. Nous pouvons utiliser le modèle de module. Dans le modèle de module, un certain type d'objet est généré par une fonction, et la portée de la fonction est utilisée pour protéger les membres privés des accès externes :

Copier le code Le code est le suivant :

// fonction mammifère, utilisée pour construire des objets mammifères
var mammifère = fonction (spec) {
// c'est un objet construit
var ça = {};

// La méthode publique get_name est accessible en externe
That.get_name = function() {
// spec.name n'est pas accessible directement de l'extérieur
         return spec.name;
};

// La méthode publique indique qu'elle est accessible en externe
Cela dit = function() {
// spec.saying n'est pas accessible directement de l'extérieur
          return spec.saying || };

Renvoyez ça ;
};

//Créer un objet mammifère
var monMammal = mammifère({name: 'Herb'});

//fonction cat, utilisée pour construire des objets chat
var cat = fonction (spéc) {
spec.saying = spec.saying || 'miaou';

// cat hérite du mammifère, donc l'objet mammifère est construit en premier
var that = mammifère(spec);

// Ajouter la méthode publique purr
That.purr = fonction(n) {
        var i, s = '';
pour (i = 0; i < n; i = 1) {
                  si (s) {
                s = '-';
            }
          s = 'r';
>
        return s;
};

// Modifier la méthode publique get_name
That.get_name = function() {
          return that.says() ' " spec.name
' ' that.says();
         retournez-le ;
};
};

//Créer un objet chat
var monChat = chat({nom : 'Henrietta'});

Dans le modèle de module, l'héritage est obtenu en appelant des constructeurs. De plus, on peut également accéder aux méthodes de la classe parent dans la sous-classe :

Copier le code Le code est le suivant :

Object.prototype.superior = fonction (nom) {
    var ça = ceci, méthode = ça[nom];
    return function() {
        return method.apply(that, arguments);
    };
};
 
var coolcat = fonction (spéc) {
    // 获取子类的 get_name 方法
    var that = cat(spec), super_get_name = that.superior('get_name');
    that.get_name = fonction(n) {
        return 'like ' super_get_name() ' baby';
    };
    rends ça ;
};