Explication détaillée des trois montagnes de JS : portée et fermeture, prototype et chaîne de prototypes, asynchrone et single thread

js sert d'épine dorsale du front-end. Alors, savez-vous quelles sont les trois grandes montagnes du javascript ?

1️⃣ Portée et clôture

Scope作用域 指代码当前上下文，控制着变量和函数的可见性和生命周期。最大的作用是隔离变量，不同作用域下同名变量不会冲突。

作用域链 指如果在当前作用域中没有查到值，就会向上级作用域查询，直到全局作用域，这样一个查找过程所形成的链条就被称之为作用域链。【推荐学习：javascript视频教程】

作用域可以堆叠成层次结构，子作用域可以访问父作用域，反之则不行。

作用域具体可细分为四种：全局作用域、模块作用域、函数作用域、块级作用域

全局作用域： 代码在程序的任何地方都能被访问，例如 window 对象。但全局变量会污染全局命名空间，容易引起命名冲突。

模块作用域： 早期 js 语法中没有模块的定义，因为最初的脚本小而简单。后来随着脚本越来越复杂，就出现了模块化方案（AMD、CommonJS、UMD、ES6模块等）。通常一个模块就是一个文件或者一段脚本，而这个模块拥有自己独立的作用域。

函数作用域： 顾名思义由函数创建的作用域。闭包就是在该作用域下产生，后面我们会单独介绍。

块级作用域： 由于 js 变量提升存在变量覆盖、变量污染等设计缺陷，所以 ES6 引入了块级作用域关键字来解决这些问题。典型的案例就是 let 的 for 循环和 var 的 for 循环。

// var demo
for(var i=0; i<10; i++) {
    console.log(i);
}
console.log(i); // 10

// let demo
for(let i=0; i<10; i++) {
    console.log(i);
}
console.log(i); //ReferenceError：i is not defined

了解完作用域再来谈谈 闭包： 函数A里包含了函数B，而函数B使用了函数A的变量，那么函数B被称为闭包或者闭包就是能够读取函数A内部变量的函数。

可以看出闭包是函数作用域下的产物，闭包会随着外层函数的执行而被同时创建，它是一个函数以及其捆绑的周边环境状态的引用的组合。换而言之，闭包是内层函数对外层函数变量的不释放。

闭包的特征：

• 函数中存在函数；
• 内部函数可以访问外层函数的作用域；
• 参数和变量不会被 GC，始终驻留在内存中；
• 有内存地方才有闭包。

所以使用闭包会消耗内存、不正当使用会造成内存溢出的问题，在退出函数之前，需要将不使用的局部变量全部删除。如果不是某些特定需求，在函数中创建函数是不明智的，闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

以下整理了闭包的应用场景：

// demo1 输出 3 3 3
for(var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
} 
// demo2 输出 0 1 2
for(let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// demo3 输出 0 1 2
for(let i = 0; i < 3; i++) {
    (function(i){
        setTimeout(function() {
        console.log(i);
        }, 1000);
    })(i)
}

/* 模拟私有方法 */
// 模拟对象的get与set方法
var Counter = (function() {
var privateCounter = 0;
function changeBy(val) {
    privateCounter += val;
}
return {
    increment: function() {
    changeBy(1);
    },
    decrement: function() {
    changeBy(-1);
    },
    value: function() {
    return privateCounter;
    }
}
})();
console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

/* setTimeout中使用 */
// setTimeout(fn, number): fn 是不能带参数的。使用闭包绑定一个上下文可以在闭包中获取这个上下文的数据。
function func(param){ return function(){ alert(param) }}
const f1 = func(1);setTimeout(f1,1000);

/* 生产者/消费者模型 */
// 不使用闭包
// 生产者
function producer(){
    const data = new（...）
    return data
}
// 消费者
function consumer(data){
    // do consume...
}
const data = producer()

// 使用闭包
function process(){
    var data = new (...)
    return function consumer(){
        // do consume data ...
    }
}
const processer = process()
processer()

/* 实现继承 */
// 以下两种方式都可以实现继承，但是闭包方式每次构造器都会被调用且重新赋值一次所以，所以实现继承原型优于闭包
// 闭包
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
  this.getName = function() {
    return this.name;
  };

  this.getMessage = function() {
    return this.message;
  };
}
// 原型
function MyObject(name, message) {
  this.name = name.toString();
  this.message = message.toString();
}
MyObject.prototype.getName = function() {
  return this.name;
};
MyObject.prototype.getMessage = function() {
  return this.message;
};

