Parlez de plusieurs compréhensions des fonctions dans les compétences JavaScript_javascript

La fonction en JavaScript a plusieurs significations. Il peut s'agir d'un constructeur (constructeur), qui joue le rôle d'un modèle d'objet ; peut être une méthode de l'objet (méthode), qui est chargée d'envoyer des messages à l'objet ; . peut aussi être une fonction , oui c'est une fonction, une fonction qui existe indépendamment et peut être appelée sans aucune relation avec l'objet.

En raison du compromis du concepteur du langage, certaines fonctionnalités liées aux classes ont été ajoutées à JavaScript pour que JavaScript ressemble à Java et puisse être « orienté objet ». Bien que JavaScript ait ajouté du nouveau et ce, il n'y a pas de classe (ES l'a ajouté). Enfin, la fonction assume temporairement la tâche de classe.

Sémantique 1 : fonction comme constructeur

/**
 * 页签
 *
 * @class Tab
 * @param nav {string} 页签标题的class
 * @param content {string} 页面内容的class
 *
 */
function Tab(nav, content) {
  this.nav = nav;
  this.content = content;
}
Tab.prototype.getNav = function() {
  return this.nav;
};
Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};
Tab.prototype.add = function() {
};
// 创建对象
var tab = new Tab('tab-nav', 'tab-content');

Un onglet de classe est défini ici et un onglet d'objet est créé. Fonction, ceci, nouveau sont utilisés ci-dessus. this, new sont des mots-clés dans les langages orientés objet courants, et function joue ici le rôle de classe dans les langages orientés objet traditionnels. Bien entendu, la dénomination des identifiants à cette époque suit généralement la règle de la « première lettre en majuscule ».

Sémantique 2 : fonctionner comme méthode objet

Étant donné que les objets peuvent être créés directement en JavaScript sans classes, il existe deux manières d'ajouter des méthodes aux objets. La première consiste à définir d'abord la classe et à accrocher les méthodes sur le prototype, comme Tab dans l'exemple ci-dessus. Le prototype a les méthodes getNav, setNav et add. Il existe une autre façon d'ajouter des méthodes directement à ce sujet dans la fonction.

function Tab(nav, content) {
  this.nav = nav
  this.content = content
  this.getNav = function() {
    // ...
  }
  this.setNav = function() {
    // ...
  }
  this.add = function() {
    // ...
  }
}

Ici Tab est la sémantique, this.getNav/this.setNav/this.add est la sémantique, en tant que méthode de l'objet. De plus, les objets et leurs méthodes peuvent être définis directement

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    // ...
  },
  setNav: function() {
    // ...
  },
  add: function() {
    // ...
  }
}

tab.getNav/tab.setNav/tab.add sont sémantiques, comme les méthodes de l'onglet objet.

Sémantique 3 : En tant que fonction indépendante

/*
 * 判断对象是否是一个空对象
 * @param obj {Object}
 * @return {boolean}
 */
function isEmpty(obj) {
  for (var a in obj) {
    return false
  }
  return true
}
// 定义一个模块
~function() {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
}();
// 采用CommonJS规范的方式定义一个模块
define(require, exports, moduel) {
  // 辅助函数
  function now() {
    return (new Date).getTime()
  }
  // 模块逻辑...
})

isEmpty existe en tant que fonction globale, et maintenant dans la définition du module existe en tant que fonction locale. Que ce soit isEmpty ou maintenant, la fonction fait ici référence à une fonction. Elle ne dépend pas des objets et des classes et peut être appelée indépendamment.

Sémantique 4 : Module de définition de fonctions anonymes

// 全局命名空间
var RUI = {}
// ajax.js
~function(R) {
  // 辅助函数...
  ajax = {
    request: function() {
      // ...
    }
    getJSON: function() {
      // ...
    }
    ...
  }
  // 暴露出模块给 R
  R.ajax = ajax
}(RUI);
// event.js
~function(R) {
  // 辅助函数...
  // 事件模块定义...
  // 暴露出模块给 R
  R.event = event
}(RUI);
// dom.js
~function(R) {
  // 辅助函数...
  // DON模块定义...
  // 暴露出模块给 R
  R.dom = dom
}(RUI);

Une fois la fonction anonyme ici exécutée, l'objet API est exposé à la RUI, quelle que soit la quantité de travail effectuée dans la fonction anonyme, il ne peut pas être vu en dehors de la fonction anonyme correspondante et il n'est pas nécessaire d'y prêter attention. à cela. La dernière préoccupation concerne les méthodes API publiques. Tant que vous comprenez les paramètres et la signification de ces méthodes, vous pouvez les utiliser immédiatement.

Sémantique 5 : Les fonctions anonymes gèrent certains effets spéciaux tels que le traitement de certaines données sans exposer trop de variables

// 判断IE版本的hack方式
var IEVersion = function() {
  var undef, v = 
  var div = document.createElement('div')
  var all = div.getElementsByTagName('i')
  while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[]
  );
  return v > &#63; v : undef
}();

Au final, il n'y a qu'un seul résultat IEVersion, et certaines variables locales utilisées à l'intérieur de la fonction anonyme peuvent toutes être isolées. Cette méthode est très efficace et compacte pour certains traitements de données temporaires.

Résumé :

JavaScript a été conçu par Eich en quelques jours. Il s'agissait à l'origine d'un langage de script/fonctionnel court et compact. Pour des raisons de marketing, afin de répondre à Java, certaines fonctionnalités orientées objet de type Java ont été ajoutées (constructeur, ceci, nouveau). ). This et new sont copiés, mais les fonctions de classe sont transmises à function. En conséquence, les fonctions JavaScript prêtent à confusion. Parfois, elles sont utilisées pour définir des classes, et parfois elles sont utilisées comme méthodes ou fonctions. Certaines personnes ont également découvert qu'il pouvait être utilisé pour définir des modules, etc.

Tout cela s'est terminé avec l'arrivée d'ES. Le mot réservé "class" dans ES a finalement été implémenté. Il est recommandé d'utiliser class pour définir les classes. Il existe également le mot-clé extend, qui apporte essentiellement « l'héritage de classe ». Douglas a commenté lors de la conférence Nordic.js que l'une des pires conceptions d'ES est la classe. De plus, il n'est pas recommandé d'utiliser ce nouveau langage. Cela montre qu'il privilégie toujours l'utilisation d'un langage fonctionnel pour écrire du JavaScript plutôt que des objets. -orienté en fonction des cours.

Le contenu ci-dessus est ma compréhension personnelle multiple des fonctions de JavaScript. Les amis qui ont des compréhensions différentes sont invités à partager, apprendre et progresser ensemble.