JavaScript-prototyper


Innehållsförteckning

    Visa innehållsförteckning


Alla JavaScript-objekt ärver egenskaper och metoder från en prototyp.


I föregående kapitel lärde vi oss hur man använder en objektkonstruktör:

Exempel

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

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>Using an object constructor:</p>

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

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

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

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

</body>
</html>

Vi lärde oss också att du inte kan lägga till en ny egenskap till en befintlig objektkonstruktor:

Exempel

Person.nationality = "English";

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

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

Person.nationality = "English";

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

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>

<h1>JavaScript Objects</h1>

<p>Using an object constructor:</p>

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

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

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

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

</body>
</html>


Prototyp Arv

Alla JavaScript-objekt ärver egenskaper och metoder från en prototyp:

  • Datum-objekt ärver från Date.prototype

  • Array-objekt ärver från Array.prototype

  • Person-objekt ärver från Person.prototype

Object.prototype är överst i prototypens arvskedja:

Datum-objekt, Array-objekt och Person objekt ärver från Object.prototype.


Lägga till egenskaper och metoder till objekt

Ibland vill man lägga till nya egenskaper (eller metoder) till alla befintliga objekt av en given typ.

Ibland vill man lägga till nya egenskaper (eller metoder) till ett objekt konstruktör.


Använda egenskapen prototyp

JavaScript-egenskapen prototyp låter dig lägga till nya egenskaper till objektet konstruktörer:

Exempel

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

 Person.prototype.nationality = "English";

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>The prototype property allows you to add new methods to objects constructors:</p>

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

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

Person.prototype.nationality = "English";

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

JavaScript-egenskapen prototype låter dig också lägga till nya metoder till objekt konstruktörer:

Exempel

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

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

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

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

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

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

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

Ändra bara dina egna prototyper. Modifiera aldrig prototyperna för standard JavaScript-objekt.