JavaScript-konstruktörer


Innehållsförteckning

    Visa innehållsförteckning


Exempel

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

Anteckningar

Det anses vara god praxis att namnge konstruktorfunktioner med en stor första bokstav.

Om detta

I en konstruktorfunktion har detta inget värde. Det är ett substitut för det nya objektet. Värdet av detta blir det nya objektet när ett nytt objekt skapas.

Se även:

JavaScript-handledningen för denna


Objekttyper (Blueprints) (Klasser)

Exemplen från de föregående kapitlen är begränsade. De skapar bara enstaka objekt.

Ibland behöver vi en "blåkopia" för att skapa många objekt av samma "typ".

Sättet att skapa en "objekttyp" är att använda en objektkonstruktorfunktion.

I exemplet ovan är function Person() en objektkonstruktorfunktion.

Objekt av samma typ skapas genom att anropa konstruktorfunktionen med nyckelordet new:

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


Vad är det här?

I JavaScript hänvisar nyckelordet detta till ett objekt.

Vilket objekt beror på hur detta anropas (används eller anropas).

Nyckelordet detta hänvisar till olika objekt beroende på hur det används:

  • I en objektmetod hänvisar detta till objektet.

  • Enbart hänvisar detta till det globala objektet.

  • I en funktion hänvisar detta till det globala objektet.

  • I en funktion, i strikt läge, är detta odefinierat.

  • I en händelse hänvisar detta till elementet som tog emot händelsen.

  • Metoder som call(), apply() och bind() kan hänvisa detta till alla objekt.

Notera

detta är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna.

Se även:

JavaScript-handledningen för denna


Lägga till en egenskap till ett objekt

Det är enkelt att lägga till en ny egenskap till ett befintligt objekt:

Exempel

myFather.nationality = "English";

Prova själv →

<!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>

Egenskapen kommer att läggas till myFather. Inte till min mor. (Inte mot någon annan person objekt).


Lägga till en metod till ett objekt

Det är enkelt att lägga till en ny metod till ett befintligt objekt:

Exempel

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

Prova själv →

<!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 kommer att läggas till i myFather. Inte till min mor. (Inte mot någon annan person objekt).


Lägga till en fastighet till en konstruktör

Du kan inte lägga till en ny egenskap till en objektkonstruktor på samma sätt som du lägg till en ny egenskap till ett befintligt objekt:

Exempel

Person.nationality = "English";

Prova själv →

<!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>

För att lägga till en ny egenskap till en konstruktor måste du lägga till den i konstruktörsfunktion:

Exempel

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

Prova själv →

<!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å så sätt kan objektegenskaper ha standardvärden.


Lägga till en metod till en konstruktör

Din konstruktorfunktion kan också definiera metoder:

Exempel

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

Prova själv →

<!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 inte lägga till en ny metod till en objektkonstruktor på samma sätt som du lägger till en ny metod för ett befintligt objekt.

Att lägga till metoder till en objektkonstruktor måste göras inuti konstruktörsfunktion:

Exempel

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() tilldelar värdet av namn till personens lastName-egenskap.

Nu kan du prova:

myMother.changeName("Doe");

Prova själv →

<!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 vet vilken person du är talar om genom att "ersätta" detta med min mor.


Inbyggda JavaScript-konstruktörer

JavaScript har inbyggda konstruktorer för inbyggda objekt:

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

Prova själv →

<!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() finns inte i listan. Math är ett globalt objekt. Nyckelordet new kan inte användas på Matte.


Visste du?

Som du kan se ovan har JavaScript objektversioner av det primitiva datatyperna String, Number och Boolean . Men det finns ingen anledning att skapa komplexa objekt. Primitiva värden är mycket snabbare:

Använd strängliterals "" istället för new String().

Använd bokstavliga nummer 50 istället för new Number().

Använd booleska bokstaver true/false istället för new Boolean().

Använd objektliterals {} istället för new Object().

Använd arrayliterals [] istället för new Array().

Använd mönsterliterala /()/ istället för new RegExp().

Använd funktionsuttryck () {} istället för new Function().

Exempel

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

Prova själv →

<!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>

Strängobjekt

Normalt skapas strängar som primitiver: firstName="John"

Men strängar kan också skapas som objekt med nyckelordet nya:
firstName=new String("John")

Lär dig varför strängar inte ska skapas som objekt i kapitlet JS Strings.


Antal objekt

Normalt skapas tal som primitiva: x=30

Men nummer kan också skapas som objekt med det nya nyckelordet:
x=ny Nummer(30)

Lär dig varför siffror inte ska skapas som objekt i kapitlet JS-nummer.


booleska objekt

Normalt skapas booleaner som primitiver: x = falskt

Men booleaner kan också skapas som objekt med det nya nyckelordet:
x=new Boolean(false)

Lär dig varför booleaner inte bör skapas som objekt i kapitlet JS Booleans.