JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript -objectconstructors


Voorbeeld

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Het wordt als een goede gewoonte beschouwd om constructorfuncties een hoofdletter te geven.


Objecttypen (blauwdrukken) (klassen)

De voorbeelden uit de voorgaande hoofdstukken zijn beperkt. Ze maken alleen afzonderlijke objecten.

Soms hebben we een " blauwdruk " nodig om veel objecten van hetzelfde "type" te maken.

De manier om een ​​"objecttype" te maken, is door een objectconstructorfunctie te gebruiken .

In het bovenstaande voorbeeld function Person()is een objectconstructorfunctie.

Objecten van hetzelfde type worden gemaakt door de constructorfunctie aan te roepen met het newtrefwoord:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


Het dit trefwoord

In JavaScript is het ding dat thiswordt genoemd het object dat de code "bezit".

De waarde van this, wanneer gebruikt in een object, is het object zelf.

In een constructorfunctie thisheeft geen waarde. Het is een vervanging voor het nieuwe object. De waarde van thiswordt het nieuwe object wanneer een nieuw object wordt gemaakt.

Merk op dat thisdit geen variabele is. Het is een sleutelwoord. U kunt de waarde van niet wijzigen this.


Een eigenschap aan een object toevoegen

Een nieuwe eigenschap toevoegen aan een bestaand object is eenvoudig:

Voorbeeld

myFather.nationality = "English";

De woning wordt toegevoegd aan myFather. Niet tegen mijn moeder. (Niet tegen enig ander persoon bezwaar).


Een methode aan een object toevoegen

Een nieuwe methode toevoegen aan een bestaand object is eenvoudig:

Voorbeeld

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

De methode wordt toegevoegd aan myFather. Niet tegen mijn moeder. (Niet tegen enig ander persoon bezwaar).


Een eigenschap toevoegen aan een constructor

U kunt geen nieuwe eigenschap aan een objectconstructor toevoegen op dezelfde manier waarop u een nieuwe eigenschap aan een bestaand object toevoegt:

Voorbeeld

Person.nationality = "English";

Om een ​​nieuwe eigenschap aan een constructor toe te voegen, moet je deze toevoegen aan de constructorfunctie:

Voorbeeld

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Op deze manier kunnen objecteigenschappen standaardwaarden hebben.


Een methode toevoegen aan een constructor

Uw constructorfunctie kan ook methoden definiëren:

Voorbeeld

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

U kunt geen nieuwe methode aan een objectconstructor toevoegen op dezelfde manier waarop u een nieuwe methode aan een bestaand object toevoegt.

Het toevoegen van methoden aan een objectconstructor moet binnen de constructorfunctie worden gedaan:

Voorbeeld

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName; 
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  };
}

De functie changeName() wijst de waarde van name toe aan de eigenschap lastName van de persoon.

Nu kunt u proberen:

myMother.changeName("Doe");

JavaScript weet over welke persoon je het hebt door dit te "vervangen" door myMother .


Ingebouwde JavaScript-constructors

JavaScript heeft ingebouwde constructors voor native objecten:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Het Math()object staat niet in de lijst. Mathis een globaal object. Het newtrefwoord kan niet worden gebruikt op Math.


Wist u?

Zoals u hierboven kunt zien, heeft JavaScript objectversies van de primitieve gegevenstypen String, Number, en Boolean. Maar er is geen reden om complexe objecten te maken. Primitieve waarden zijn veel sneller:

Gebruik letterlijke tekenreeksen ""in plaats van new String().

Gebruik letterlijke getallen 50in plaats van new Number().

Gebruik booleaanse letterlijke waarden true / falsein plaats van new Boolean().

Gebruik letterlijke objecten {}in plaats van new Object().

Gebruik array-letterwoorden []in plaats van new Array().

Gebruik letterlijke patronen /()/in plaats van new RegExp().

Gebruik functie-expressies () {}in plaats van new Function().

Voorbeeld

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

String-objecten

Normaal gesproken worden strings gemaakt als primitieven: firstName = "John"

Maar strings kunnen ook als objecten worden gemaakt met het newtrefwoord:
firstName = new String("John")

Lees waarom strings niet als object moeten worden gemaakt in het hoofdstuk JS Strings .


Nummer objecten

Normaal gesproken worden getallen gemaakt als primitieven: x = 30

Maar getallen kunnen ook als objecten worden gemaakt met het newtrefwoord:
x = new Number(30)

Lees waarom getallen niet als object moeten worden gemaakt in het hoofdstuk JS-nummers .


Booleaanse objecten

Normaal gesproken worden booleans gemaakt als primitieven: x = false

Maar booleans kunnen ook als objecten worden gemaakt met het newtrefwoord:
x = new Boolean(false)

Leer waarom booleans niet als object moeten worden gemaakt in het hoofdstuk JS Booleans .