Compréhension détaillée des fonctions en JavaScript (avec code)

Cet article vous apporte une compréhension détaillée des fonctions en JavaScript (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La fonction en JavaScript a plusieurs significations. Il peut s'agir d'un constructeur, qui joue le rôle d'un modèle d'objet ; il peut s'agir d'une méthode d'un objet, qui est responsable de l'envoi de messages à l'objet. Cela peut aussi être une fonction, oui c'est une fonction, une fonction qui existe indépendamment et qui 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 : fonctionner en tant que 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');

Définit ici un onglet de classe et crée un onglet d'objet. 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 une méthode objet

Étant donné que les objets peuvent être créés directement sans classes en JavaScript, il existe deux façons 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, l'objet et ses méthodes peuvent être directement définis

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

tab.getNav/tab.setNav/tab.add est sémantique, comme une méthode 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 now, la fonction fait ici référence. Par rapport à la fonction, elle ne dépend pas des objets ni des classes et peut être appelée indépendamment.
Sémantique 4 : module de définition de fonction anonyme

// 全局命名空间
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);

La fonction anonyme expose ici l'objet API au RUI après l'exécution. Quelle que soit la quantité de travail effectuée dans la fonction anonyme, elle ne peut pas être vue à l'extérieur. la fonction anonyme correspondante. Oui, il n'est pas nécessaire d'y prêter attention. 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 comme le traitement de certaines données sans exposer trop de variables

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

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

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!