How does 'this' work in constructor function for Object creation in Javascript

Question

I am really struggling to understand how does this works in constructor function for object creation in Javascript environment.

below is the code snippet:

function Employee() {
    basicSalary = 12000;
    overtime = 10;
    rate = 200;
    this.getWage = function () {
        return basicSalary+(overtime*rate);
    }
}
let emp = new Employee();
console.log(emp.basicSalary);//undefined
console.log(emp.getWage());//14000

in above code I am getting undefined for basicSalary variable. So in order to get basicSalary value I prefix it with this inside function like:

this.basicSalary = 12000;

But, in doing so I am getting error in accessing getWage() method. It says:

Uncaught ReferenceError: basicSalary is not defined
    at Employee.getWage (index.js:6)
    at index.js:11

However, if I prefix this to the basicSalary in returning statement inside getWage() function, I am able to access both basicSalary variable and getWage() method.

Also If I replace all my code to factory function i.e. Object literal type like here:

function employee(){
    return {
        basicSalary : 12000,
        overtime : 10,
        rate : 200,
        getWage:function(){
            return this.basicSalary+(this.overtime*this.rate); // accessing values through `this`
        }
    };
}

const e2 = employee();
console.log(e2.basicSalary);
console.log(e2.getWage());

Now I am easily able to get both basicSalary and getWage() method. Only thing that I needed to do was put this in return statement inside getWage() method.

in both these approaches this works differently. I am confused. Please share some knowledge on how to use this in Javascript.

I can help you with the article I came across when I was trying to figure out how 'this' works in JavaScript. javascriptissexy.com/… — Amit Mondal
– Amit Mondal, Commented Feb 22, 2020 at 7:49
“In both this approaches this works differently ” Why do you think that? What do you perceive as different? The biggest difference between basicSalary = ... and this.basicSalary = ... is that the first creates a variable and the second creates an object property. You cannot refer to an object property as if it was a variable (your first attempt to fix it). The last example is almost the same as the previous one, except you are creating the object explicitly vs having new create it for you. — Felix Kling
– Felix Kling, Commented Feb 22, 2020 at 8:57

Josh Wulf · Accepted Answer · 2020-02-22 09:03:12Z

1

In the first case, you are either (implicitly) declaring new local variables (scoped to the execution of the function), or referencing global variables that exist in a higher scope.

They are not bound to the object returned with a new.

In the second case you are returning an object literal, so they are bound to it, obviously.

Amit’s code is good. You can also do this:

function Employee() {
    this.basicSalary = 12000;
    this.overtime = 10;
    this.rate = 200;
    this.getWage = () =>  this.basicSalary + (this.overtime*this.rate)
}

If you have arrow functions though, you also have ES6 classes. That may be a better match.

edited Feb 22, 2020 at 9:03

answered Feb 22, 2020 at 8:12

Josh Wulf

4,9122 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Kling Over a year ago

Since I can see how your answer could be misinterpreted: This example works exactly the same with a normal function. The arrow function is not necessary.

Amit Mondal · Accepted Answer · 2020-02-22 07:59:42Z

0

Once you read the article I commented you can try this.

function Employee() {
    this.basicSalary = 12000;
    this.overtime = 10;
    this.rate = 200;
    this.getWage = function () {
        return this.basicSalary + (this.overtime*this.rate);
    }
}
let emp = new Employee();
console.log(emp.basicSalary);//12000
console.log(emp.getWage());//14000

answered Feb 22, 2020 at 7:59

Amit Mondal

3593 silver badges10 bronze badges

Collectives™ on Stack Overflow

How does 'this' work in constructor function for Object creation in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related