JavaScript konstruktører

Indholdsfortegnelse

Eksempel

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

Noter

Det anses for god praksis at navngive konstruktørfunktioner med et stort første bogstav.

Om dette

I en konstruktørfunktion har dette ikke en værdi. Det er en erstatning for det nye objekt. Værdien af dette bliver det nye objekt, når et nyt objekt oprettes.

Se også:

JavaScript denne selvstudium

Objekttyper (Blueprints) (klasser)

Eksemplerne fra de foregående kapitler er begrænsede. De skaber kun enkelte objekter.

Nogle gange har vi brug for en "blueprint" for at skabe mange objekter af samme "type".

Måden at oprette en "objekttype" er at bruge en objektkonstruktørfunktion.

I eksemplet ovenfor er funktion Person() en objektkonstruktørfunktion.

Objekter af samme type oprettes ved at kalde konstruktørfunktionen med ny nøgleordet:

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

Hvad er dette?

I JavaScript refererer dette søgeordet til et objekt.

Hvilket objekt afhænger af, hvordan dette påkaldes (bruges eller kaldes).

dette søgeordet refererer til forskellige objekter afhængigt af hvordan det bruges:

I en objektmetode henviser dette til objektet.
Alene henviser dette til det globale objekt.
I en funktion henviser dette til det globale objekt.
I en funktion, i streng tilstand, er dette udefineret.
I en begivenhed henviser dette til det element, der modtog begivenheden.
Metoder som call(), apply() og bind() kan henvise dette til ethvert objekt.

Bemærk

dette er ikke en variabel. Det er et nøgleord. Du kan ikke ændre værdien af denne.

Se også:

JavaScript denne selvstudium

Tilføjelse af en egenskab til et objekt

Det er nemt at tilføje en ny egenskab til et eksisterende objekt:

Eksempel

myFather.nationality = "English";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

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

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

Ejendommen vil blive tilføjet til myFather. Ikke til min mor. (Ikke til nogen anden persons genstande).

Tilføjelse af en metode til et objekt

Det er nemt at tilføje en ny metode til et eksisterende objekt:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

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

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

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

Metoden vil blive tilføjet til myFather. Ikke til min mor. (Ikke til nogen anden persons genstande).

Tilføjelse af en ejendom til en konstruktør

Du kan ikke tilføje en ny egenskab til en objektkonstruktør på samme måde som dig tilføje en ny egenskab til et eksisterende objekt:

Eksempel

Person.nationality = "English";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="demo"></p>

<script>

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

// You can NOT add a new property to a constructor function
Person.nationality = "English";

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

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

For at tilføje en ny egenskab til en konstruktør, skal du tilføje den til konstruktør funktion:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

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

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

På denne måde kan objektegenskaber have standardværdier.

Tilføjelse af en metode til en konstruktør

Din konstruktørfunktion kan også definere metoder:

Eksempel

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;
  };
}

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

Du kan ikke tilføje en ny metode til en objektkonstruktør på samme måde, som du tilføjer en ny metode til et eksisterende objekt.

Tilføjelse af metoder til en objektkonstruktør skal ske inde i konstruktør funktion:

Eksempel

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;
  };
}

Funktionen changeName() tildeler værdien af navnet til personens efternavn egenskab.

Nu kan du prøve:

myMother.changeName("Doe");

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
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;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

JavaScript ved, hvilken person du er taler om ved at "erstatte" dette med min mor.

Indbyggede JavaScript-konstruktører

JavaScript har indbyggede konstruktører til native objekter:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

Objektet Math() er ikke på listen. Matematik er et globalt objekt. nye søgeordet kan ikke bruges på Matematik.

Vidste du?

Som du kan se ovenfor, har JavaScript objektversioner af det primitive datatyper String, Number og Boolean . Men der er ingen grund til at skabe komplekse objekter. Primitive værdier er meget hurtigere:

Brug strenge bogstaver "" i stedet for new String().

Brug bogstaver i tal 50 i stedet for new Number().

Brug booleske bogstaver true/false i stedet for new Boolean().

Brug objektliteral {} i stedet for new Object().

Brug array literals [] i stedet for new Array().

Brug mønsterliteraler /()/ i stedet for new RegExp().

Brug funktionsudtryk () {} i stedet for new Function().

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

Stringobjekter

Normalt oprettes strenge som primitiver: firstName="John"

Men strenge kan også oprettes som objekter ved hjælp af nye søgeordet:
firstName=new String("John")

Lær hvorfor strenge ikke skal oprettes som objekt i kapitlet JS Strings.

Antal objekter

Normalt oprettes tal som primitiver: x=30

Men tal kan også oprettes som objekter ved hjælp af nye søgeordet:
x=ny Nummer(30)

Lær hvorfor tal ikke skal oprettes som objekt i kapitlet JS-numre.

booleske objekter

Normalt oprettes booleaner som primitiver: x = falsk

Men booleaner kan også oprettes som objekter ved hjælp af nye søgeordet:
x=new Boolean(false)

Lær hvorfor booleaner ikke bør oprettes som objekt i kapitlet JS Booleans.