Héritage de classe

Déchets lhpi 2021-09-15 06:44:15
ritage classe


  1. Es6Moyenneclass Peut être considéré comme un sucre grammatical
  2. NouveauclassL'écriture rend simplement l'écriture du prototype d'objet plus claire,Programmation plus orientée objet.
  3. ClassAdoptionexendsMots clés pour l'héritage
class Father{
}
class Son extends Father{
}
Copier le Code
  1. Code Définit unSon,AdoptionexendsSuccessionFatherToutes les propriétés et méthodes de la classe,Comme aucun code n'a été déployé,Donc les deux classes sont exactement les mêmes,Est égal à une copie complète d'unFatherCatégorie
class Son extends Father{
constructor(name,age,city){
super(name,age)
this.city=city
}
toString () {
return this.city+ " " +super.toString();//Appelé parenttoString()
}
}
Copier le Code
  1. super Mots clés,Constructeur de classe,Utilisé pour créer un nouveau parentthisObjet.

Obligatoire pour les sous - classesconstructorAppelé dans la méthodesuperMéthodes,Sinon, une erreur est signalée lors de la création d'une nouvelle instance,Si vous n'appelez pas superMéthodes,Pas depuis RaythisObjet; 6. ES5L'héritage de,En fait, c'est la ligne qui crée l'objet d'instance du tonnerrethis, Puis ajoutez la méthode de la classe mère à thisAllez.,(parent.apply(this)),ES6Le mécanisme d'héritage de, En fait, c'est d'abord créer l'objet this, Il faut d'abord appeler superInfraction,Puis modifiez - le avec le constructeur de la Sous - classethis;Si la Sous - classe n'est pas définiecinstructorMéthodes, Cette méthode ajoutera par défaut , C'est - à - dire, qu'il y ait ou non une définition de sous - classe, il y a constructorMéthodes.

class Son extends Father{}
//égal à
class Son extends Parent{
constructor(...args){
super(...args)
}
}
Copier le Code
  1. Dans le constructeur de la Sous - classe,Appel seulementsuperAprès,Pour utiliserthisMots clés.

Parce que les composants d'une instance de sous - classe , Est basé sur le traitement de l'Instance parent ,Aprèssuper Méthode pour renvoyer l'Instance parent ;

class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
}
class Son extends Father{
constructor(x,y,color){
//Doit être appelé en premiersuper
super(x,y)
this.color=color;
console.log(this.color,x,y)
}
}
let s =new Son(25,8,'green')
Copier le Code
  1. Object.getPrototypeOf() La méthode est utilisée pour obtenir la classe mère de la classe Enfant
Object.getPrototypeOf(Son)===Father
// Utilisé pour déterminer si l'héritage
Copier le Code
  1. superMots clés

Peut être utilisé comme fonction ou objet . ·super Quand on appelle une fonction , Constructeur représentant la classe parent ,Es6Exigences, Le constructeur de la Sous - classe doit exécuter un superFonctions.

class Father { }
class Son extends Father {
constructor () {
super();
}
}
Copier le Code

super Serein représente le parent FatherLe constructeur de, Mais la Sous - classe est retournée sonExemples,Oui.superÀ l'intérieurthis Tout ce que je veux, c'est son,Donc,,super() Ici, c'est l'équivalent de Father.constructor.call(this) Et en fonction ,super() Intelligence dans le constructeur de la Sous - classe .

class A{
constructor(){
console.log(new.target.name)
}
}
class B extends A{
constructor(){
super()
}
}
new A();
new B();
//new.target Est la fonction actuellement en cours d'exécution ,Insuper()Au moment de l'exécution, Il pointe vers la Sous - classe BLe constructeur de, Les deux parties sont les parents ALe constructeur de,super()À l'intérieurthisC'est ça.B
Copier le Code

· super En tant qu'objet ,Dans la méthode normale, Pointez vers l'objet prototype de la classe mère ,En méthode statique, Pointez vers le parent .

