Objekter, prototyper og klasser i JavaScript

JavaScript er baseret på en simpel objektorienteret programmeringsmodel, hvor objekter er en grundlæggende del af sproget. Næsten alt i JavaScript er et objekt. I modsætning til andre objektorienterede programmeringssprog såsom Java, er JavaScript-objekter meget fleksible .

Objekter

Et objekt er en samling af nøgleværdi-par kaldet egenskaber. En ejendoms nøgle er en streng eller et symbol (også kendt som egenskabsnavn ) og værdi kan være hvad som helst. Der er flere måder at oprette et objekt i JavaScript. Den enkleste og mest populære måde er at bruge objekt bogstavelig syntaks:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29 
};

Objekter kan også oprettes ved hjælp af ny operator . new søgeord kan bruges enten med indbygget Object konstruktørfunktion eller brugerdefineret konstruktørfunktion:

// in-built constructor function
const user = new Object();
user.fisrtName = 'John';
user.lastName = 'Doe';
user.age = 29;

// user-defined constructor function
function User(fisrtName, lastName, age) {
    this.fisrtName = fisrtName;
    this.lastName = lastName;
    this.age = age;
};

const user = new User('John', 'Doe', 29);

En ejendoms værdi kan også være en funktion. En sådan egenskab kaldes en metode:

const user = {
    fisrtName: 'John',
    lastName: 'Doe',
    age: 29,
    fullName: function () {
        return `${this.fisrtName} ${this.lastName}`;
    }
};

Egenskabsværdier er tilgængelige ved hjælp af både prikken (. ) notation og den firkantede parentes ([] ) notation:

// dot notation
console.log(user.fullName()); // John Doe
console.log(user.age); // 29

// square bracket notation - does not work for methods
console.log(user['fisrtName']); // John

Du kan tilføje nye egenskaber til et eksisterende objekt ved blot at tildele dem værdier:

user.country = 'United States';

// method can also be added
user.ageRange = function() {
    return `${this.age - 5}-${this.age + 5}`;
}

For at fjerne en egenskab fra objektet skal du bruge delete operatør:

delete user.age;

For at iterere over alle nøgler til et objekt kan vi bruge for...in sløjfe:

for (const key in user) {
    console.log(user[key]);
}

Objektets literal-syntaks kan kun bruges til at oprette et enkelt objekt. For at oprette flere objekter af samme type skal du bruge objektkonstruktørfunktionen:

function Animal(name, icon) {
    this.name = name;
    this.icon = icon;
};

const rabbit = new Animal('Rabbit','🐰');
const cat = new Animal('Cat','🐱');

Vi kan ikke direkte tildele værdier til en objektkonstruktør for at tilføje nye egenskaber og metoder. Nye egenskaber skal tilføjes inde i objektkonstruktørfunktionen:

Animal.color = 'Red'; // wrong way

// correct way
function Animal(name, icon, color) {
    // ...
    this.color = color;
};

Prototyper

Alle objekter i JavaScript arver egenskaber og metoder fra et andet objekt kaldet prototype. prototype egenskab giver os mulighed for at tilføje nye egenskaber og metoder til eksisterende objektkonstruktører. De nye egenskaber deles mellem alle forekomster af den angivne type i stedet for kun af én forekomst af objektet.

Lad os tilføje nye egenskaber til alle objekter af typen Animal via prototype:

// add property
Animal.prototype.color = 'White';

// add method
Animal.prototype.meow = function() {
    if(this.name === 'Cat') {
        return `${this.name} can meow!`;
    } else {
        return `${this.name} cannot meow!`;
    }
}

Nu ovenstående cat og rabbit objekter har egenskaben color og metode meow() fordi prototype af Animal har dem:

console.log(cat.color); // White
console.log(rabbit.meow()); // Rabbit cannot meow!
console.log(cat.meow()); // Cat can meow!

Hvis du vil have adgang til den delte prototype egenskab gennem en instans af en bestemt type, er der en __proto__ ejendom til rådighed. Gennem denne egenskab kan du ændre de eksisterende prototypeegenskaber eller endda tilføje nye egenskaber. Siden prototype egenskaben deles mellem alle forekomster, ændringer foretaget til en forekomsts prototype egenskab eller metode vil blive afspejlet i alle tilfælde:

cat.__proto__.color = 'Black';
cat.__proto__.eatMeat = true;

console.log(rabbit.color); // Black
console.log(rabbit.eatMeat); // true

I lighed med objekter er prototype egenskab eller metode kan fjernes ved hjælp af delete operatør:

delete cat.__proto__.eatMeat;
// OR
delete Animal.prototype.eatMeat;

console.log(rabbit.eatMeat); // undefined

Som vi kan se ovenfor, er prototype egenskab er en kernedel af objektgrundlæggende i JavaScript. Enhver ændring af denne egenskab påvirker alle forekomster af den pågældende objekttype.

Klasser

Begrebet klasser blev introduceret i JavaScript i ES6 (ECMA2015). I det objektorienterede programmeringsparadigme er en klasse en blueprint til at skabe objekter med egenskaber og metoder, mens den indkapsler implementeringsdetaljerne fra brugeren. Begrebet ægte klasser findes dog ikke i JavaScript.

JavaScript-klasser er intet andet end blot syntaktisk sukker over eksisterende prototype-baserede arv og konstruktørfunktioner. Lad os se et eksempel:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `👋 ${this.name}!`;
    }
}

Hvis vi nu vil oprette en ny forekomst af Person klasse, skal vi bruge new operatør:

const bill = new Person('Bill', 25);
console.log(bill.sayHi()); // 👋 Bill!

Når vi opretter et objekt med Person klasse, gør klassekonstruktøren følgende:

1. Opret en ny funktion med navnet Person og kopier alle de egenskaber, der er erklæret inde i konstruktøren, ind i den (name og age ).
2. Tilføj alle metoder i klassen, såsom sayHi() , til Person.prototype ejendom.

Når vi bagefter kalder en hvilken som helst metode for objektet, tages den fra prototype ejendom. Tag et kig på denne artikel for at lære mere om JavaScript-klasser.

Oversigt

Objekter er en vigtig del af JavaScript-sproget. Næsten alt i JavaScript er et objekt.

• Et objekt er en samling af nøgleværdiegenskaber. Et objekt kan oprettes med enten literal objektsyntaks eller objektkonstruktørfunktionssyntaks.
• Når der oprettes en ny funktion i JavaScript, vedhæfter JavaScript-motoren automatisk en prototype ejendom til det. Ændringer i denne egenskab deles mellem alle forekomster af en bestemt objekttype. Det er en fantastisk måde at tilføje nye egenskaber til eksisterende objektkonstruktørfunktioner.
• ES6 bragte klasser til JavaScript, som ikke er andet end en ny måde at skrive konstruktørfunktioner på ved at bruge prototypefunktionaliteten.

Hvis du vil lære mere om objekter, er her en dybdegående MDN-vejledning, der forklarer, hvordan du bruger objekter, egenskaber og metoder.