Why does creating objects with constructor execute object's method in javascript?

Question

Suppose I want to have three objects of type Room. The three objects would be bedroom, livingroom and bathroom. Room has two properties length and breadth, and one method myFunc. I use constructor method to create the three required objects as:

function Room(len, bred, myFunc) {
        this.len = 5;
        this.bred = 8;  
        this.myFunc =  alert();
}

    var bedroom = new Room();
    var livingroom = new Room(); 
    var bathroom = new Room();

The problem is that when I run this script myFunc gets executed three times displaying the alert. What I thought was that since new keyword converts a function into an object it must not execute that object's method -- typeof new Room returns "object".

My question is:

if the statement new Room(); converts a copy of Room() function into an object then isn't this equvalent to object creation with literal notation? If yes then shouldn't var bedroom = new Room(); just assign properties of Room object to bedroom object? Why does it execute objects method?
How do I create objects without executing their methods?

I've soon noticed that even creating objects with literal notation executes it's method. — user31782
– user31782, Commented Apr 19, 2016 at 4:54
You're not understanding the difference between alert() and alert. This has nothing to do with creating objects. — JLRishe
– JLRishe, Commented Apr 19, 2016 at 4:57
@JLRishe I thought a function must have brackets after it's name. What does javascript do when it see alert? Does it replace alert with it's definition? — user31782
– user31782, Commented Apr 19, 2016 at 5:07
alert is a function, as is function(x) { alert(x); }. When you put parentheses after a function, the function gets executed: alert("foo") or (function(x) { alert(x); })("foo"). — Amadan
– Amadan, Commented Apr 19, 2016 at 5:14
It's not quite same as C, because JavaScript is object-oriented, and C isn't (and it's object-oriented in a "weird" way, different from C++, for example). The variable this is crucial; as is the fact that the difference between a function and a method is very flimsy. alert expects to be called like a method (window.alert; the fact that it can be called as alert is because there is no local variable alert, and window is the default receiver). You definitely should finish the chapter on objects in JS... — Amadan
– Amadan, Commented Apr 19, 2016 at 6:56

timolawl · Accepted Answer · 2016-04-19 06:48:29Z

1

alert is the function and alert() executes it. It has nothing to do with how objects are created.

Keep in mind that alert needs to be wrapped because it is written in native code foreign to JavaScript.

So it should be (with clickable example):

function Room(len, bred, myFunc) {
  this.len = 5;
  this.bred = 8;
  this.myFunc = function(x) {
    alert(x)
  };
}

var bedroom = new Room();
var livingroom = new Room();
var bathroom = new Room();

bedroom.myFunc('This is the bedroom.');

Edit:

The main reason is that alert expects this to be bound to window. Meaning that the following will also work:

this.myFunc = alert.bind(window);

function Room(len, bred, myFunc) {
  this.len = 5;
  this.bred = 8;
  this.myFunc = alert.bind(window);
}

var bedroom = new Room();
var livingroom = new Room();
var bathroom = new Room();

bedroom.myFunc('This is the bedroom.');

edited Apr 19, 2016 at 6:48

answered Apr 19, 2016 at 4:55

timolawl

5,56415 silver badges31 bronze badges

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

22 Comments

user31782 Over a year ago

But then how do I call alert() with bedroom.myFunc? It doesn't pop up the alert message.

timolawl Over a year ago

bedroom.myFunc('this is the bedroom')

Abhishek Over a year ago

Or you can try this 'this.myFunc = function(x){alert(x)};'

Amadan Over a year ago

No, because it is inside a function definition. function Room(...) {... alert("foo"); } will not alert until you call Room() or new Room(); similarly, this.myFunc = function(x) { alert(x) } will not alert until you execute this.myFunc("foo").

Abhishek Over a year ago

No. you can assign foo to that object property. obj.property = foo; Here's a fiddler.

|

buddy123 · Accepted Answer · 2016-04-19 04:56:12Z

0

You are executing the function during assignment, that is why you see three executions with that code. Simply replace your assignment to the function name itself:

function Room(len, bred, myFunc) {
        this.len = 5;
        this.bred = 8;  
        this.myFunc =  alert;
}

    var bedroom = new Room();
    var livingroom = new Room(); 
    var bathroom = new Room();

answered Apr 19, 2016 at 4:56

buddy123

6,40711 gold badges50 silver badges74 bronze badges

Comments

or hor · Accepted Answer · 2016-04-19 04:57:09Z

0

dont use brackets with alert. Brackets cause the alert to be executed. If you omit brackets, then a function alert will be assigned to your myFunc property.

answered Apr 19, 2016 at 4:57

or hor

7233 silver badges11 bronze badges

Collectives™ on Stack Overflow

Why does creating objects with constructor execute object's method in javascript?

3 Answers 3

Edit:

22 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit:

22 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related