class Father{
getName(){
return '123'
}
}
class Son extends Father{
constructor{
super();
consloe.log(super.getName())
}
}
let s=new Son();
Copier le Code

Sous - catégoriessonDanssuper.getName()Oui.super Utilisé comme objet ,À ce moment - là,,super Dans la méthode normale de libération ,PointageFather.prototype,Alors...super.getName()C'est l'équivalentFather.prototype.getName(),Parce quesuper Objet circulaire pointant vers la classe mère , Par conséquent, la méthode ou l'attribut défini sur l'Instance parent ne peut pas passer superAppelé.

class Father {
constructor () {
this.p =2
}
}
class Son extends Father {
get m ( ) {
return super.p;
}
getValue ( ) {
return super.a;
}
}
let s = new Son();
s.m //undefined
Copier le Code

pC'est un parent.FatherPropriétés de l'instance pour,super.p Je ne peux pas le citer Si l'implémentation est définie sur un objet prototype parent ,superOn peut récupérer.

class A {}
A.prototype.x = 4;
class B extends A {
constructor() {
super();
console.log(super.x) // 4
}
}
let b = new B()
Copier le Code

PropriétésXEst défini dansA.prototype Là - haut. super.x Peut prendre sa valeur ,Es6Le règlement,Adoptionsuper En appelant la méthode de la classe mère ,super Les sous - classes seront liées this

class Father {
constructor () {
this.x =1;//C'estthisC'est ça.FatherExemple d'objet
}
print () {
console.log(this.x);
}
}
class Son extends Father {
constructor () {
super();
this.x = 2;//C'estthisC'est ça.SonExemple d'objet
}
m() {
super.print();
}
}
let s = new Son();
s.m();
//2
Copier le Code

super.print() Bien que l'appel soit Father.prototype.print(),MaisFather.prototype.print() Lier les sous - classes sonDethis, Provoque l'entrée 2Au lieu de1 , En fait super.print.call(this) SisuperComme objet, Pour les méthodes statiques ,À ce moment - là,super Pointera vers le parent , Au lieu de l'objet prototype de la classe mère .

class Parent {
//Méthode statique
static myMethod (msg) {
console.log("static",msg);
}
//Méthode normale
myMethod (msg) {
console.log("instance" ,msg);
}
}
class Child extends Parent {
//Méthode statique
static myMethod(msg) {
super.myMethod(msg);
}
//Méthode normale
myMethod (msg) {
super.myMethod(msg);
}
}
Child.myMethod(1);
//static 1
var child = new Child();
child.myMethod(2);
//instance 2
Copier le Code

super Pointer vers la classe mère dans une méthode statique , Pointer vers l'objet prototype de la classe mère dans la méthode normale . UtilisersuperQuand, Doit être explicitement spécifié comme fonction 、 Toujours utilisé comme objet .

ClasseprototypeAttributs etprotoPropriétés

  1. La plupart des navigateurs es5 En cours de réalisation ,Chaque objet aProtoPropriétés, Pointer vers le constructeur correspondant prototypePropriétés.

class Le sucre syntaxique en tant que constructeur ,En même tempsprototypeAttributs etprotoPropriétés, Les collègues ont deux chaînes d'héritage . * Sous - catégoriesprotoPropriétés, Identifier l'héritage du constructeur , Toujours pointé vers le parent * Sous - catégoriesprototypePropriétéprotoPropriétés,Héritage de la représentation,Toujours pointer vers le parentprototypePropriétés.

