Object oriented programming (2)

Want to fly ash 2021-09-15 08:22:14
object oriented programming


In the last article, I knew how to use object Or object literal to facilitate the creation of objects , But there are still some shortcomings , This causes multiple objects that create the same interface to need to be defined repeatedly , Poor reuse rate of code , So in ES6 Formal support for classes and inheritance .

Factory mode

function person(name,sex,year){
   let o=new Object();
   let o.name=name;
   let o.sex=sex;
   let o.year=year;
   let o.selfDescriptor=function(){
    console.log(this.name)  
  }
   return o;
}
let person1=person('yangyang',' male ',24);
console.log(person1);
//{
// name: 'yangyang',
// sex: ' male ',       
//year: 24,
// selfDescriptor: [Function (anonymous)]
//}
 Copy code 

Although factory pattern can create similar objects , But it doesn't solve the problem of object identification

Constructor Pattern

function Person(name,sex,age){
this.name=name;
this.sex=sex;
this.age=age;
this.sayname=function(){
​
console.log(this.name);
}
}
​
let person1=new Person('fangfua',' Woman ',33);
let person1=new Person('lulu',' male ',21);
person1.sayname();//fangfua
person2.sayname();//lulu
 Copy code 

Different from the factory model

  • Create objects that are not shown
  • Properties and methods are assigned directly to this
  • No, return
  • Function names need to be capitalized

new What happens inside the operator when it creates an instance

  1. A new object is created in memory

  2. Inside this new object [[Prototype]] Property is assigned to the constructor prototype attribute

  3. In the constructor this Assigned to this new object

  4. Code to execute the constructor , Add properties to the new object

  5. If the constructor returns a non empty object , Returns the object , otherwise , Return the newly created object

    When constructing instantiation, if no parameters are passed , The parentheses after the constructor can be deleted

Archetypal model

Using prototype objects , The properties and methods defined above can be shared by instances ;

function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
​
console.log(this.name);
}
}
​
let person1=new Person();
let person1=new Person();
person1.sayname();//fangfua
person2.sayname();//fangfua
 Copy code 

Just create a function , Will follow the rules , Create a... For the function prototype Attribute points to prototype object , The prototype object will also have a constructor Properties of , Point to the constructor associated with it ;

Every time you create an instance , Constructor's [[prototype]] Property will be assigned to the instance object , Namely proto

Be careful : Instances are directly related to prototypes , Instances and constructors do not

How to judge that the instance object and constructor have the same prototype object

Prototype .isPrototypeOf( example )

Example :Person.prototype.isPrototypeOf(person1)//true

Object.getPrototypeOf() Returns the internal properties of the parameter [[prototype]] Value

Prototype level

function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
​
console.log(this.name);
}
}
​
let person1=new Person();
let person1=new Person();
​
person1.name='gungun';
console.log(person1.name);//gungun From instance
console.log(person2.name);//fangfua From the prototype
​
​
 Copy code 

Find a property on the instance object , It will look up from the instance itself , If you don't find it, you'll find it from the prototype object

