1. Réserve de connaissances:
1. Fonctions qui énumèrent les noms d'attribut:
(1) Pour ... IN: Vous pouvez traverser toutes les propriétés énumérables dans l'objet (y compris les propres propriétés et les propriétés héréditaires) dans le corps de la boucle.
(2) Object.Keys (): Renvoie un tableau (attributs énumérés)
(3) object.getownpropertyNames (): toutes les propres propriétés
3. Propriétés des attributs: attributs de données et attributs d'accessoires
(1) Attributs de données: valeur configurable énumérable écrite
L'attribut de données n'a qu'une seule valeur simple;
(2) Attributs d'accessoires: Écrire (set), lire (obtenir), énumérable, configurable
Les accessoires ne sont pas écrivains (c'est-à-dire qu'il n'y a pas de fonctionnalité écrite).
Si l'attribut a une méthode définie, cet attribut est écrivable et il y a une méthode GET, cet attribut est lisible.
4. Méthodes pour définir les propriétés d'attribut: objet.defineproperty (objet, attribut, objet descripteur)
5. Obtenez l'objet descripteur de la propriété: object.getownpropertyDescriptor (objet, propriété)
2. Exemple
1. Selon l'utilisation de pour ... IN, nous pouvons écrire une méthode pour simuler "l'héritage":
<script type = "text / javascript"> var child = {}; var mère = {nom: "Zhangzhiying", Lastage: 21, Sex: "Femme"}; fonction extension (cible, source) {pour (var p dans source) {cible [p] = source [p]; } return cible; } Extend (enfant, mère); console.log (enfant); // <strong> objet {nom: "Zhangzhiying", Lastage: 21, Sex: "Femme"} </strong> </cript>2. Utiliser pour en traverser les propriétés de l'objet Prototype, puis attribuer des valeurs à nos objets vides un par un, réalisant ainsi "l'héritage". Cette idée est très correcte. Modifions l'exemple ci-dessus:
<script type = "text / javascript"> var child = {}; var mère = {nom: "Zhangzhiying", Lastage: 21, <strong> set age (value) {this.lastage = value; }, get age () {return this.lastage + 1; }, </strong> sexe: "femelle"}; <br> <strong> mère.age = 15; </strong> // Il existe une méthode définie, qui a une fonction écrivable (cible, source) {pour (var p dans la source) {cible [p] = source [p]; } return cible; } Extend (enfant, mère); console.log (enfant); // <strong> objet {nom: "Zhangzhiying", Lastage: 15, Âge: 16, Sex: "Femme"} </strong> </cript>Vous pouvez voir qu'une paire d'ensembles est utilisée dans le code, obtenez; où l'âge est un attribut accessoire.
Le résultat de l'exécution: un objet normal qui ne contient pas le jeu, obtenez.
Conclusion: "L'héritage" mis en œuvre par FOR ne gère pas l'ensemble et l'obtention, il convertit l'attribut accessoire (âge) en un attribut de données statique.
3. Définir les attributs de données pour l'objet mère
<script type = "text / javascript"> var child = {}; var mère = {name: "zhangzhiying", lastage: 21, set age (value) {this.lastage = value; }, get age () {return this.lastage + 1; }, sexe: "femelle"}; Object.defineProperty (mère, "Lastage", {Writeable: false}); // Définit Lastage pour ne pas être Mother.age scénarisable = 15; // Définit invalide, parce que la valeur de Lastage reste inchangée, Lastage + 1 reste inchangée, c'est-à-dire que l'âge reste une fonction inchangée Extension (cible, source) {pour (var p dans la source) {cible [p] = source [p]; } return cible; } Extend (enfant, mère); console.log (enfant); // objet {nom: "Zhangzhiying", Lastage: 21, âge: 22, sexe: "femelle"} child.lastage = 12; // Le résultat montre que Lastage change, indiquant que Child.Lastage n'hérite pas de la fonctionnalité de Mother.Lastage. Utilisons la méthode GOSOWNPROPERTYDESRIPTOR () pour confirmer <br> Console.log (object.geto<Em id = __ mcedel> </cript> </em>
Conclusion: Pour atteindre l'héritage, nous devons encore résoudre les caractéristiques d'attribut du problème -> "Héritage".
4. Version complète
<script type = "text / javascript"> var child = {}; var mère = {name: "zhangzhiying", lastage: 21, set age (value) {this.lastage = value; }, get age () {return this.lastage + 1; }, sexe: "femelle"}; Object.defineProperty (mère, "Lastage", {Writeable: false}); mère.age = 15; <Span style = "Color: # 333399"> <strong> fonction étend (cible, source) {var noms = object.getownpropertyNames (source); // Obtenez tous les noms de propriétés pour (var i = 0; i <names.length; i ++) {if (names [i] dans Target) continue; // Si cette propriété existe, sauter (dans un héritage prototype, si l'attribut de la propriété propre et la propriété de l'objet prototype sont dupliqués, conservez la propriété propre) var desc = objet.getownpropertyDescriptor (Source, noms [i]); // Obtenez l'objet descripteur de l'attribut mère (c'est-à-dire l'ensemble des caractéristiques d'attribut, représenté par l'objet descripteur dans ES5) objet.defineProperty (Target, noms [i], desc); // Obtenez l'objet de descripteur de la mère à la définition d'attribut de l'enfant} Return Target; } </strong> </span> Extension (enfant, mère); console.log (enfant); child.lastage = 12; console.log (object.getownpropertyDescriptor (enfant, "Lastage")); console.log (enfant); </cript>Résultats finaux:
Vous pouvez clairement voir l'impression trois fois, l'enfant "hérité" pour définir et obtenir, la valeur de la dernière apparition n'a pas changé, et Writable est également faux.
Résumé: Je lis récemment le "Guide faisant autorité de JavaScript". Je vais résumer certaines expériences. S'il y a des erreurs, veuillez me corriger et apprendre et progresser ensemble ~
L'explication détaillée ci-dessus de l'héritage de JavaScript à l'aide de fonctions est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.