class A{
}
class B{
}
//Object.prototype.__proto__
// Object.setPrototypeOf()Mise en œuvre de la méthode:
// Object.setPrototypeOf = function (obj, proto) {
// obj.__proto__ = proto;
// return obj ;
// }
//Object.setPrototypeOf( B.prototype , A.prototype );
//équivalent à
//B.prototype.__proto__ = A.prototype ;
//Object.setPrototypeOf(B, A);
//équivalent à
//B.__proto__ = A;
//B L'Instance hérite de AExemples
Object.setPrototypeOf(B.prototype,A.prototype);
//B L'Instance hérite de APropriétés statiques pour.
Object.setPrototypeOf(B,A)
const b=new B();
Copier le Code

Ces deux chaînes d'héritage peuvent être interprétées comme : En tant qu'objet ,Sous - typeBPrototypes(protoPropriétés),C'est un parent.(A), En tant que constructeur ,Sous - catégoriesB Objet circulaire de (prototypePropriétés) Est l'objet prototype de la classe mère (prototype)Exemples.

extends Objectifs hérités de

extends Le mot - clé peut être suivi de plusieurs types de valeurs :

class B extends A{
}
Copier le Code

Tant queAIl y a unprototype Fonction de la propriété , Peut être BSuccession, Parce que la fonction prototypePropriétés(Sauf queFunction.prototypeFonctions),Donc,A Peut faire n'importe quelle fonction .

  1. Héritage de la Sous - classeObjectCatégorie
class A extends Object {
}
A.__proto__ === Object //true;
A.prototype.__proto__ === Object.prototype //true
A C'est le constructeur ObjectCopie de,A Un exemple de ObjectExemples.
Copier le Code
  1. Il n'y a pas d'héritage
 class A{}
A.__proto__ === Function.prototype //true
A.prototype.__proto__ = Object.prototype //true
Copier le Code

A En tant que classe de base , Il n'y a pas d'héritage , C'est une fonction normale , Donc l'héritage direct Function.prototype.MaisA Renvoie un objet vide après l'appel (Oui.ObjectExemple),Alors...A.prototype.protoPointer vers le constructeur(Object)DeprototypePropriétés. #####Exemple deprotoPropriétés Instance de sous - classeprotoPropriétéprotoPropriétés,Pointer vers l'Instance parentprotoPropriétés, C'est - à - dire que le prototype de la Sous - classe est le prototype de la classe mère .

Héritage du constructeur natif

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
Copier le Code

extends Les mots - clés ne sont pas seulement utilisés pour hériter des classes , Peut également être utilisé pour hériter des constructeurs natifs . Ainsi, sur la base de la structure de données Native , Définir sa propre structure de données .

版权声明
本文为[Déchets lhpi]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210914170046016k.html

  1. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  2. 手把手教你搭建微信小程序服务器(HTTPS)
  3. sqli-labs-less-18 http头user agent+报错注入
  4. Génération de code nest pour l'outil CLI de nestjs
  5. JS | This
  6. Augmentation des variables
  7. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  8. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  9. Summary of basic knowledge points of JavaScript language (mind map)
  10. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  11. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  12. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  13. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  14. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  15. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  16. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  17. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  20. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  21. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  22. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  23. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  24. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  25. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  26. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  27. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  28. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  29. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  30. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  31. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  32. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  33. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  34. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  35. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  36. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  37. Basic knowledge of components in Vue "I"
  38. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  39. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  40. Want to know the implementation and application of single instance mode in the front end?
  41. Progressive react source code analysis - Implementation of ref API
  42. Webpack5 learning -- code compression
  43. Front and back end data interaction (V) -- what is Axios?
  44. Knowledge points related to react routing
  45. On demand introduction of react antd + customized theme
  46. GPG management submission signature verification
  47. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  48. After brushing the 12 sliding windows, you can tear the front end by hand
  49. Vue fruit bookkeeping - money.vue component
  50. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  51. JS contains the function code
  52. Typescript record (I)
  53. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  54. Is componentization obsolete? Introduction to micro front end architecture
  55. Leetcode day 18
  56. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  57. Design pattern -- agent pattern
  58. Vs Code theme recommendation in 2021
  59. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  60. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android