JavaScript - Access Class Instance Property in Prototype Function

Question

I have the following code:

class Pet {
    constructor(name) {
        this.petName = name;
    }
}

Pet.prototype.speak = {
    name: function() {
        console.log(this.petName);
    }
};

// -----------------------------------------------

const myPet = new Pet("Max");
myPet.speak.name();

I expect this code to print Max, but instead it prints undefined.

If I change the console.log to console.log(this); it prints { name: [Function: name] }. Which makes me think that function doesn't have access to the instance properties.

How can I ensure that this function has access to the instance?

1. name refers to the function, it should be petName. 2. this doesn't refer to the object anymore but instead to the object the function is called in (in this case the object containing only the name() method) — Sebastian Speitel
– Sebastian Speitel, Commented Dec 9, 2018 at 19:20

Dacre Denny · Accepted Answer · 2018-12-09 19:32:09Z

3

If you're targetting or have support for ES6 language features, one way to achieve what you want would be via a get method combined with an arrow function.

The get method would be declared get speak() which means it can be called without paranthesis. This method would return an object that contains a name() arrow function. Use of the arrow function here allows you to access the enclosing Pet instance via the this keyword directly:

class Pet {
    constructor(name) {
        this.petName = name;
    }
    
    // Get method allows the speak method to be called without ()
    get speak() {
      return {
        // Arrow function causes this.petName to refer to petName 
        // field of this class instance 
        name: () => {
          console.log(this.petName);
        }
      }
    }
}
 
const myPet = new Pet("Max");
myPet.speak.name();

const yourPet = new Pet("Min");
yourPet.speak.name();

Here is more information on the get method syntax and language feature.

edited Dec 9, 2018 at 19:32

answered Dec 9, 2018 at 19:26

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

5 Comments

Charlie Fish Over a year ago

I think this might work. Going to try it soon. Not quite the way I was thinking of it working. But it should work I think.

Dacre Denny Over a year ago

@CharlieFish sure, let me know if you have any questions or need anything clarified on this

Charlie Fish Over a year ago

Awesome. I think this will work. One last question tho. How does this differ from using a prototype? I know prototypes tend to be better in terms of memory usage and performance a bit. Does this behave similarly to that, or does it have the same problems as the non-prototype based solutions?

Dacre Denny Over a year ago

@CharlieFish great to hear this has helped - please consider accepting the answer if it meets your requirements. Sorry I can't give your answer justice in this small comment area however you will find this article useful for clarification medium.com/javascript-scene/…

Paul Over a year ago

@Charlie class is basically just syntactic sugar for prototypes. With this answer, the speak getter is defined on Pet.prototype, but speak.name is recreated each time that getter is called.

Paul · Accepted Answer · 2018-12-09 21:47:43Z

1

When you call a function like this: myPet.speak.name(); then inside that function this refers to myPet.speak. In your case that is an object with one property (name) whose value is a function.

If you make speak itself be a function instead of an object, and use the property petName instead of name, it will work:

class Pet {
    constructor(name) {
        this.petName = name;
    }
}

Pet.prototype.speak = function() {
    // myPet has a `petName` property, but no `name` property
    console.log(this.petName);
};

const myPet = new Pet("Max");
myPet.speak(); // this will be `myPet` inside the function

edited Dec 9, 2018 at 21:47

answered Dec 9, 2018 at 19:21

Paul

142k28 gold badges285 silver badges272 bronze badges

3 Comments

Charlie Fish Over a year ago

The goal is to have myPet.speak be an object, and name to be a method of that, that logs the name. This is to make the API as easy as possible.

Bergi Over a year ago

@CharlieFish That's not easy. Better just call the method speakName.

Azhar Uddin Sheikh Over a year ago

@Pual but if I use arrow function like this Pet.prototype.speak = () => this.petName this will not work

Collectives™ on Stack Overflow

JavaScript - Access Class Instance Property in Prototype Function

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related