de Cynthia Lee

Să demitizăm cuvântul cheie „nou” JavaScript

Sa demitizam cuvantul cheie „nou JavaScript

În weekend, am finalizat-o pe Will Sentance JavaScript: Piesele dure. S-ar putea să nu pară cel mai glorios mod de a petrece un weekend, dar de fapt mi ​​s-a părut destul de distractiv și relaxant să finalizez cursul. A atins programarea funcțională, funcțiile de ordin superior, închiderile și JavaScript asincron.

Pentru mine, punctul culminant al cursului a fost modul în care a extins abordările JavaScript la programarea orientată pe obiecte (OOP) și a demistificat magia din spatele nou operator. Acum am o înțelegere completă a ceea ce se întâmplă sub capotă atunci când nou se folosește operatorul.

Programare orientată pe obiecte în JavaScript

1612166887 193 Sa demitizam cuvantul cheie „nou JavaScript
Fotografie de Nick Karvounis pe Unsplash

Programarea orientată pe obiecte (OOP) este o paradigmă de programare bazată pe conceptul de „obiecte”. Datele și funcțiile (atribute și metode) sunt grupate într-un obiect.

Un obiect din JavaScript este o colecție de perechi cheie-valoare. Aceste perechi cheie-valoare sunt proprietăți ale obiectului. O proprietate poate fi o matrice, o funcție, un obiect în sine sau orice tip de date primitive, cum ar fi șiruri sau numere întregi.

Ce tehnici avem în cutia noastră de instrumente JavaScript pentru crearea obiectelor?

Să presupunem că creăm utilizatori într-un joc pe care tocmai l-am conceput. Cum am stoca detalii despre utilizatori, cum ar fi numele, punctele și metodele de implementare, cum ar fi o creștere a punctelor? Iată două opțiuni pentru crearea obiectelor de bază.

Opțiunea 1 – Notare literală a obiectului

let user1 = {
  name: "Taylor",
  points: 5,
  increment: function() {
    user1.points++;
  }
};

Un obiect JavaScript literal este o listă de perechi nume-valoare înfășurate în acolade. În exemplul de mai sus, este creat obiectul „utilizator1”, iar datele asociate sunt stocate în interiorul acestuia.

Opțiunea 2 – Object.create ()

Object.create(proto, [ propertiesObject ])

Object.create metodele acceptă două argumente:

  1. proto: obiectul care ar trebui să fie prototipul obiectului nou creat. Trebuie să fie un obiect sau nul.
  2. propertiesObject: proprietățile noului obiect. Acest argument este opțional.

Practic, treci în Object.create un obiect din care doriți să moșteniți și returnează un obiect nou care moștenește de la obiectul pe care l-ați trecut.

let user2 = Object.create(null);

user2.name = "Cam";
user2.points = 8;
user2.increment = function() {
  user2.points++;
}

Opțiunile de bază de creare a obiectelor de mai sus sunt repetitive. Este necesar ca fiecare să fie creat manual.

Cum depășim acest lucru?

Soluții

Soluția 1 – Generați obiecte folosind o funcție

O soluție simplă este să scrieți o funcție pentru a crea noi utilizatori.

function createUser(name, points) {
  let newUser = {};
  newUser.name = name;
  newUser.points = points;
  newUser.increment = function() {
    newUser.points++;
  };
  return newUser;
}

Pentru a crea un utilizator, ați introduce acum informațiile în parametrii funcției.

let user1 = createUser("Bob", 5);
user1.increment();

Cu toate acestea, funcția de creștere din exemplul de mai sus este doar o copie a funcției de creștere originale. Aceasta nu este o modalitate bună de a vă scrie codul, deoarece orice schimbări potențiale ale funcției vor trebui făcute manual pentru fiecare obiect.

Soluția 2 – Folosiți natura prototipală a JavaScript-ului

Spre deosebire de limbajele orientate obiect, cum ar fi Python și Java, JavaScript nu are clase. Folosește conceptul de prototipuri și înlănțuirea prototipului pentru moștenire.

Când creați o nouă matrice, aveți automat acces la metode încorporate, cum ar fi Array.join, Array.sort, și Array.filter. Acest lucru se datorează faptului că obiectele matrice moștenesc proprietăți de la Array.prototype.

Sa demitizam cuvantul cheie „nou JavaScript
Credit de imagine: Lanțuri prototip JavaScript, lanțuri Scope și performanță de Diego Castorina