对于闭包的概念好像懂了但又好像缺少了啥？意犹未尽。我也曾也闭包中迷失，但是看完闭包的生命周期让我重新找回自己。

学完就来一波牛刀小试

function test(a, b){
  console.log(b);
  return {
    test: function(c) {
      return test(c,a);
    }
  }
}

var a = test(100);a.test(101);a.test(102);
var b = test(200).test(201).test(202);
var c = test(300).test(301);c.test(302);

// undefined  100  100
// undefined  200 201
// undefined  300 301

2️⃣ 原型和原型链

有对象的地方就有 原型，每个对象都会在其内部初始化一个属性，就是prototype(原型)，原型中存储共享的属性和方法。当我们访问一个对象的属性时，js引擎会先看当前对象中是否有这个属性，如果没有的就会查找他的prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。这么一个寻找的过程就形成了 原型链 fait référence au contexte actuel du code, qui contrôle la visibilité et le cycle de vie des variables et des fonctions. La fonction la plus importante est d'isoler les variables, afin que les variables portant le même nom dans des portées différentes n'entrent pas en conflit.

Scope chain

signifie que si la valeur n'est pas trouvée dans la portée actuelle, elle interrogera la portée supérieure jusqu'à ce que la portée globale soit appelée C'est une portée. chaîne. [Apprentissage recommandé : tutoriel vidéo javascript]🎜🎜 Les étendues peuvent être empilées dans une hiérarchie et les étendues enfants peuvent accéder aux étendues parents, mais pas l'inverse. 🎜🎜La portée peut être divisée en quatre types : 🎜Portée globale🎜, 🎜Portée du module🎜, 🎜Portée de la fonction🎜 , 🎜 Portée au niveau du bloc🎜🎜🎜🎜Portée globale : 🎜 Le code est accessible n'importe où dans le programme, comme l'objet fenêtre. Cependant, les variables globales pollueront l'espace de noms global et provoqueront facilement des conflits de noms. 🎜🎜🎜Portée du module : 🎜 Il n'y avait pas de définition de module dans la première syntaxe js car les scripts originaux étaient petits et simples. Plus tard, à mesure que les scripts devenaient de plus en plus complexes, des solutions modulaires ont vu le jour (modules AMD, CommonJS, UMD, ES6, etc.). Habituellement, un module est un fichier ou un script, et ce module a sa propre portée indépendante. 🎜🎜🎜Portée de la fonction :🎜 Comme son nom l'indique, la portée créée par la fonction. Des fermetures sont générées dans ce périmètre, que nous présenterons séparément plus tard. 🎜🎜🎜Portée au niveau du bloc : 🎜 Étant donné que la promotion des variables js présente des défauts de conception tels que la couverture variable et la pollution variable, ES6 a introduit le mot-clé de portée au niveau du bloc pour résoudre ces problèmes. Les cas typiques sont la boucle for de let et la boucle for de var. 🎜

const arr = [1, 2, 3];
arr.__proto__ === Array.prototype; // true
arr.__proto__.__proto__ === Object.prototype; // true
Array.__proto__ === Function.prototype; // true

🎜Après avoir compris la portée, parlons-en🎜Fermeture :🎜 La fonction A contient la fonction B, et la fonction B utilise les variables de la fonction A, alors la fonction B est appelée une fermeture ou une fermeture A package est une fonction capable de lire les variables internes de la fonction A. 🎜🎜On peut voir que la fermeture est un produit de la portée de la fonction. La fermeture sera créée en même temps que la fonction externe est exécutée. Il s'agit d'une combinaison d'une fonction et de sa référence groupée à l'état de l'environnement environnant. En d'autres termes, 🎜 la fermeture est la fonction interne qui ne libère pas 🎜 la variable de fonction externe. 🎜🎜🎜Caractéristiques des fermetures : 🎜🎜

