I am new to OOP in Javascript. I am learning Inheritance. Below is my code. I am not using any prototype and create function here but still managed to inherit. I know this is not the right way of doing. But for achieving my goal, how should I rewrite the code in order to utilize the actual inheritance.
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" >
// Validation Class
var Validation = function() {
this.isEmpty = function(val) {
if (val == "")
return true;
}
}
// Ajax Class
var Ajax = function() {
this.url = "";
this.data = "";
this.send = function(val) {
alert("Data send to " + this.url + " succeessfully");
}
}
// Form Class
var LoginForm = function(action, username, password) {
Validation.call(this);
Ajax.call(this);
this.action = action;
this.username = username;
this.password = password;
}
var loginObj = new LoginForm("domain/server", "john", '123456');
loginObj.url = loginObj.action;
loginObj.isEmpty(loginObj.username);
loginObj.isEmpty(loginObj.password);
loginObj.data = {username: loginObj.username, password: loginObj.password};
loginObj.send();
</script>
</head>
<body>
</body>
</html>
EDIT: But when I tried like this it is throwing error.
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" >
// Validation Class
var Validation = function() {
this.isEmpty = function(val) {
if (val == "")
return true;
}
}
// Ajax Class
var Ajax = function() {
this.url = "";
this.data = "";
this.send = function(val) {
alert("Data of "+this.data.username+" send to " + this.url + " succeessfully");
}
}
// Inheritance
Ajax.prototype = Object.create(Validation);
var LoginForm = "";
LoginForm.prototype = Object.create(Ajax);
// Form Class
LoginForm = function(action, username, password) {
this.action = action;
this.username = username;
this.password = password;
}
var loginObj = new LoginForm("domain/server", "john", '123456');
loginObj.url = loginObj.action;
loginObj.isEmpty(loginObj.username);
loginObj.isEmpty(loginObj.password);
loginObj.data = {username: loginObj.username, password: loginObj.password};
loginObj.send();
var loginObj2 = new LoginForm("domain/server", "JAMES", '123456');
loginObj2.url = loginObj2.action;
loginObj2.isEmpty(loginObj2.username);
loginObj2.isEmpty(loginObj2.password);
loginObj2.data = {username: loginObj2.username, password: loginObj2.password};
loginObj2.send();
</script>
</head>
<body>
</body>
</html>