Object.hasOwnProperty() Method can determine whether the attribute appears on the instance or prototype (true Yes, on the example ,false It's on the prototype )

There are three methods to traverse the property name or value on the instance or prototype

for...in

Object.keys()

function Person(){
Person.prototype.name="fangfua";
Person.prototype.sex=' Woman ';
Person.prototype.age=33;
Person.prototype.sayname=function(){
​
console.log(this.name);
}
}
​
let keys=Object.keys(Person.prototype);
console.log(keys)//name,sex,age.sayname
 Copy code 

Object.values()

const o={
foo:'bar',
baz:1,
qux:{}
}
​
console.log(Object.values(o));//['bar',1,{}]
 Copy code 
版权声明
本文为[Want to fly ash]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210909135431064v.html

  1. Fatal Magic: countless sacrifices under gorgeous magic
  2. Mon expérience d'entrevue principale est partagée avec l'expérience d'apprentissage
  3. Mon expérience d'entrevue Android de Tencent partage, plugin Android
  4. Partage de questions d'entrevue Java à double saut d'octets non - premier cycle, un article vous apprend à gérer l'entrevue réseau informatique,
  5. Questions d'entrevue CSS (notes)
  6. Syntaxe de base de la classe
  7. Héritage de classe
  8. Mise en œuvre simple de 30 minutes pour un filtrage rapide des chaînes de tableau 10W +.
  9. Vue 3 tri des documents démarrage rapide
  10. Collection de code de base JavaScript (1)
  11. National secret nginx Container actual Fighting
  12. Quelques lignes de css pour rendre votre page tridimensionnelle
  13. C'est super détaillé, de "finir" ce 300 pages de 1000 questions d'entrevue,
  14. Take you in-depth understanding of nginx basic login authentication (including all configuration steps and in-depth analysis)
  15. Après avoir mangé, assurez - vous d'augmenter votre salaire de 5K et de rester debout tard pour trier les questions d'entrevue Java de millet.
  16. Résumé des questions d'entrevue pour les entreprises Internet nationales de première ligne, qui doivent être posées lors de l'entrevue d'emploi Java de la grande usine en 2021,
  17. "L'amour à première vue", la nouvelle BMW 2 coupe réelle, vous êtes surpris?
  18. Questions d'entrevue de test avancé de Dachang, liste des compétences de base de l'entrevue Java,
  19. Tableau 2D trié par un champ
  20. JS est souvent utilisé pour déterminer si l'objet est vide
  21. Contrôle de l'arbre en vue converti en style de table
  22. CSS3 animation flash Effect
  23. Discuter des propriétés de la file d'attente pour l'événement bloc
  24. Node around USModules
  25. Webpack - - Premier aperçu (concept de base)
  26. Mise en œuvre du cadre de base mvvm par JS natif
  27. Calculer les propriétés par rapport aux auditeurs, etc.
  28. Configuration standard dockerfile et docker-composer.yml
  29. Collection de questions d'entrevue HTML
  30. Conteneur, définir la largeur et la hauteur ne répond pas?
  31. Introduction et syntaxe des objets (mise à jour à long terme)
  32. Bubble Mart invests in cat galaxy, which is a vertical e-commerce platform around the quadratic element
  33. Exigences et dépendances dans package-lock.json
  34. Mouvement tridimensionnel de la terre, du ciel et de la lune basé sur three.js
  35. Compréhension et analyse de l'objet de base JS
  36. Simple use of status data management (context, mobx, Redux)
  37. Simulated drumming
  38. Array method
  39. Performance optimization issue 03 - HTTP request optimization
  40. Vue learning -- watch listener
  41. Learn more about nexttick in Vue
  42. Talk about some moves used by vue3.0 in the project - External skill chapter (I)
  43. JavaScript genrator generator
  44. La dernière réponse à l'entrevue de développement Android, l'hiver froid de l'industrie
  45. Maserati's motorcycle has less than 10 in the world. It is definitely a work of art
  46. 2021 partage des questions du dernier examen écrit d'entrevue Android, pas d'accord
  47. Programmation asynchrone Java scirp, développement frontal de base
  48. 2021 dernier examen écrit d'entrevue Android, écrit trop bien
  49. Quels aspects doivent être pris en considération dans le tableau principal du distributeur libre - service?
  50. He inherited his mother's hundreds of millions of property for his boyfriend to squander. Unexpectedly, he was ruthlessly abandoned when he had 100 yuan left
  51. The fuel cost is half less than that of fuel vehicles at the same level. Is it really cheap to use song Pro DM?
  52. Le dernier résumé de l'expérience d'entrevue d'embauche de l'école Android de l'usine est nécessaire pour l'usine
  53. Le dernier dictionnaire avancé de programmeurs d'usine, l'expérience d'entrevue d'embauche de l'Agence de développement Android
  54. La dernière collection d'entrevues Android Golden nine Silver ten
  55. L'expérience d'entrevue de l'Ingénieur d'algorithme de saut d'octets, 2 mois d'entrevue Tencent, station B, Netease et ainsi de suite sur 11 entreprises résumé!
  56. La dernière collection d'entrevues d'Android Golden nine Silver ten recommande un projet github
  57. Yuan Li's recent situation revealed that he was obsessed with public welfare, dressed simply and fearless, grew fat, and married an 11-year-old husband
  58. Initial experience of template tool plop of [front end Engineering]
  59. Partager les dernières questions d'entrevue Android haute fréquence avec quelques conseils
  60. Iteratable object and class arrays