Maison > interface Web > js tutoriel > Plusieurs façons de définir des fonctions en JS

Plusieurs façons de définir des fonctions en JS

青灯夜游
Libérer: 2020-10-20 17:21:22
avant
4371 Les gens l'ont consulté

Plusieurs façons de définir des fonctions en JS

Savez-vous combien de façons il existe de créer une fonction en JavaScript ? L'article suivant vous présentera plusieurs méthodes différentes pour définir des fonctions en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Fonction de déclaration

function sum(a, b) { return a + b; }
Copier après la connexion

2. Fonction d'expression

// 可以命名:
(function sum(a, b) { return a + b; });

// 也可匿名 (AVOID):
(function(a, b) { return a + b; });

// 也能分配给变量:
const sum = function sum(a, b) { return a + b; })
Copier après la connexion

1. 🎜>

3. Fonction flèche

// 一般形式:
(a, b) => { return a + b };

// 单参数,一行返回:
name => name.split(' ')

// 多参数,一行返回:
(a, b) => a + b

// 单参数,带函数体
name => { return name.split(' '); }
Copier après la connexion

4. Fonction générateur

function *sum(a, b) { yield a + b; }
Copier après la connexion

5. Fonction asynchrone

async function sum(a, b) { return await a + b; }
Copier après la connexion

6. Constructeur (ÉVITER)

new Function(‘a’, ‘b’, ‘return a + b;’);
Copier après la connexion

7. Fonction d'exportation

// 默认导出
export default function(a, b) { return a + b; };

// 命名导出
export function sum(a, b) { return a + b; };
Copier après la connexion

8. Fonction d'attribut d'objet

// 一般形式:
const object = {
  sum: function(a, b) { return a + b; },
};

// 简写:
const object = {
  sum(a, b) { return a + b; },
};
Copier après la connexion

9. . Fonction de propriété dynamique d'objet

const functionName = "sum";
const object = {
  [functionName]: function(a, b) { return a + b; },
};
Copier après la connexion

10. Fonction Getter/Setter de propriété d'objet

// 一般形式:
const object = {
  get answer { return 42; },
  set answer(value) { /* 一些操作value的代码 */ },
};

//  使用 defineProperty
const obj = {};
Object.defineProperty(obj, "answer", {
  get() { return 42; },
  set(value) { /* 一些操作value的代码 */ },
});
Copier après la connexion

11. Fonctions Getter/Setter des propriétés dynamiques des objets

const functionName = "answer";
const object = {
  get [functionName]() { return 42; },
  set [functionName](value) { /* 一些操作value的代码 */ },
};
Copier après la connexion

12. Fonctions de méthode de classe

class Compute {
  // 一般形式:
  sum(a, b) { return a + b; }
}

class Compute {
  // 静态:
  static sum(a, b) { return a + b; };
}
Copier après la connexion

13. Fonction d'attribut de classe

class Compute {
  // 一般形式:
  sum = function (a, b) { return a + b; };
}class Compute {
  // 静态:
  static sum = function(a, b) { return a + b; };
}
Copier après la connexion

14. Fonction privée de classe

class Compute {
  // 一般形式:
  #sum(a, b) {
    return a + b;
  }  // 静态:
  static #sum(a, b) {
    return a + b;
  }
}
Copier après la connexion
Résumé
Si vous combinez certaines de ces méthodes, il y a encore plus de possibilités.

Connaissez-vous d'autres méthodes ? Veuillez laisser un message et faites-le moi savoir. Recommandations d'apprentissage gratuites associées :

Tutoriel vidéo js

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:segmentfault.com
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