Confusion about object oriented javascript

Question

I'm practicing object oriented syntax in javascript and am having some problems. This is my code:

<html>
<head>
     <script type="text/javascript">
          function Name(first,mid,last) {
               this.first = first;
               this.middle = mid;
               this.last = last;
          }
          Name.prototype.fullname = function () {
               return this.first + " " + this.middle + " " + this.last;
          }
          Name.prototype.fullnamereversed = function() {
               return this.last + " " + this.middle + " " + this.first;
          }
          var s = new Name("James","Harlow","Smith")
</script>
</head>
<body>
     <script type="text/javascript">
          document.body.innerHTML = s.fullname;
          document.body.innerHTML = s.fullnamereversed;
     </script>
</body>
</html>

When I load the page, the innerHTML of the body is the exact text of Name.protoype ("function ()... this.first + this.middle + this.last..."). What have I done wrong here?

This question is similar to: Javascript function call with/without parentheses. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Oct 17 at 7:00

Ruy Diaz · Accepted Answer · 2011-08-02 18:07:50Z

4

You need to call the functions with the () operator:

document.body.innerHtml = s.fullname();

answered Aug 2, 2011 at 18:07

Ruy Diaz

3,12227 silver badges38 bronze badges

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

1 Comment

dopatraman Over a year ago

Silly mistake on my part. Thank you.

Daff · Accepted Answer · 2011-08-02 18:07:19Z

1

You are assigning a function to the prototype, therefore you need to call it as such:

<script type="text/javascript">
document.body.innerHTML = s.fullname() + ' ' + s.fullnamereversed();
</script>

answered Aug 2, 2011 at 18:07

Daff

44.4k9 gold badges108 silver badges122 bronze badges

Comments

wsanville · Accepted Answer · 2011-08-02 18:07:31Z

1

You need to invoke your function: document.body.innerHTML = s.fullname();

Example here.

answered Aug 2, 2011 at 18:07

wsanville

37.6k8 gold badges78 silver badges102 bronze badges

Comments

Paul D. Waite · Accepted Answer · 2011-08-02 18:09:23Z

1

document.body.innerHTML = s.fullname; sets the innerHTML to the function s.fullname.

If you want to set the innerHTML to what the function returns, then you need to actually call the function:

document.body.innerHTML = s.fullname();

answered Aug 2, 2011 at 18:09

Paul D. Waite

99.5k57 gold badges204 silver badges275 bronze badges

Collectives™ on Stack Overflow

Confusion about object oriented javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related