Fiecare funcție JavaScript are o proprietate prototip, care este goală în mod implicit. Puteți adăuga funcții la această proprietate prototip și, în această formă, este cunoscută ca metodă. Când se execută o funcție moștenită, valoarea acesteia indică obiectul moștenitor.

function createUser(name, points) {
  let newUser = Object.create(userFunction);
  newUser.name = name;
  newUser.points = points;
  return newUser;
}

let userFunction = {
  increment: function() {this.points++};
  login: function() {console.log("Please login.")};
}

let user1 = createUser("Bob", 5);
user1.increment();

Cand user1 obiectul a fost creat, s-a format o legătură de lanț prototip cu userFunction.

Când user1.increment() este în stiva de apeluri, interpretul va căuta user1 în memoria globală. Apoi, va căuta funcția de incrementare, dar nu o va găsi. Interpretul va analiza următorul obiect din lanțul prototip și va găsi funcția de incrementare acolo.

Soluția 3 – nou și acest Cuvinte cheie

1612166888 326 Sa demitizam cuvantul cheie „nou JavaScript

nou operatorul este utilizat pentru a crea o instanță a unui obiect care are o funcție de constructor.

Când apelăm funcția constructor cu nou, automatizăm următoarele acțiuni:

  • Se creează un obiect nou
  • Se leagă this la obiect
  • Obiectul prototip al funcției constructor devine proprietatea __proto__ a noului obiect
  • Returnează obiectul din funcție

Acest lucru este fantastic, deoarece automatizarea are ca rezultat un cod mai puțin repetitiv!

function User(name, points) {
 this.name = name; 
 this.points = points;
}
User.prototype.increment = function(){
 this.points++;
}
User.prototype.login = function() {
 console.log(“Please login.”)
}

let user1 = new User(“Dylan”, 6);
user1.increment();

Prin utilizarea modelului prototip, fiecare metodă și proprietate sunt adăugate direct pe prototipul obiectului.

Interpretul va urca în lanțul prototip și va găsi funcția de incrementare sub proprietatea prototip a utilizatorului, care în sine este, de asemenea, un obiect cu informațiile din interior. Tine minte – Toate funcțiile din JavaScript sunt, de asemenea, obiecte. Acum că interpretul a găsit ceea ce are nevoie, poate crea un nou context de execuție local pentru a rula user1.increment().

Notă laterală: Diferența dintre __proto__ și prototip

Dacă vă confundați deja cu __proto__ și prototip, nu vă faceți griji! Ești departe de a fi singurul confuz în legătură cu acest lucru.

Prototipul este o proprietate a funcției constructor care determină ce va deveni proprietatea __proto__ pe obiectul construit.

Deci, __proto__ este referința creată și acea referință este cunoscută sub numele de legătură de lanț prototip.

Soluția 4 – ES6 „zahăr sintactic”

1612166889 790 Sa demitizam cuvantul cheie „nou JavaScript

Alte limbi ne permit să scriem metodele noastre comune în obiectul „constructor” în sine. ECMAScript6 a introdus clasă cuvânt cheie, care ne permite să scriem clase care seamănă cu clasele normale ale altor limbi clasice. În realitate, este un zahăr sintactic peste comportamentul prototip al JavaScript-ului.

class User {
  constructor(name, points) {
    this.name = name;
    this.points = points;
  }
  increment () {
    this.points++;
  }
  login () {
    console.log("Please login.")
  }
}

let user1 = new User("John", 12);
user1.increment();

În soluția 3, metodele asociate au fost implementate cu precizie folosind User.prototype.functionName. În această soluție, se obțin aceleași rezultate, dar sintaxa pare mai curată.

Concluzie

Acum am aflat mai multe despre diferitele opțiuni pe care le avem în JavaScript pentru a crea obiecte. In timp ce clasă declarații și nou sunt relativ ușor de utilizat, este important să înțelegeți ce este automatizat.

Pentru a recapitula, următoarele acțiuni sunt automatizate atunci când funcția constructor este apelată cu nou:

  • Se creează un obiect nou
  • Se leagă this la obiect
  • Obiectul prototip al funcției constructor devine proprietatea __proto__ a noului obiect
  • Returnează obiectul din funcție

Mulțumesc că mi-ai citit articolul și bate din palme dacă ți-a plăcut! Consultați celelalte articole ale mele, cum ar fi Cum mi-am construit aplicația Pomodoro Clock și lecțiile pe care le-am învățat pe parcurs.