Working with javascript prototype inheritance

Question

Why does this work....

function Person(name) {
   this.name = name;
  }


Person.prototype.speak =  function() {
   alert(this.name);
}


var person = new Person("fred");

person.speak();

But not this..

function Person(name) {
   this.name = name;
        speak =  function() {
   alert(this.name);
}


var person = new Person("fred");

person.speak();

I am not understanding how inheritance works, or the javascript "prototype-chain".

Thanks.

If you indent the code properly, it should be easier to spot the mistake — Ruan Mendes
– Ruan Mendes, Commented Jun 18, 2012 at 16:48
'I am not understanding how inheritance works, or the javascript "prototype-chain".' That's a very good position you're in. You just have to start some reading. This question has been answered countless times on this site alone. — Tomalak
– Tomalak, Commented Jun 18, 2012 at 16:48

Domenic · Accepted Answer · 2012-06-18 16:47:57Z

4

function Person(name) {
   this.name = name;
        speak =  function() {
   alert(this.name);
}

should be

function Person(name) {
   this.name = name;
   this.speak = function () {
      alert(this.name);
   };
}

answered Jun 18, 2012 at 16:47

Domenic

113k42 gold badges227 silver badges275 bronze badges

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

1 Comment

Ruan Mendes Over a year ago

Ahh, OP was creating a global speak function instead of attaching it to this

Jordan Running · Accepted Answer · 2012-06-18 16:57:04Z

0

Actually it's variable scope that you're not understanding.

function Person(name) {
  this.name = name;

  speak = function() {
    alert(this.name);
  }
}

By omitting var before speak = ... here you've created a global variable named speak, not a variable within Person's scope. In a browser global variables are attached to the global object, window, so your code is equivalent to:

function Person( name ) {
  this.name = name;

  window.speak = function() { alert( this.name ); }

}

Douglas Crockford has written some related material about variable scope in prototypal inheritance that you should find enlightening.

edited Jun 18, 2012 at 16:57

answered Jun 18, 2012 at 16:50

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

3 Comments

Esailija Over a year ago

That's not really equivalent, the function will be assigned to window.speak every time Person is invoked. And it will be different function object every time as well.

Jordan Running Over a year ago

Perhaps I should have said "roughly equivalent." It was meant to be illustrative. Nevertheless I have changed the code.

MrCode Over a year ago

@Jordan you're right about him creating a global but the problem here is failing to assign speak() to this. Using var would make it a private method of Person and so he would not be able to access it like he wants to with person.speak();.

Collectives™ on Stack Overflow

Working with javascript prototype inheritance

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related