Heim > Web-Frontend > js-Tutorial > JavaScript: Funktionen, Funktionsausdrücke, Objekte, Methoden und das

JavaScript: Funktionen, Funktionsausdrücke, Objekte, Methoden und das

王林
Freigeben: 2024-08-07 10:43:23
Original
872 Leute haben es durchsucht

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

Einfache Grundfunktion

Hier ist eine einfache Funktion, die keine Argumente akzeptiert:

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

hello();
Nach dem Login kopieren

Hier ist eine Funktion, die ein Argument akzeptiert:

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

greet('Megan');
Nach dem Login kopieren

Wir können wie folgt mehr als ein Argument haben:

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

greetFullName('Megan', 'Paffrath');
Nach dem Login kopieren

Funktionsausdrücke

Funktionsausdrücke sind nur eine andere Art, Funktionen zu schreiben. Sie funktionieren immer noch auf die gleiche Weise wie oben:

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

square(2); // 4
Nach dem Login kopieren

Funktionen höherer Ordnung

Diese Funktionen arbeiten mit/auf anderen Funktionen, vielleicht:

  • Andere Funktionen als Argumente akzeptieren
  • eine Funktion zurückgeben

Ein Beispiel für eine Funktion, die eine andere Funktion als Argument verwendet, ist:

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
Nach dem Login kopieren

Ein Beispiel für eine Funktion, die eine Funktion zurückgibt, ist:

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();
Nach dem Login kopieren

Ein weiteres (nützlicheres Beispiel) ist:

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

const isBetween = makeBetweenFunc(100, 200);
// isBetween(130); // true
// isBetween(34); // false
Nach dem Login kopieren

Methoden

Wir können Funktionen als Eigenschaften zu Objekten hinzufügen (diese werden Methoden genannt).

Beispiel:

const myMath = {
  PI: 3.14,
  square: function (num) {
    return num * num;
  },
  // note the 2 diff ways of defining methods
  cube(num) {
    return num ** 3;
  },
};
Nach dem Login kopieren

Das

'this' wird meist INNERHALB von Objektmethoden verwendet. Es wird verwendet, um auf Eigenschaften des Objekts zu verweisen.

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

person.fullName(); // "Abby Smith"
person.lastName = 'Elm';
person.fullName(); // "Abby Elm"
Nach dem Login kopieren

Beachten Sie, dass sich „this“ außerhalb von Objekten auf das Fensterobjekt der obersten Ebene bezieht. Um zu sehen, was dieser enthält, geben Sie dies in die Konsole ein. Auch allgemeine Funktionen werden in diesem Objekt gespeichert:

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

this.howdy(); // HOWDY
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonJavaScript: Funktionen, Funktionsausdrücke, Objekte, Methoden und das. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage