Javascript Course


Creating subclasses with extends

In JavaScript you can create subclasses (as a child class of another class) with the extends keyword.
The subclass inherits and can extend the properties and methods defined in parent class.
If the subclass has no constructor(), it will be used the constructor() of the parent class.


- Example:
<div id='ex_res'>Shows response</div>

<script>
//Base class
class User {
 constructor(name){
 //set property
 this.name = name;
 }

 //method
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclass
class Gamer extends User {
 //method that uses the name property defined in parent class
 sayBye(){
 return 'Goodbye '+ this.name;
 }
}

//Usage

//set an object instance of subclass
//it needs an argument because it is used the parent constructor()
let ob_gbr = new Gamer('MarPlo');

//calls the sayHi() method defined in the parent class (User)
var hi = ob_gbr.sayHi();

//calls the method defined in subclass
var bye = ob_gbr.sayBye();

//shows the value of 'hi' and 'bye' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h3>'+hi+'<br>'+bye+'</h3>';
</script>

Class Inheritance, super

The subclass inherits the properties and methods defined in parent class (including static methods).
If there is a constructor present in subclass, it needs to first call super() before using "this".
To rewrite in subclass some properties and methods from parent class, just define them again in subclass.


- Example:
<div id='ex_res'>Shows response</div>

<script>
//Base class
class Parent {
 constructor(name){
 //set property
 this.name = name;
 }

 //method
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclass
class Child extends Parent {
 constructor(name){
 //apply super to include parent constructor and pass in the name parameter
 super(name);

 //here you can rewrite or define properties

 this.site ='CoursesWeb.net';
 }

 //rewrite method from parent
 sayHi(){
 return 'From Subclass, site: '+ this.site +'<br>Hello '+ this.name;
 }
}

//Usage

//set an object instance of subclass Child
let obj = new Child('MarPlo');

//calls the sayHi() method, rewrited in child class
var hi = obj.sayHi();

//shows the value of 'hi' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h2>'+hi+'</h2>';
</script>

Class Methods with super

The super keyword is used to call corresponding methods of super class. It is used when you don't want to totally replace the parent method, but to add new instructions to it.
Classes provide "super" keyword for that.


- Example:
<div id='ex_res'>Shows response</div>

<script>
//Base class
class Parent {
 constructor(name){
 //set property
 this.name = name;
 }

 //method
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclass
class Child extends Parent {
 constructor(name, site){
 //apply super to include parent constructor and pass in the name parameter
 super(name);

 //here you can rewrite or define properties
 this.site = site;
 }

 //reuse method from parent
 sayHi(){
 var hi = super.sayHi(); //gets data returned by parent method

 //here you can add new instructions

 return hi +'<br>From: '+ this.site;
 }
}

//Usage

//set an object instance of subclass Child
let obj = new Child('MarPlo', 'CoursesWeb.net');

//calls the sayHi() method redefined in the Child class
var hi = obj.sayHi();

//shows the value of 'hi' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h2>'+hi+'</h2>';
</script>

super in static methods

The "super" keyword can be applied in static methods too.
- Example:
<script>
//Base class
class Parent {
 //static method
 static sayHi(name){
 alert('Hello '+ name +' from parent');
 }
}

//Subclass
class Child extends Parent {
 //redefine the static method
 static sayHi(name, name2){
 super.sayHi(name); //include the method from parent
 alert('Hello '+ name2 +' from subclass');
 }
}

//calls the static method from subclass
Child.sayHi('MarPlo', 'Gamv');
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Subclass with extends and Inheritance

Last accessed pages

  1. JavaScript Course - Free lessons (31647)
  2. Volume and Surface Area Calculator for 3D objects (11276)
  3. Using v-model in form input fields (1051)
  4. jQuery UI draggable - Drag elements (11445)
  5. Display data from PHP Array, or MySQL in HTML table (26980)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)