onlyforbopi
9/26/2018 - 8:05 AM
JS.Objects.Classes.Ex1
JS.Objects.Classes.Ex1
function Hero(name, side) {
this.name = name;
this.side = side;
this.speak = function() {
return "<p>My name is " + this.name +
", I'm with the " + this.side + ".</p>";
}
}
var darkVador = new Hero("Dark Vador", "empire");
var luke = new Hero("Luke Skywalker", "rebels");
var ianSolo = new Hero("Ian Solo", "rebels");
function makeHeroesSpeak() {
document.body.innerHTML += darkVador.speak();
document.body.innerHTML += luke.speak();
document.body.innerHTML += ianSolo.speak();
}
<!DOCTYPE html>
<html lang="en">
<head>
<!---
ES5's constructor functions, the new keyword
With JavaScript version 5 (and previous versions), you can define a pseudo-class template called "a constructor function". The syntax is the same as for creating a function, except that:
By convention, its name is Capitalized. The first letter of the function name is in uppercase, this is a good way to know, when you read someone else's code, that this is not a regular function, but a constructor function. Its name is a noun, the name of the class of objects you are going to build. Example: Person, Vehicle, Enemy, Product, Circle, Ball, Player, Hero, etc.
You build new objects using the new keyword:
Examples (Car, Hero, Ball, Product are constructor function names):
var car = new Car('Ferrari', 'red');
var luke = new Hero('Luke Skywalker', 'rebels");
var ball1 = new Ball(10, 10, 20, 'blue'); // x=10, y=10, radius = 20, color = 'blue'
var p1 = new Product('Epson printer P1232', '183', 'Mr Buffa'); // ref, price, customer
etc.
The parameters of the function are the "constructor parameters": the new object that you are building will take these as its initial properties' values. You can build a Hero, but you must give him/her a name, a side, etc.
You define the property names and method names using the this keyword. But beware: the syntax is not the same as the syntax we used for singleton/simple objects. No more ":" and "," between properties. Here we use "=" and ";" like in regular functions.
Example:
function Hero(name, side) {
this.name = name;
this.side = side;
this.speak = function() {
console.log("My name is " + this.name + " and I'm with the " + this.side);
}
}
In a constructor function named "Hero", you will find properties declared like this: this.name this.side; and methods declared like this: this.speak = function() {...}
Very often some properties are initialized using the constructor function parameters, so that the newly constructed objects will get an initial value for their properties. In this case, we use the this keyword to distinguish the property from the constructor function parameter:
Example:
function Hero(name) {
this.name = name;
...
}
-->
<meta charset="utf-8">
<title>JavaScript OOP: create objects</title>
</head>
<body>
<p>Look at the JS code. This time we created multiple objects using a "constructor function.</p>
<p>
<button onclick='makeHeroesSpeak();'>Make Star Wars heroes speak!</button>
</p>
</body>
</html>