Un voyage pour apprendre les fermetures, les prototypes et les fonctions anonymes de JavaScript

Cet article présente les fermetures JavaScript, les prototypes et les fonctions anonymes à travers des exemples. Veuillez voir ci-dessous pour plus de détails.

1. À propos des fermetures

Connaissances requises pour comprendre les fermetures

Portée des variables

Exemple 1 :

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA(); //Exécuter cette fonction

Exemple 2 :

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

remarque : Lorsque vous déclarez la variable c dans une fonction, assurez-vous d'ajouter var, sinon c deviendra une variable globale

Les variables globales sont donc visibles dans la fonction , les variables locales au sein de la fonction sont invisibles pour le monde extérieur
La portée de js est chaînée Les variables de l'objet parent sont toujours visibles par l'objet enfant, mais les objets de l'objet enfant ne sont pas visibles par le parent. object
Quand on veut obtenir des variables internes dans la fonction

Il y a donc exemple 3 :

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

La fermeture est très similaire et une variation est fabriqué sur cette base

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

remarque :

1. Utilisez les fermetures avec prudence et faites attention à l'utilisation de la mémoire, car cela enregistrera l'état de la fonction parent
2. Ne vous sentez pas libre de changer la valeur de la variable interne de la fonction parent

Comprendre la fermeture

remarque : il s'agit de l'objet auquel appartient la fonction qui la contient lors de son exécution

Exemple 1 :

var name = "The Window";

var object = {
  name : "My Object",

　　getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
　　　　  return this.name;
　　　　};
　　}
};
console.log(object.getNameFunc()()); //the window

Exemple 2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
  　　return function(){
  　　  return that.name;
  　　};

  }
};
console.log(object.getNameFunc()());  //My Object

2. Fonction anonyme

Définir directement une fonction anonyme puis appeler la fonction anonyme. Cette forme est très courante dans la définition des plug-ins jquery

1. Passez la méthode alphabétique Function. Déclarez d'abord une fonction anonyme, puis exécutez-la

( function(){
  console.log('excute self');
}) ();

2. En priorisant les expressions, puisque Javascript exécute les expressions Il va de l'intérieur vers l'extérieur des parenthèses, vous pouvez donc utiliser les parenthèses pour forcer l'exécution de la fonction déclarée

(
  function () {
    alert(2);
  }
  ()
);

3. Opérateur void Utiliser l'opérateur void pour exécuter Un seul opérande non entouré de parenthèses

void function(){ console.log('void') } ();

3. À propos du prototype

Prototype prototype

Pour comprendre le prototype en js, vous devez d'abord besoin de comprendre la conception orientée objet de js

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

La méthode objet d'instance ne peut être que comme ça new People('leon').introduce();

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

méthode prototype de l'objet de classe

car il doit être initialisé avant utilisation

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

Les méthodes prototypes ne peuvent être appelées que par des objets de cette classe

A.prototype = new B();

Prototype Cela ressemble beaucoup à l'héritage, mais ce n'est pas le cas. C'est plus du type clone et c'est plus précis

S'il y a des attributs du même nom dans la classe et la sous-classe parent, adoptez le principe de proximité. Si vous ne le trouvez pas, montez d'un niveau à la fois. . Recherchez, si vous souhaitez spécifier l'attribut pour appeler le supérieur, utilisez la méthode d'appel

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

Le contenu ci-dessus est le parcours d'apprentissage des fermetures, des prototypes et des fonctions anonymes JavaScript. partagé par l'éditeur. , j'espère que cela sera utile à tout le monde. Pour plus de tutoriels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !