Maison > interface Web > js tutoriel > JavaScript : fonctions, expressions de fonction, objets, méthodes, etc.

JavaScript : fonctions, expressions de fonction, objets, méthodes, etc.

王林
Libérer: 2024-08-07 10:43:23
original
935 Les gens l'ont consulté

JavaScript: Functions, Function Expressions, Objects, Methods, and this

Fonction de base simple

Voici une fonction simple qui ne prend aucun argument :

function hello() {
  console.log('Hello there stranger, how are you?');
}

hello();
Copier après la connexion

Voici une fonction qui prend un argument :

function greet(person) {
  console.log(`Hi there ${person}.`);
}

greet('Megan');
Copier après la connexion

Nous pouvons avoir plus d'un argument comme suit :

function greetFullName(fName, lName) {
  console.log(`Hi there ${fName} ${lName}.`);
}

greetFullName('Megan', 'Paffrath');
Copier après la connexion

Expressions de fonction

Les expressions de fonction ne sont qu'une autre façon d'écrire des fonctions. Ils fonctionnent toujours de la même manière que ci-dessus :

const square = function(x) {
   return x * x;
};

square(2); // 4
Copier après la connexion

Fonctions d'ordre supérieur

Ces fonctions fonctionnent avec/sur d'autres fonctions, peut-être qu'elles :

  • accepter d'autres fonctions comme arguments
  • retourner une fonction

Un exemple de fonction prenant une autre fonction comme argument est :

function callTwice(func) {
  func();
  func();
}

let laugh = function () {
  console.log('haha');
};

callTwice(laugh);
// haha
// haha

function rollDie() {
  const roll = Math.floor(Math.random() * 6) + 1;
  console.log(roll);
}

callTwice(rollDie);
// random number
// random number
Copier après la connexion

Un exemple de fonction renvoyant une fonction est :

function makeMysteryFunc() {
  const rand = Math.random();
  if (rand > 0.5) {
    return function () {
      console.log('You win');
    };
  } else {
    return function () {
      alert('You have been infected by a computer virus');
      while (true) {
        alert('Stop trying to close this window.');
      }
    };
  }
}

let returnedFunc = makeMysteryFunc();
returnedFunc();
Copier après la connexion

Un autre exemple (plus utile) est :

function makeBetweenFunc(min, max) {
  return function (num) {
    return num >= min && num <= max;
  };
}

const isBetween = makeBetweenFunc(100, 200);
// isBetween(130); // true
// isBetween(34); // false
Copier après la connexion

Méthodes

Nous pouvons ajouter des fonctions comme propriétés sur les objets (c'est ce qu'on appelle des méthodes).

Ex :

const myMath = {
  PI: 3.14,
  square: function (num) {
    return num * num;
  },
  // note the 2 diff ways of defining methods
  cube(num) {
    return num ** 3;
  },
};
Copier après la connexion

Ce

'this' est principalement utilisé DANS les méthodes des objets. Il est utilisé pour référencer les propriétés de l'objet.

const person = {
  first: 'Abby',
  last: 'Smith',
  fullName() {
    return `${this.first} ${this.last}`;
  },
};

person.fullName(); // "Abby Smith"
person.lastName = 'Elm';
person.fullName(); // "Abby Elm"
Copier après la connexion

Notez qu'en dehors des objets, « this » fait référence à l'objet fenêtre de niveau supérieur. Pour voir ce que cela contient, entrez-le dans la console. Les fonctions générales sont également stockées dans cet objet :

// defined on its own (outside of an object)
function howdy() {
  console.log('HOWDY');
}

this.howdy(); // HOWDY
Copier après la connexion

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!

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