Maison > interface Web > js tutoriel > le corps du texte

Que sont les méthodes du constructeur js ?

PHP中文网
Libérer: 2017-06-28 11:46:09
original
1112 Les gens l'ont consulté

Ce qui suit vous apportera une brève discussion sur les méthodes et le prototype du constructeur js. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence.

Lorsque la méthode est écrite dans le constructeur, nous l'appelons la méthode dans la fonction, et lorsque la méthode est écrite sur l'attribut prototype, nous l'appelons la méthode sur le prototype.

•Méthodes au sein de la fonction : En utilisant les méthodes au sein de la fonction, nous pouvons accéder aux variables privées à l'intérieur de la fonction si l'objet que nous sortons du constructeur est nouveau. a besoin de nous Pour faire fonctionner des variables privées à l'intérieur du constructeur, nous devons envisager d'utiliser des méthodes dans la fonction à ce moment

•Méthodes sur le prototype : Quand nous devons passer. a Lorsqu'une fonction crée un grand nombre d'objets, et que ces objets ont de nombreuses méthodes ; alors nous devons envisager d'ajouter ces méthodes au prototype de la fonction. Dans ce cas, l'empreinte mémoire de notre code est relativement faible.

•Dans les applications réelles, ces deux méthodes sont souvent utilisées en combinaison ; nous devons donc d'abord comprendre ce dont nous avons besoin, puis choisir comment l'utiliser


// 构造函数A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

// 构造函数B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();
Copier après la connexion

Écrit deux constructeurs, le premier est A, ce constructeur contient une méthode sayHello ; le second est le constructeur B, nous avons écrit la méthode sayHello sur l'attribut prototype du constructeur B. L'écriture de méthodes à l'intérieur du constructeur augmente le coût d'initialisation d'un objet via le constructeur. L'écriture de méthodes sur l'attribut prototype réduit effectivement ce coût. Vous pouvez avoir l'impression que l'appel de méthodes sur un objet est plus rapide que l'appel de méthodes sur sa chaîne de prototypes. En fait, ce n'est pas le cas si votre objet ne le fait pas. J'ai beaucoup de prototypes, leurs vitesses sont en fait à peu près les mêmes

De plus, quelques points à noter :

• Tout d'abord, si vous définissez une méthode sur l'attribut prototype d'une fonction, gardez à l'esprit que si vous changez une méthode, elle sera générée par ce constructeur. La méthode de tous les objets sera modifiée

• Un autre point est le. problème de promotion des variables. On peut jeter un oeil au code suivant :


func1(); // 这里会报错,因为在函数执行的时候,func1还没有被赋值. error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); // 这个会被正确执行,因为函数的声明会被提升.
function func2() {
  console.log('func2');
}
Copier après la connexion

• Concernant la question de la sérialisation des objets. ne sera pas sérialisé. Vous pouvez voir le code suivant :


function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));
Copier après la connexion

Nous pouvons voir que le résultat de sortie est {"name": "dreamapple">

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal