Function constructor

De functieconstructor in JavaScript is een manier om objecten te maken met behulp van een functie. Wanneer je een functie aanroept met new, wordt er een nieuw object gemaakt en wordt this binnen de functie ingesteld op dat nieuwe object.

// Functieconstructor
function Person(name, age) {
  // 'this' verwijst naar het nieuwe object dat wordt gemaakt
  this.name = name;
  this.age = age;

  // Een methode toevoegen aan het object
  this.sayHello = function () {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`
    );
  };
}

// Objecten maken met de functieconstructor
const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

// Objectmethoden aanroepen
person1.sayHello(); // Output: Hello, my name is Alice and I'm 25 years old.
person2.sayHello(); // Output: Hello, my name is Bob and I'm 30 years old.

Classes als alternatief

Hoewel de functieconstructor een manier is om gebruik te maken van Objectgeorienteerd programmeren in Javascript wordt tegenwoordig vaak de voorkeur gegeven aan de klassensyntax voor deze objectgerichte programmeerstijl. De klassensyntax biedt een meer leesbare en gestructureerde manier om objecten en hun gedrag te definiëren.

Leer meer over Class in Javscript. (opens new window)

De function constructor vormt echter de basis voor componenten in React waardoor we kiezen om hier meer aandacht aan te besteden.

Syntax

1. Schrijf functienamen met een hoofdletter om duidelijke te maken dat het om een functieconstructor gaat.
2. Gebruik new om een nieuw object te maken met de eerder gemaakte functieconstructor.
3. this binnen de functie verwijst naar het nieuwe object dat wordt gemaakt.
4. Je kunt eigenschappen en methoden aan het object toevoegen door ze aan this toe te wijzen binnen de functieconstructor.

function Car(make, model) {
  this.make = make;
  this.model = model;
  this.drive = function () {
    console.log(`Driving ${this.make} ${this.model}`);
  };
}

const myCar = new Car("Toyota", "Camry");
myCar.drive(); // Output: Driving Toyota Camry

Opgelet

Function construction werkt niet naar behoren de met arrow-notation. Dit is omdat this bij een arrow-notation zal verwijzen naar het globale object.

// Arrow function constructor (werkt niet zoals verwacht)
const Person = (name, age) => {
  this.name = name; // 'this' hier verwijst niet naar het nieuwe object
  this.age = age;

  this.sayHello = () => {
    console.log(
      `Hello, my name is ${this.name} and I'm ${this.age} years old.`
    );
  };
};

// Proberen een object te maken
const person = new Person("Alice", 25); // TypeError: Person is not a constructor

Toepassingen

Componenten in React zullen worden gemaakt met function constructors.

Profile.jsx

export default function Profile() {
  return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />;
}

Person.jsx

import React, { useState } from "react";

function Person(props) {
  // Gebruik van de useState hook om de staat te initialiseren
  const [state, setState] = useState({
    name: props.name,
    age: props.age,
  });

  // Functieconstructor voor het bijwerken van de staat
  const updatePerson = () => {
    setState((prevState) => ({
      ...prevState,
      age: prevState.age + 1,
    }));
  };

  return (
    <div>
      <p>{`Name: ${state.name}, Age: ${state.age}`}</p>
      <button onClick={updatePerson}>Update Age</button>
    </div>
  );
}

export default Person;