Quelles sont les manières d'écrire des fonctions javascript ?

青灯夜游
Libérer: 2023-01-04 09:36:10
original
2558 Les gens l'ont consulté

Comment écrire des fonctions : 1. "function function name(){}"; 2. "var function name = function(){}"; ()" ;4. "(function(){...}())"; 5. "$(function(){})".

Quelles sont les manières d'écrire des fonctions javascript ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Javascript est plus simple que les autres langages de programmation, donc le code Javascript est plein de toutes sortes de façons d'écrire étranges, et parfois c'est juste un flou. Cet article expliquera comment écrire des fonctions JavaScript.

En Javascript il n'y a que des objets. Les variables sont des objets et les fonctions sont également des objets. Tant que vous savez quel est votre objet, utilisez-le simplement de la manière dont il est utilisé.

Javascript est faiblement typé, les objets, instances, fonctions et méthodes sont universels. La distinction n’a pas besoin d’être aussi claire.

1. Écriture conventionnelle :

// 函数的定义
function foo() {
    alert('常规写法');
}
// 函数的调用
foo()
Copier après la connexion

Cette méthode d'écriture est la méthode d'écriture et d'appel la plus familière et la plus facile à comprendre. continuez à lire

2. Méthode d'écriture de fonction anonyme

// 函数的定义
var foo = function(){
    alert('匿名函数定义');
}
// 函数的调用
foo()
Copier après la connexion

Ici, la définition de la fonction est rendue anonyme, éliminant en même temps la douleur de la dénomination. temps, elle est affectée à une variable et la variable devient synonyme de la fonction. Ensuite, voir

3 Utiliser la méthode comme objet <🎜. >

// 定义
var test = {
    fun1: function(){  },
    fun2: function(){  }
}
// 调用
test.fun1();
test.fun2();
Copier après la connexion

Les variables en Javascript sont très puissantes et peuvent représenter beaucoup de choses.

4. Ajoutez des méthodes à l'objet dans le constructeur

// 给对象添加方法
var fun = function(){ };  // 定义函数对象
fun.prototype.test = function(){ 
    alert(&#39;这是在在foo函数上的原始对象上添加test方法,构造函数中用到&#39;);
}

// 调用
var myfun = new fun(); // 创建对象
myfun.test(); // 调用对象属性
Copier après la connexion

Ajoutez des méthodes via le mot-clé prototype.

5. Fonctions auto-exécutables ( function(){…} )() et ( function(){…} () )

La définition et l'appel de la fonction mentionnés précédemment sont séparés, mais la définition et l'exécution discutées immédiatement ici sont effectuées ensemble.

( function(){…} )() et ( function(){…} () ) sont deux façons courantes d'écrire des fonctions JavaScript à exécuter immédiatement. Au début, je pensais qu'il s'agissait d'une fonction anonyme enveloppée. entre parenthèses, puis l'ajout de parenthèses plus tard pour appeler la fonction atteint finalement l'objectif d'exécuter la fonction immédiatement après sa définition. Plus tard, il a été découvert que la raison de l'ajout de parenthèses n'était pas la même. Pour comprendre l’exécution immédiate des fonctions, vous devez d’abord comprendre quelques concepts de base des fonctions.

Déclaration de fonction, expression de fonction, fonction anonyme

Déclaration de fonction : function fnName () {…} Utilisez le mot-clé function pour déclarer un fonction, puis spécifiez un nom de fonction, appelé déclaration de fonction .

Expression de fonction var fnName = function () {…}; Utilisez le mot-clé function pour déclarer une fonction, mais ne donnez pas de nom à la fonction. Enfin, attribuez la fonction anonyme à un. variable, appelée Expression de fonction, qui est la forme syntaxique la plus courante d'expression de fonction.

Fonction anonyme  : function () {} ; Utilisez le mot-clé function pour déclarer une fonction, mais ne donnez pas de nom à la fonction, elle est donc appelée une fonction anonyme. aux expressions de fonction. Les fonctions anonymes ont de nombreuses fonctions, l'attribution d'une variable crée une fonction, l'attribution d'un événement devient un gestionnaire d'événement ou crée une fermeture, etc.

La différence entre la déclaration de fonction et l'expression de fonction est que

1. Lorsque le moteur Javascript analyse le code javascript, il « Déclaration de fonction lève » la déclaration de fonction de l'environnement d'exécution actuel (portée) sur , et l'expression de fonction doit attendre que le moteur Javascirtp s'exécute sur la ligne où elle se trouve, puis l'expression de fonction sera analysée ligne par ligne de haut en bas,

2. Vous pouvez ajouter des parenthèses après la fonction expression immédiatement Pour appeler cette fonction, la déclaration de fonction n'est pas autorisée et ne peut être appelée que sous la forme de fnName(). Voici deux exemples de la différence.

// 方式1: ( function(){…} () )
(
     function(){alert(&#39;hello world, I am coming&#39;);}()
);
// 函数有参数的情况,有时为确保执行,前面加;
// 看到别人的插件,你会发现人家开头处加了一个";",这样就算页面js有错误,加载运行他的插件也能保证运行,如:
;(function(e){alert(e);}(&#39;hello world&#39;));

// 方式2:( function(){…} )()
(function(){alert(&#39;hello&#39;);})();

// 有时在前面加运算符,常见的是!与void
!function(){alert(&#39;hello&#39;);}();
void function(){alert(2);}();
Copier après la connexion

6 $(function(){}) s'écrit

est l'abréviation de $ (function(){/<em>…</em>/});, qui est chargé dans le DOM Une fonction de rappel qui est exécutée une fois terminée et qui ne sera exécutée qu'une seule fois. $(document).ready(function(){/<em>…</em>/})

$( document ).ready(function() {
   console.log( "ready!" );
});
Copier après la connexion

équivaut à l'écriture suivante

$(function() {
   console.log( "ready!" );
});
Copier après la connexion
Les fonctions

écrites en différents js sur une page seront exécutées en séquence selon l'ordre de js. $(function(){/<em>…</em>/});

[Apprentissage recommandé :

Tutoriel JavaScript avancé]

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