Skip to content

Commit 29125b2

Browse files
committed
added inheritance, prototypes, classes, function context
1 parent 13cf82b commit 29125b2

File tree

1 file changed

+152
-1
lines changed

1 file changed

+152
-1
lines changed

README.md

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -432,4 +432,155 @@ async function asyncFunc() {
432432
}
433433
```
434434

435-
The `async` function implicitly returns a promise, so we can use the `then` method to get the value later.
435+
The `async` function implicitly returns a promise, so we can use the `then` method to get the value later.
436+
437+
## Classes
438+
439+
Similar to languages like C++, Java, Python etc. JavaScript also supports classes. We use the keyword `new` to create an object of the class. The syntax of the class is given below.
440+
441+
```javascript
442+
function Person(name, age) {
443+
this.name = name;
444+
this.age = age;
445+
446+
this.printDetails = function() {
447+
console.log(this.name + " " + this.age);
448+
}
449+
}
450+
451+
var person = new Person("John", 20);
452+
person.printDetails();
453+
```
454+
455+
There is also one more way to create a object, without using the `new` keyword. This is called the factory method.
456+
457+
```javascript
458+
var person = {
459+
name: "Anurag",
460+
age: 20,
461+
printDetails: function () {
462+
console.log(this.name + " " + this.age);
463+
}
464+
}
465+
466+
console.log(person.name);
467+
person.printDetails();
468+
```
469+
470+
Both methods can be used to create an object, but the only difference is in the second method we directly create an object named person without creating a class.
471+
472+
## Function Context
473+
474+
All javascript functions run under a specific context/scope, for example, all the functions which are run in the browser are run under the `window` context. This keyword is used to access the context of the function.
475+
476+
But we can change the context of the function using the `bind` method. The `bind` method returns a new function with the context changed.
477+
478+
```javascript
479+
var person = {
480+
name: "Anurag",
481+
}
482+
483+
function printName() {
484+
console.log(this.name);
485+
}
486+
487+
// We cannot call the printName function directly, because the context of the function is not set.
488+
489+
var printNameWithContext = printName.bind(person);
490+
```
491+
492+
There is also another function, which is called `call` function. It is somewhat similar to `bind` but instead of returning the function, it directly calls the function with context.
493+
494+
The same example can be written using the `call` function.
495+
496+
```javascript
497+
printName.call(person);
498+
```
499+
500+
In simple terms, you can think of call as the automatic execution of the bind function.
501+
502+
```javascript
503+
printName.call(person)
504+
printName.bind(person)();
505+
```
506+
507+
Both are same in terms of results. Another example:
508+
509+
```javascript
510+
var printNameContext = printName.bind(person);
511+
var printNameCall = function () {
512+
printName.call(person);
513+
}
514+
// both are same
515+
```
516+
517+
## Inheritance
518+
519+
An important concept of the object-oriented programming language is inheritance. JavaScript supports inheritance in many different ways. One of the ways is using the `prototype` property of the function.
520+
521+
Every object in the javascript has a property called `prototype`
522+
523+
### Prototypes
524+
525+
Above under the classes section, you can see how to define a class without using any of the inheritance concepts. Now, let me give an example using the prototype property.
526+
527+
```javascript
528+
function Person(firstName, lastName) {
529+
this.firstname = firstName;
530+
this.lastname = lastName;
531+
}
532+
533+
Person.prototype.getFullName = function() {
534+
return this.firstName + " " + this.lastName;
535+
}
536+
537+
var person = new Person("Anurag", "Peddi");
538+
console.log(person.getFullName()); // Anurag Peddi
539+
```
540+
541+
You can also define an empty class and then add the methods using prototypes.
542+
543+
```javascript
544+
var Person = function() {}
545+
546+
Person.prototype.names = function(firstm last) {
547+
this.firstName = first;
548+
this.lastName = last;
549+
}
550+
551+
Person.prototype.getFullName = function() {
552+
return this.firstName + " " + this.lastName;
553+
}
554+
555+
var person = new Person();
556+
557+
person.names("Anurag", "Peddi");
558+
console.log(person.getFullName()); // Anurag Peddi
559+
```
560+
561+
Some inheritance examples:
562+
563+
```javascript
564+
var Person = function() {}
565+
566+
Person.prototype.names = function(first, last) {
567+
this.firstName = first;
568+
this.lastName = last;
569+
}
570+
571+
Person.prototype.getFullName = function() {
572+
return this.firstName + " " + this.lastName;
573+
}
574+
575+
var anotherPerson = function() {};
576+
anotherPerson.prototype = new Person();
577+
578+
anotherPerson.prototype.same = function() {
579+
return "Same";
580+
}
581+
582+
var person = new anotherPerson();
583+
person.names("Anurag", "Peddi");
584+
console.log(person.getFullName()); // Anurag Peddi
585+
console.log(person.same()); // Same
586+
```

0 commit comments

Comments
 (0)