What is this OOP thingy.
"Object-oriented programming (OOP) is a programming language model organized around objects rather than "actions" and data rather than logic" - Margeret Rouse.
To better understand let's have a look at Person as an Object, what attributes can a person have? legs, hands, head etc; these are the properties of the Person. Okay so what can a person do, run, walk, crawl, talk, sit, stand etc; these are methods of the Person object. Notice that I keep using capital "P" when I refer to the Person object, well that's how class names are written.
The basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs - developer.mozilla.org
let's see some code examples shall we;
Defining Classes
We define classes using the class keyword and name ("Person"). Properties are written in the constructor method. The this keyword assigns properties to the class, this here refers to an instance of the class, think of this as a pronoun if class was a noun.
//class declaration
class Person {
constructor() {
this.name = "Isaac";
this.age = 21;
}
}
let person = new Person();
console.log(person.name); // logs - Isaac
This looks fine, but what if we want users of our programme to enter their name and age, just what if, then we have to add parameters to our constructor method. Parameters are placeholders use in functions to accept arguments( what are arguments again? just values pal). code below:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
let person = new Person("Isaac", 23);
let person1 = new Person("Bob", 28);
console.log(person.name); // logs - Isaac
console.log(person1.name);// logs - Bob
Class Methods
That was cool, now let's look at methods (getters, setters etc), they are not scary at all, let's look at an example:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
// setter
setName(name) {
this.name = name;
}
//getter
bio() {
return this.description();
}
//some method with a lil logic
description(){
return this.name + " is " + this.age + "years old.";
}
}
let person = new Person("Isaac", 23);
person.setName("Joy");
console.log(person.bio()); // logs - Joy is 23years old.
I told you they were not scary, getters just get property values while setters change property values
and I used this opportunity to show you you can return another method with another, note that we can simply do return this.name + " is " + this.age + "years old."; in our bio() method.
Inheritance
Now we have a nice Person class that describes a Person,but as we go down our programme we may have other classes like Boss, Father, Mother, Worker etc. All this class will have same properties of the Person class and more. Why write same codes over and over again when you can use inheritance.
Here, a Father inherits properties/methods of Person.
//Parent class
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
setName(name) {
this.name = name;
}
bio() {
return this.description();
}
description(){
return this.name + " is " + this.age + "years old.";
}
}
//child class
class Father extends Person {
bio(){
return super.bio();
}
}
var father = new Father("Isaac", 34);
console.log(father.name) //logs - Isaac
console.log(father.bio()); //logs - Isaac is 34years old.
We used extends to allow Father access to properties/methods of Person.
Noticed the super used to return bio()?
We use super to access methods of parent-class("Person").
Conclusion
We covered class definition, properties, methods and inheritance, if you need more information,mozilla is always there to help;
I will be waiting for your awesome contributions down in the comment section.
Thanks for taking your time to read till the end, I appreciate, Bye.
Top comments (22)
I would suggest changing the inheritance example to a proper is-a relationship to illustrate the point - I assume many OOP-newbies will find this article, so better not confuse them :)
There is no sense in Person extending Organization (essentially being one).
On it......tanx for the response
Thanks for the write-up Nddy.
In your third example, was the reason you chose to call
description()inbio()just to show us that you can call class methods in other methods of the same class or was there another reason?Also, I think you have a typo here: "I told you they were not scary, getters get's property value and setters changes our changes property value."
Thanks.
no other reason
thanks for noticing d typo.
Bad example on inheritance. Inheritance describes an IS-A relationship. Obviously a person is not an organization and such an inheritance doesn't make sense. Also "this" refers to the instance of the class not the class itself. Second description implies that changes on this would influence all instances of some class which is not the case.
you are absolutely right...
why I do agree I did use a bad example while trying to stick to the storyline,
I tried to keep it as simple as possible as I did not expect a newbie to understand instances
Keeping instructions is nice but they need to be precise otherwise a newbie could conclude that "this" is some kind of a static variable and that could make learning difficult down the road.
Just edit the "this" part, overall the article is fine.
thanks for contributing.
It sure is a bad example none-the-less, I am working on changing it and still keeping it as simple as possible
Wait, now every Person is a Father, but not every Father is a Person? I think maybe you should spend more time understanding inheritance yourself before trying to explain it to others.
A person is a Father
A Father is a person
In this case it goes both ways
I am not perfect... I get that!
you see something that doesn't feel right you let me know.
Not every Person is a Father, and that's what inheritance represents. If class B inherits from class A, it means that every instance of class B has the abilities of class A, and anywhere that expects an A can be given a B instead.
This is probably easier to understand if we add a third class to the example: Mother. Intuitively, a Mother is a Person, but not a Father; and a Father is not a Mother either. So code that expects a Father and is given a Mother won't work; but code that expects a Person can be given a Father or a Mother. So, we would write "class Father extends Person", and "class Mother extends Person".
Thanks man... I figured that out from your first response
I think this article has helped me more than it will help any reader and I made some changes which you can check out too
I'm grateful.
I like the way you wrote it, you made it look really easy.
thanks Lance, I'm glad you liked it
You have an extra "class Person {" in there...
can you be more specific pls
Seen it... tankx
Classes in JS is less syntactical sugar and more syntactical salt.
lmao
In the first example, I believe the code at the bottom should be
'Console.log(citizen.name)'
Rather than
'Console.log(a.name)'
no?
Yes you are right... I kinda changed to citize at a late hour.... forgot that one
Editing it now... tanx