Un voyage pour apprendre les fermetures, les prototypes et les fonctions anonymes de JavaScript-js tutoriel-php.cn

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

PHPz

Libérer： 2018-09-28 16:54:23

original

1073 Les gens l'ont consulté

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); //读取全局变量
}

Copier après la connexion

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.

Copier après la connexion

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();

Copier après la connexion

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();

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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(&#39;excute self&#39;);
}) ();

Copier après la connexion

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);
  }
  ()
);

Copier après la connexion

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(&#39;void&#39;) } ();

Copier après la connexion

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

Copier après la connexion

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(&#39;hi &#39;+ to_who);
}
People.sayhi(&#39;lee&#39;); //调用时这样调用

Copier après la connexion

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(&#39;I am &#39;+this.name + &#39;,going to meet &#39; + meet_who);
};
new People(&#39;lee&#39;).meet(&#39;xx&#39;);

Copier après la connexion

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);

Copier après la connexion

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 !