JavaScript Review sketch - 1

Tankeke 2021-09-15 05:01:48
javascript review sketch


Chaîne prototype

ChaqueJavaScriptObjet(nullException)Un autre objet est associé au moment de la création,Cet objet est ce qu'on appelle un prototype,Chaque objet est tiré du prototype"Succession"Propriétés.

image.png

Peut être utiliséObject.getPrototypeOf()Pour obtenir le prototype d'un objet

Succession

segmentfault.com/a/119000001… Mode d'héritage

  1. Héritage de la chaîne prototype
  • Qui permet directement au constructeur d'enfantsprototypeParent pointant vers le parent
  • Impossible de transférer les paramètres,Pas assez flexible
function Parent () {
this.name = 'kevin';
}
Parent.prototype.getName = function () {
console.log(this.name);
}
function Child () {
}
Child.prototype = new Parent();
var child1 = new Child();
console.log(child1.getName()) // kevin
Copier le Code

2.Emprunter l'héritage du constructeur

  • Constructeur emprunté à la classe mère ,Faire exécuter le constructeur de la classe mère lorsque la classe enfant est créée,Utilisercall Pour rendre cette fonction thisPointer vers la Sous - classe
  • Les méthodes sont définies dans le constructeur, Chaque fois Parent.call(this) Pour créer toutes les méthodes
function Parent () {
this.names = ['kevin', 'daisy'];
}
function Child () {
Parent.call(this);
}
var child1 = new Child();
child1.names.push('yayu');
console.log(child1.names); // ["kevin", "daisy", "yayu"]
var child2 = new Child();
console.log(child2.names); // ["kevin", "daisy"]
Copier le Code

3.Héritage combiné

  • Combinaison de l'héritage de la chaîne prototype et de l'héritage classique des épées jumelles
function Parent (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child (name, age) {
Parent.call(this, name);
this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
Copier le Code
  • Inconvénients:Le constructeur de la classe mère est exécuté deux fois lorsque la Sous - classe instancie et modifie la chaîne prototype

Optimisation:Prends le dessus.Child.prototype = new Parent()Remplacer parObject.create(Person.prototype), Cela permet d'utiliser le constructeur moins d'une fois , L'héritage peut également être complété

//......Comme ci - dessus
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Copier le Code
  1. ES6MoyenneclassL'héritage de

Je comprends., Doit être appelé en premier super Méthode pour appeler le constructeur de la classe mère

Champ d'application

Le champ d'application est divisé en deux catégories:

  • Syntaxe(Statique)Champ d'application: La portée de la fonction est déterminée au moment de la définition
  • Lexicographie (Dynamique)Champ d'application:Le rôle de la fonction n'est déterminé que lorsque l'appel est exécuté

Exécuter la pile de contexte

github.com/mqyqingfeng…

  1. Créer une pile de contexte global au début ,Chaque fois qu'une fonction est rencontrée, un contexte d'exécution est créé pour appuyer sur la pile,Une fois chaque fonction terminée, la pile d'exécution courante est éjectée,Notez que les fonctions ne sont pressées dans la pile que lorsqu'elles sont exécutées,Par exemple, le code suivant

Code un

var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
Copier le Code

Code II

var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
Copier le Code

Les deux morceaux de code sont exécutés de la même façon ( Ont été créés en un seul endroit , Selon la portée statique , Ils auront le premier de l'extérieur. scope), Mais la façon dont la pile est appelée est différente

ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
Copier le Code
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
Copier le Code

Objet variable

Chaque contexte d'exécution a trois attributs importants

  • Objet variable(Variable object,VO)
  • Chaîne de portée(Scope chain)
  • this

L'objet variable est une portée de données liée au contexte d'exécution,Les variables et les déclarations de fonctions définies dans le contexte sont stockées.Un objet variable dans un contexte global est un objet global

Contexte de la fonction

Lorsque vous entrez le contexte d'exécution , Le Code n'est pas encore exécuté ,

Un objet variable contient les éléments suivants:

  1. Tous les paramètres formels de la fonction ( Si le contexte de la fonction )
    • Les propriétés d'un objet variable composé d'un nom et d'une valeur correspondante sont créées
    • Aucun argument , La valeur de la propriété est définie à undefined
  2. Déclaration de la fonction
    • Par nom et valeur correspondante (Objet de fonction(function-object)) Les attributs qui composent un objet variable sont créés
    • Si l'objet variable a déjà une propriété avec le même nom, Remplacer complètement cette propriété
  3. Déclaration des variables
    • Par nom et valeur correspondante (undefined) Les attributs qui composent un objet variable sont créés ;
    • Si le nom de la variable est le même que le paramètre ou la fonction de forme déjà déclaré,La Déclaration de la variable n'interfère pas avec les attributs qui existent déjà

Au stade de l'exécution du Code , Exécuter le code dans l'ordre , Selon le Code , Modifier les valeurs des objets variables Résumer le processus ci - dessus

  1. L'initialisation de l'objet variable pour le contexte global est un objet global
  2. L'initialisation de l'objet variable dans le contexte de la fonction ne comprend que Arguments Objet
  3. Des paramètres formels sont ajoutés à l'objet variable lors de l'entrée dans le contexte d'exécution、Déclaration de la fonction、 Valeurs initiales des attributs, telles que les déclarations de variables
  4. Au stade de l'exécution du Code , La valeur de propriété de l'objet variable est modifiée à nouveau

Chaîne de portée

La fonction a un attribut interne [[scope]], Lorsque la fonction est créée , Tous les objets de la variable parent y sont enregistrés ,Cette chaîne scope est copiée lorsque la fonction est exécutée, Et quand l'objet variable est généré, ,L'objet actif actuel est pressé en haut de la chaîne scope actuellement copiée

Fermeture

FermetureEst une fonction qui peut accéder à une variable dans le champ d'application d'une autre fonction( Fonctions définies à l'intérieur d'une fonction ) Sujet classique

for(var i =0; i<5; i++) {
setTimeout(function(){
console.log(i);
},1000);
}
// Pourquoi la production est - elle complète? 5
// Code de synchronisationfor Boucle d'abord , Est global lorsque le Code asynchrone est exécuté AO Rechercher dans l'objet ,En ce momentAODans l'objetiPour5
Copier le Code

La solution

for(var i =0; i<5; i++) {
(funtion(i){
setTimeout(function(){
console.log(i);
},1000)
}
)(i);
}
// Utiliser des fermetures ,L'exécution immédiate d'une fonction produit un contexte d'exécution au moment de l'exécution, Pour mettre ce cycle i Garde ça. ,
// La fonction Timer à l'intérieur de la chaîne scope va chercheri, Trouvé dans la fonction d'exécution immédiate externe ,Résultats obtenus
Copier le Code

Autres modalités

  • Utiliserlet
  • EntréesetTimeoutLe troisième paramètre de
  • ......

thisProblème de pointage

juejin.cn/post/694602… Résumé succinct

  1. Fonction fléchéethis Décider au moment de la définition ,Impossible de modifier, Et ne peut pas être utilisé comme constructeur
  2. UtilisernewQuand, Dans le constructeur this Pointent vers le nouvel objet créé par ce constructeur
  3. AdoptionbindEtapply,callPour changerthisPointage,Parmi euxbindDansthis Ne sera pas modifié ( Seulement pour la première fois ),call Transmission unique ,applyTableau de passage
  4. Qui appelle dans l'objet thisÀ qui?
  5. Appel directthisPoint Global

Problèmes d'écriture courants

Écrivez - le séparément par la suite. mp.weixin.qq.com/s/sDZudDS2j…

Mécanisme de collecte des ordures

v8Mécanisme de recyclage Cénozoïque et paléozoïque juejin.cn/post/684490… rustMécanisme de recyclage Système de propriété kaisery.github.io/trpl-zh-cn/… c Mécanisme de récupération manuel

Type de données et précision du nombre de points flottants

Type de données de base:number string boolean null undefined object Symbol BigInt Comment déterminer le type de données : juejin.cn/post/691980…

Cycle des événements

Maîtrisenode Et deux boucles d'événements différentes dans l'environnement du Navigateur

zhuanlan.zhihu.com/p/33058983

Peignez simplementnode Comment les événements circulent

版权声明
本文为[Tankeke]所创,转载请带上原文链接,感谢
https://javamana.com/2021/09/20210914174203420i.html

  1. 不明白JVM虚拟机还怎么面试,一起刷完了这份1307页的Java面试宝典吧,
  2. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  3. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  4. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  5. Install docker YJ version of openSUSE 11.3
  6. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  7. 中软国际Java机试,如何写出高效率的SQL?
  8. 中级Java工程师面试,阿里 头条 腾讯等大厂Java笔试题目分享,
  9. 两年Java开发经验,为什么spring能最好地改变Java?
  10. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  11. Deux ans d'expérience dans le développement de Java, pourquoi Spring peut - il le mieux changer Java?
  12. Entretien d'ingénieur Java intermédiaire, partage de sujets d'examen écrit Java de grandes usines comme Alibaba headline Tencent,
  13. Zhongsoft International Java Machine test, comment écrire un SQL efficace?
  14. Reflection type of Java Foundation
  15. Comment gérer efficacement les changements dans les ressources k8s?Analyse du mécanisme de mise en œuvre de k8s informer
  16. Installation de jdk1.8
  17. MySQL column - Linux underlying interaction and RAID storage architecture
  18. Interviewer: do redis transactions satisfy atomicity?
  19. 兩年Java開發經驗,為什麼spring能最好地改變Java?
  20. Migration practice from zookeeper to Nacos
  21. Dubbo's past and present life
  22. Initial experience of Dubbo application level service discovery
  23. Measure the Dubbo function of Tengine open source
  24. Comment envoyer 100 000 requêtes http le plus rapidement possible
  25. Huawei cloud guassdb (for redis) released a new version: Lua script and SSL connection encryption
  26. Mybatis vs hibernate, which performance is better?
  27. Python - Programmation orientée objet - _Rapport()
  28. Python - Programmation orientée objet - _Appel()
  29. JQuery Basics
  30. 五年Java开发经验面试,揭秘今年Java春招面试必问问题有哪些?
  31. 互联网Java工程师面试题,遇到的面试官都是架构师级别,
  32. Python - Programmation orientée objet - _Nouveau() et mode Singleton
  33. Python - Programmation orientée objet - méthode magique (méthode de double soulignement)
  34. Python - Programmation orientée objet - pratique (6)
  35. Python - Programmation orientée objet - réflexion hasattr, GetAttr, GetAttr, delattr
  36. Python - Programmation orientée objet - _Dict
  37. Computer graduation project java + SSM sorting algorithm online reading system
  38. Les questions d'entrevue pour les ingénieurs Java d'Internet, les intervieweurs rencontrés sont tous de niveau architecte,
  39. Cinq ans d'entrevue d'expérience en développement Java, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  40. Java or the king of enterprise software- sivalabs
  41. 互聯網Java工程師面試題,遇到的面試官都是架構師級別,
  42. 从入门到精通系列Java高级工程师路线介绍,拼多多三面惨败,
  43. 今年最新整理的《高频Java面试题集合》,2021Java通用流行框架大全,
  44. La dernière collection de questions d'entrevue Java haute fréquence organisée cette année, 2021 Java Universal Popular Framework
  45. De l'introduction à l'introduction de l'itinéraire de l'ingénieur principal Java de la série Mastering, il y a eu de nombreux échecs.
  46. JavaScript operator (1), Web Development Engineer
  47. Java simultané Programming Books recommended, half - Runner Java Program see me easy to Attack!
  48. Trier les questions d'entrevue Javascript, trier les points de connaissance des itinéraires d'apprentissage
  49. Xiaopeng P7, a high-value domestic electric car that can't be missed
  50. Song Mengjun's "sleepless night" triggered an upsurge of dance storm after 00
  51. Encapsulated PHP sends HTTP requests with curl. Get and post are very easy to use
  52. Recommend a lightweight and practical excellent Linux panel - wgcloud
  53. 从思维图到基础再到深入,记一次字节跳动Java研发岗的面试经历,
  54. 从底层开始带你了解并发编程,五步搞定Java开发环境部署,
  55. 从基础到源码统统帮你搞定,一招彻底帮你搞定HashMap源码,
  56. 從基礎到源碼統統幫你搞定,一招徹底幫你搞定HashMap源碼,
  57. De la base au code source pour vous aider à résoudre tout, un tour pour vous aider à résoudre complètement le code source hashtap,
  58. Commencez par le bas pour vous familiariser avec la programmation simultanée, et terminez le déploiement de l'environnement de développement Java en cinq étapes.
  59. De la carte de pensée à la base et à l'approfondissement, prenez note de l'expérience d'entrevue d'un octet sautant le poste de recherche et développement Java.
  60. Good play | every character hates it. How does jade building spring do it?