• Il existe des fonctions à l'intérieur des fonctions ;
• Les fonctions internes peuvent accéder à la portée des fonctions externes ;
• Les paramètres et les variables n'y accèdent pas ; Ce sera GC et résidera toujours en mémoire ;
• Il y a une fermeture uniquement là où il y a de la mémoire.

🎜Ainsi, l'utilisation de fermetures consommera de la mémoire et une mauvaise utilisation entraînera des problèmes de débordement de mémoire. Avant de quitter la fonction, toutes les variables locales inutilisées doivent être supprimées. Si ce n'est pas pour certains besoins spécifiques, il n'est pas judicieux de créer des fonctions au sein des fonctions. Les fermetures ont un impact négatif sur les performances des scripts en termes de vitesse de traitement et de consommation de mémoire. 🎜🎜🎜Les scénarios d'application des fermetures sont résumés ci-dessous : 🎜🎜rrreeerrreeerrreeerrreeerrreee🎜J'ai l'impression de comprendre le concept des fermetures mais il me semble qu'il manque quelque chose ? Le sens n’est toujours pas fini. J'étais aussi perdu dans les fermetures, mais après avoir lu le cycle de vie des fermetures, je me suis retrouvé. 🎜🎜🎜🎜Après avoir appris, faisons un petit test🎜rrreee

🎜2️⃣ Prototype et chaîne de prototypes🎜🎜🎜Partout où il y a des objets, il y a🎜Prototypes code >🎜, chaque objet initialisera une propriété à l'intérieur, qui est le prototype, et le prototype stocke les propriétés et méthodes partagées. Lorsque nous accédons aux propriétés d'un objet, le moteur js vérifiera d'abord si l'objet actuel possède cette propriété. Dans le cas contraire, il vérifiera si son objet prototype possède cette propriété, et ainsi de suite jusqu'à ce que l'objet intégré Object soit récupéré. Un tel processus de recherche a formé le concept de 🎜<code>Prototype Chain🎜. 🎜🎜La chose la plus importante pour comprendre le prototype est de clarifier la relation entre __proto__, prototype et constructeur. Examinons d'abord quelques concepts : 🎜.

• __proto__属性在所有对象中都存在，指向其构造函数的prototype对象；prototype对象只存在（构造）函数中，用于存储共享属性和方法；constructor属性只存在于（构造）函数的prototype中，指向（构造）函数本身。
• 一个对象或者构造函数中的隐式原型__proto__的属性值指向其构造函数的显式原型 prototype 属性值，关系表示为：instance.__proto__ === instance.constructor.prototype
• 除了 Object，所有对象或构造函数的 prototype 均继承自 Object.prototype，原型链的顶层指向 null：Object.prototype.__proto__ === null
• Object.prototype 中也有 constructor：Object.prototype.constructor === Object
• 构造函数创建的对象（Object、Function、Array、普通对象等）都是 Function 的实例，它们的 __proto__ 均指向 Function.prototype。

看起来是不是有点乱？？别慌！！一张图帮你整理它们之间的关系

相同的配方再来一刀

const arr = [1, 2, 3];
arr.__proto__ === Array.prototype; // true
arr.__proto__.__proto__ === Object.prototype; // true
Array.__proto__ === Function.prototype; // true

3️⃣ 异步和单线程

JavaScript 是 单线程 语言，意味着只有单独的一个调用栈，同一时间只能处理一个任务或一段代码。队列、堆、栈、事件循环构成了 js 的并发模型，事件循环 是 JavaScript 的执行机制。

为什么js是一门单线程语言呢？最初设计JS是用来在浏览器验证表单以及操控DOM元素，为了避免同一时间对同一个DOM元素进行操作从而导致不可预知的问题，JavaScript从一诞生就是单线程。

既然是单线程也就意味着不存在异步，只能自上而下执行，如果代码阻塞只能一直等下去，这样导致很差的用户体验，所以事件循环的出现让 js 拥有异步的能力。

更多编程相关知识，请访问：编程教学！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!