Maison > interface Web > js tutoriel > Comment écrire une fonction javascript

Comment écrire une fonction javascript

醉折花枝作酒筹
Libérer: 2023-01-06 11:17:28
original
5321 Les gens l'ont consulté

Les méthodes d'écriture des fonctions JavaScript sont : 1. Méthode d'écriture conventionnelle, "function function name(){js code} function name()"; 2. $(function(){}) méthode d'écriture, " $(object) .ready(function() {code js});".

Comment écrire une fonction 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.

在Javascript中只有对象。 变量是对象,函数也是对象。 只要你知道你的对象是什么,按照它的方式去使用就可以了。
Javascript是弱类型,对象,实例,函数,方法通用的。不需要区别那么清楚。
Copier après la connexion

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, puis continuez à lire

2. Écriture de fonction anonyme

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

Ici, la définition de la fonction est rendue anonyme, ce qui évite la peine de nommer. En même temps, elle est affectée à une variable, et la variable devient. synonyme de fonction. , puis regardez

3. Traitez la méthode comme un 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('这是在在foo函数上的原始对象上添加test方法,构造函数中用到');
}

// 调用
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(){…} () )

Les définitions de fonctions mentionnées précédemment et L'appel est séparé, et la définition et l'exécution discutées 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 une fonction, puis spécifiez un nom de fonction, qui est appelé un 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, la fonction anonyme est affectée à une variable, appelée fonction. expression Il s'agit de la forme syntaxique d'expression de fonction la plus courante.

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 fonction anonyme. ont de nombreuses fonctions et sont affectés à une variable. Créez ensuite une fonction, attribuez un événement pour devenir un gestionnaire d'événements ou créez une fermeture, etc.

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

1. Lorsque le moteur Javascript analyse le code javascript, il effectuera une « déclaration de fonction Hoisting » (Déclaration de fonction Hoisting) lors de l'exécution en cours environnement (portée) Déclaration de fonction, et l'expression de fonction doit attendre que le moteur Javascirtp s'exécute sur la ligne où il 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 l'expression de la fonction pour l'appeler immédiatement. Cette fonction ne peut pas être déclarée comme fonction et ne peut être appelée que sous la forme de fnName(). Voici deux exemples de la différence.

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

// 方式2:( function(){…} )()
(function(){alert('hello');})();

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

6 La méthode d'écriture de $(function(){})

$ (function(){/…/}); ready(function L'abréviation de (){/…/}) est une fonction de rappel qui est exécutée après le chargement du DOM et ne sera exécutée qu'une seule fois.

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

équivaut à l'écriture suivante

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

La fonction $(function(){/…/}); écrite en différents js sur une page sera en séquence selon l'ordre de js implémente.

[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