Compréhension approfondie des prototypes JavaScript (photo)

Comprendre les prototypes

Un prototype est un objet à travers lequel d'autres objets peuvent implémenter l'héritage de propriétés. N'importe quel objet peut devenir un héritage. Tous les objets ont un prototype par défaut. Le prototype lui-même étant également un objet, chaque prototype lui-même a un prototype. Tout objet possède un attribut prototype, enregistré sous la forme : __proto__. Chaque fois que nous définissons un objet, son attribut __proto__ pointe vers son prototype. Un exemple est le suivant :

var foo = {
x: 10,
y: 20
};

Cet attribut sera réservé même si nous ne précisons pas de prototype. Si nous avons un pointeur clair, alors la liste chaînée sera connectée. Il convient de noter que le prototype lui-même possède également un pointeur, qui est l'objet prototype le plus avancé. Un exemple est le suivant :

var a = {
x: 10,
calculate: function (z) {
return this.x + this.y + z
}
};
var b = {
y: 20,
__proto__: a
};

var c = {
y: 30,
__proto__: a
};

// call the inherited method
b.calculate(30); // 60

Utiliser des prototypes

Après avoir compris les principes des prototypes, comment utiliser les prototypes ? Autrement dit, quel est le rôle des prototypes ?

Les débutants généraux, après avoir simplement appris la syntaxe de base de JavaScript, utilisent la programmation orientée fonctions. Le code suivant :

var decimalDigits = 2,
    tax = 5;

function add(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

//alert(add(1, 3));

Obtenez le résultat final en exécutant chaque fonction. Mais à l'aide de prototypes, nous pouvons optimiser une partie de notre code, en utilisant le constructeur :

Premièrement, seules les variables sont stockées dans le corps de la fonction :

var Calculator = function (decimalDigits, tax) {
    this.decimalDigits = decimalDigits;
    this.tax = tax;
};

Son spécifique méthode Définissez-le via l'attribut prototype :

Calculator.prototype = {
    add: function (x, y) {
        return x + y;
    },

    subtract: function (x, y) {
        return x - y;
    }
};
//alert((new Calculator()).add(1, 3));

De cette façon, vous pouvez effectuer les opérations de fonction correspondantes en instanciant l'objet. C'est également la méthode utilisée par les frameworks js généraux. Une autre fonction du

prototype est d'implémenter l'héritage. Tout d'abord, définissez l'objet parent :

var BaseCalculator = function() {
    this.decimalDigits = 2;
};

BaseCalculator.prototype = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

Définissez ensuite l'objet enfant, en pointant le prototype de l'objet enfant vers l'instanciation de l'élément parent :

var Calculator = function () {
    //为每个实例都声明一个税收数字
    this.tax = 5;
};

Calculator.prototype = new BaseCalculator();

On voit que le prototype de Calculator pointe vers Aller vers une instance de BaseCalculator, le but est de laisser Calculator intégrer ses deux fonctions d'ajout (x, y) et de soustraction (x, y). Une autre chose à dire est que puisque son prototype est un). instance de BaseCalculator. Ainsi, quel que soit le nombre d'instances d'objet Calculator que vous créez, leurs prototypes pointent vers la même instance.

Après avoir exécuté le code ci-dessus, nous pouvons voir que, comme le prototype de Calculator pointe vers l'instance de BaseCalculator, sa valeur d'attribut decimalDigits est accessible. Ensuite, si je ne veux pas que Calculator accède au constructeur de BaseCalculator. Valeur d'attribut déclarée, que dois-je faire ? Pointez simplement Calculator vers le prototype de BaseCalculator au lieu de l’instance. Le code est le suivant :

var Calculator = function () {
    this.tax= 5;
};

Calculator.prototype = BaseCalculator.prototype;

Lors de l'utilisation de bibliothèques tierces, parfois les méthodes prototypes qu'elles définissent ne peuvent pas répondre à nos besoins, nous pouvons donc ajouter quelques méthodes nous-mêmes. Le code est le suivant :

//覆盖前面Calculator的add() function
Calculator.prototype.add = function (x, y) {
    return x + y + this.tax;
};

var calc = new Calculator();
alert(calc.add(1, 1));

Prototype Chain

Le prototype de l'objet pointe vers le parent de l'objet, et le prototype du parent pointe vers le parent du parent. Cette relation au niveau du prototype est appelée Prototype Chain.

Lors de la recherche des propriétés d'un objet, JavaScript parcourra la chaîne de prototypes vers le haut jusqu'à ce qu'il trouve la propriété portant le nom donné. Lorsque la recherche atteint le sommet de la chaîne de prototypes, c'est-à-dire Object.prototype, la propriété spécifiée n'est toujours pas trouvée. La propriété renverra un caractère indéfini.

L'exemple est le suivant :

function foo() {
    this.add = function (x, y) {
        return x + y;
    }
}

foo.prototype.add = function (x, y) {
    return x + y + 10;
}

Object.prototype.subtract = function (x, y) {
    return x - y;
}

var f = new foo();
alert(f.add(1, 2)); //结果是3，而不是13
alert(f.subtract(1, 2)); //结果是-1

Nous pouvons constater que la sous-trace suit le principe de regarder vers le haut, tandis que l'ajout a un accident. La raison en est que lorsque l'attribut est recherché, il recherche d'abord ses propres attributs. S'il n'y a pas d'attribut, il recherche ensuite le prototype .

En parlant d'Object.prototype, nous devons mentionner l'une de ses méthodes, hasOwnProperty. Il peut déterminer si un objet contient des propriétés personnalisées plutôt que des propriétés sur la chaîne de prototypes. C'est la seule fonction en JavaScript qui gère les propriétés mais ne recherche pas la chaîne de prototypes. Le code d'utilisation est le suivant :

// 修改Object.prototype
Object.prototype.bar = 1;
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

Afin de déterminer la relation entre l'objet prototype et une instance, la méthode isPrototyleOf doit être introduite. La démonstration est la suivante :

alert(Cat.prototype.isPrototypeOf(cat2)); //true

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!