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

Introduction détaillée à la prise en charge de la plateforme JavaScript Getters et Setters, etc.

高洛峰
Libérer: 2017-01-03 17:06:37
original
1126 Les gens l'ont consulté

D'après les premiers articles de John Resig, grossièrement traduits pour référence.
Heureusement, je pense pouvoir enfin dire : "De nos jours, les Getters et Setters de JavaScript sont très largement utilisés, et ils sont étroitement liés aux intérêts vitaux de chaque développeur JavaScript." Bon sang, j'ai attendu longtemps pour dire ça.
Tout d’abord, jetons un coup d’œil rapide à ce que sont les Getters et les Setters et pourquoi ils sont utiles. Voyons ensuite quelles plates-formes prennent actuellement en charge les Gettets et les Setters.
Getters et Setters
Les Getters et Setters vous permettent d'obtenir ou de définir rapidement les données d'un objet. De manière générale, un objet dispose de deux méthodes, qui sont utilisées pour obtenir et définir une certaine valeur, telles que :

{ 
getValue: function(){ 
return this._value; 
}, 
setValue: function(val){ 
this._value = val; 
} 
}
Copier après la connexion

Un avantage évident d'écrire du JavaScript de cette manière est : vous pouvez l'utiliser pour masquer les propriétés. que vous ne voulez pas d'accès direct aux étrangers. Le code final ressemble à ce qui suit (en utilisant une fermeture pour enregistrer la valeur de l'objet Field nouvellement créé) :

function Field(val){ 
var value = val; 
this.getValue = function(){ 
return value; 
}; 
this.setValue = function(val){ 
value = val; 
}; 
}
Copier après la connexion

Nous pouvons donc l'utiliser comme ceci :

var field = new Field("test"); 
field.value 
// => undefined 
field.setValue("test2") 
field.getValue() 
// => "test2"
Copier après la connexion

simulation Pour "l'attribut de valeur cachée" dans l'exemple ci-dessus, notre code ressemble à ceci :

function Field(val){ 
var value = val; 
this.__defineGetter__("value", function(){ 
return value; 
}); 
this.__defineSetter__("value", function(val){ 
value = val; 
}); 
}
Copier après la connexion

Cependant, vous n'aimez pas écrire comme ça, mais préférez définir des getters et des setters (variables privées ) dans le prototype de l'objet Peu importe où vous l'écrivez), on peut utiliser une autre syntaxe.

function Field(val){ 
this.value = val; 
} 
Field.prototype = { 
get value(){ 
return this._value; 
}, 
set value(val){ 
this._value = val; 
} 
};
Copier après la connexion

Cette syntaxe semble incroyable, mais après l'avoir utilisée pendant un certain temps, il est facile de l'accepter.
Ce qui suit est un autre exemple, qui permet au monde extérieur d'obtenir un tableau de noms d'utilisateur, mais ne peut pas obtenir l'objet utilisateur caché d'origine.

function Site(users){ 
this.__defineGetter__("users", function(){ 
// JS 1.6 Array map() 
return users.map(function(user){ 
return user.name; 
}); 
}; 
}
Copier après la connexion

En bonus, j'ai écrit une méthode qui peut vous aider à implémenter l'héritage d'objet, et prend également en compte les getters et les setters

// Helper method for extending one object with another 
function extend(a,b) { 
for ( var i in b ) { 
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i); 
if ( g || s ) { 
if ( g ) 
a.__defineGetter__(i, g); 
if ( s ) 
a.__defineSetter__(i, s); 
} else 
a[i] = b[i]; 
} 
return a; 
}
Copier après la connexion

Dans ma méthode extend() , vous Je trouverai deux nouvelles méthodes : __lookupGetter__ et __lookupSetter__. Cela sera utile une fois que vous commencerez réellement à utiliser les getters et les setters.
Par exemple, lorsque j'ai écrit pour la première fois la méthode extend(), j'ai rencontré diverses erreurs et j'étais complètement étourdi. Plus tard, j'ai découvert que le problème réside dans une instruction simple : a[i] = b[i]
Si l'objet a a un setter nommé i, l'objet b a un getter également nommé i, a[ i] n'est pas attribué. via d'autres méthodes de définition, mais à partir de la méthode getter de b. Ces deux méthodes __lookup*__ permettent d'obtenir la fonction originale. (Ce paragraphe est un peu obscur, le texte original est le suivant)

Si un setter existait dans l'objet a, nommé i, et qu'un getter existait dans l'objet b, nommé i, la valeur de a[i] n'était pas défini sur l'autre fonction setter, mais sur la valeur calculée à partir de la fonction getter de b. Les deux méthodes __lookup*__ vous permettent d'accéder aux fonctions d'origine utilisées pour les méthodes (vous permettant ainsi d'écrire une méthode d'extension efficace, par exemple). ).
 
Rappelez-vous les points suivants :
Au sein d'un objet, chaque variable ne peut avoir qu'un seul getter ou setter. (Donc, la valeur peut avoir un getter et un setter, mais la valeur n'a jamais deux getters)
La seule façon de supprimer un getter ou un setter est : supprimer l'objet[nom]. delete peut supprimer certaines propriétés communes, getters et setters.
Si vous utilisez __defineGetter__ ou __defineSetter__, il remplacera le getter ou le setter précédemment défini du même nom, même la propriété.
Plateforme
Les navigateurs pris en charge sont :
Firefox
Safari 3
Opera 9.5
(L'article original ne mentionnait pas Chrome, il n'est pas encore sorti)
J'ai utilisé le code suivant pour tester le navigateur :

javascript:foo={get test(){ return "foo"; }};alert(foo.test);
Copier après la connexion

De plus, les deux moteurs suivants prennent également en charge les getters et les setters :
SpiderMonkey
Rhino 1.6R6 (nouveau)

Plus de getters JavaScript et Setters Pour des informations détaillées sur le support de la plate-forme et d'autres articles connexes, veuillez faire attention au site Web PHP 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