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:
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:
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:
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>
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
.
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.
JavaScript-egenskapen prototyp
låter dig lägga till nya egenskaper till objektet konstruktörer:
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:
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.