Methods in Object-Oriented programming in javascript

The Methods

Methods are functions (and defined like functions), but otherwise follow a similar logic as properties. calling a method is comparable to accessing a property, however, you add () at the end of the method name, possibly with arguments. To define a method, assign a function to a named property of the class’s prototype property. Later, you can call the method on the object by a similar name as you assigned the function to.

In the example below, we define and use the method sayHello() for the Person class.

var Person = function (firstName) {
  this.firstName = firstName;

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"

In JavaScript ways are regular function objects bound to an object as a property, which means you’ll be able to invoke methods “out of the context”. think about the subsequent example code:

var Person = function (firstName) {
  this.firstName = firstName;

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);

var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;

// logs "Hello, I'm Alice"

// logs "Hello, I'm Bob"

// logs "Hello, I'm undefined" (or fails
// with a TypeError in strict mode)

// logs true
console.log(helloFunction === person1.sayHello);

// logs true
console.log(helloFunction === Person.prototype.sayHello);

// logs "Hello, I'm Alice";

As that example shows, all of the references we’ve to the sayHello function— the one on person1, on Person.prototype, within the helloFunction variable, etc.— refer to the same function. the value of this throughout a call to the function depends on how we call it. most commonly,when we  call this in an expression where we got the function from an object property— person1.sayHello()— this is set to the object we got the function from (person1), that is why person1.sayHello() uses the name “Alice” and person2.sayHello() uses the name “Bob”. however if we call it other ways, this is set differently: calling this from a variable— helloFunction()— sets this to the global object (window, on browsers). Since that object (probably) does not have the firstName property, we end up with “Hello, I am undefined”. (That’s in loose mode code; it’d be different [an error] in strict mode, but to avoid confusion we won’t go into detail here.) Or we can set this explicitly using Function#call (or Function#apply), as shown at the end of the example.


Inheritance is a way to create a class as a specialized version of one or additional classes (JavaScript only supports single inheritance). The specialized class is often referred to as the kid, and therefore the other class is commonly called the parent. In JavaScript, you do this by assigning an instance of the parent class to the child class, then specializing it. In trendy browsers, you’ll additionally use Object.create to implement inheritance.

In the example below, we define the class Student as a child class of Person. Then we redefine the sayHello() method and add the sayGoodBye() method.

// Define the Person constructor
var Person = function(firstName) {
  this.firstName = firstName;

// Add a couple of methods to Person.prototype
Person.prototype.walk = function(){
  console.log("I am walking!");

Person.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName);

// Define the Student constructor
function Student(firstName, subject) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;

// Create a Student.prototype object that inherits from Person.prototype.
// Note: A common error here is to use "new Person()" to create the
// Student.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Person for the "firstName" 
// argument. The correct place to call Person is above, where we call 
// it from Student.
Student.prototype = Object.create(Person.prototype); // See note below

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Replace the "sayHello" method
Student.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName + ". I'm studying "
              + this.subject + ".");

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function(){

// Example usage:
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
student1.walk();       // "I am walking!"
student1.sayGoodBye(); // "Goodbye!"

// Check that instanceof works correctly
console.log(student1 instanceof Person);  // true 
console.log(student1 instanceof Student); // true

Regarding the Student.prototype = Object.create(Person.prototype); line: On older JavaScript engines without Object.create, one can either use a “polyfill” (aka “shim”, see the linked article), or one can use a function that achieves the same result, such as:

function createObject(proto) {
    function ctor() { }
    ctor.prototype = proto;
    return new ctor();

// Usage:
Student.prototype = createObject(Person.prototype);

Making sure that this points to the right thing regardless of how the object is instantiated can be difficult. However, there is a simple idiom to make this easier.

var Person = function(firstName) {
  if (this instanceof Person) {
    this.firstName = firstName;
  } else {
    return new Person(firstName);

I hope you will find this post very useful regarding Object Oriented Programming in Javascript. Let me know if you have any question regarding Javascript in a comment . I will reply to you ASAP.

Have you got a cool idea about Web Application Development ? Contact us Now to get the free consultation on your idea. Alphanso Tech is rated as one of the best Web Application Development Company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

Leave a Reply

Your email address will not be published. Required fields are marked *