Maison > interface Web > js tutoriel > le corps du texte

Compréhension approfondie de la portée au niveau du bloc, des variables privées et du mode module en JavaScript (tutoriel graphique)

亚连
Libérer: 2018-05-19 14:37:27
original
1696 Les gens l'ont consulté

Cet article présente en détail la portée au niveau du bloc, les variables privées et le mode module en JavaScript, ce qui est très utile pour apprendre JavaScript.

Cet article présente en détail la portée au niveau du bloc, les variables privées et le mode module en JavaScript. Je n'entrerai pas dans trop de bêtises. Les détails sont les suivants :

1. Portée au niveau du bloc (portée privée), est souvent utilisée en dehors des fonctions dans la portée globale, limitant ainsi l'ajout d'un trop grand nombre de variables et de fonctions à la portée globale.

(function(count){ 
  for(var i=0;i<count;i++){ 
    console.log(i);//=>0、1、2、3、4 
  } 
  console.log(i);//=>5 
})(5);
Copier après la connexion
(function(){ 
  var now=new Date(); 
  if(now.getMonth()==0 && now.getDate()==1){ 
    console.log("新年快乐"); 
  }else{ 
    console.log("尽情期待"); 
  } 
})();
Copier après la connexion

2. Variables privées : Toute variable définie dans une fonction peut être considérée comme une variable privée, car ces variables ne sont pas accessibles en dehors de la fonction.

Méthodes privilégiées : les méthodes publiques qui ont accès aux variables privées et aux fonctions privées sont appelées méthodes privilégiées.

2.1) Définir des méthodes privilégiées dans le constructeur :

 function Person(name){ 
  this.getName=function(){ 
    return name; 
  }; 
  this.setName=function(value){ 
    name=value; 
  }; 
} 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Michael 
person2.setName(&#39;Alex&#39;); 
console.log(person1.getName());//=>gray 
console.log(person2.getName());//=>Alex
Copier après la connexion

L'inconvénient du modèle de constructeur est que le même ensemble de nouvelles méthodes sera créé pour chaque instance .

2.2) Variables privées statiques pour implémenter des méthodes privilégiées

Dans la portée privée, définissez d'abord les variables privées et les fonctions privées, puis définissez le constructeur et ses méthodes publiques.

 (function(){ 
  //私有变量和函数 
  var name=""; 
  Person=function(value){ 
    name=value; 
  }; 
  //特权方法 
  Person.prototype.getName=function(){ 
    return name; 
  }; 
  Person.prototype.setName=function(value){ 
    name=value; 
  } 
})(); 
var person1=new Person("Jason"); 
console.log(person1.getName());//=>Jason 
person1.setName("gray"); 
console.log(person1.getName());//=>gray 
var person2=new Person("Michael"); 
console.log(person1.getName());//=>Michael 
console.log(person2.getName());//=>Michael 
person2.setName(&#39;Alex&#39;); 
console.log(person1.getName());//=>Alex 
console.log(person2.getName());//=>Alex
Copier après la connexion

3. Modèle de module : Les singletons peuvent être améliorés en ajoutant des variables privées et des méthodes privilégiées.

Si vous devez créer un objet et l'initialiser avec certaines données, tout en exposant également certaines méthodes pouvant accéder à ces données privées, alors vous pouvez utiliser le modèle de module.

var application=function(){ 
  //私有变量和函数 
  var components=[]; 
  //初始化 
  components.push(new BaseComponent()); 
  //公共接口 
  return { 
    getComponentCount:function(){ 
      return components.length; 
    }, 
    registerComponent:function(){ 
      if(typeof component=="object"){ 
        components.push(component); 
      } 
    } 
  } 
}();
Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

jsInstance du code exécutant une fonction après un certain délai

Explication détaillée de la façon d'utiliser le hachage JS pour créer une application Web d'une seule page

JS implémente simplement une fenêtre flottante

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal