Access a member variable from a private method in JavaScript

Question

lick() is a private method of Cat. Unfortunately, Cat's this.paw is not accessible in lick(). Is there a simple way to create a private method that has access to the member variables of its containing class?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="catStatus">???</p>
<script>
function Cat() {

    this.paw;

    var lick = function() {
        alert(this.paw);
        if(this.paw == "sticky") {
            alert("meow");
            document.getElementById("catStatus").innerHTML = "*Slurp*";
        }
    };

    this.beCat = function() {
        this.paw = "sticky";
        lick();
    }
}
var kitty = new Cat();
kitty.beCat();
</script>
</body>
</html>

Result

SLaks · Accepted Answer · 2012-11-18 13:35:12Z

2

The value of this depends on how you call the method.
Since you're not calling the method on the object instance, this becomes the global object.

Instead, you need to save this in a variable:

function Cat() {
    this.paw = ...;

    var me = this;

    var lick = function() {
        alert(me.paw);
        if(me.paw == "sticky") {
            alert("meow");
            document.getElementById("catStatus").innerHTML = "*Slurp*";
        }
    };

    this.beCat = function() {
        this.paw = "sticky";
        lick();
    }
}

answered Nov 18, 2012 at 13:35

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

3 Comments

andersand Over a year ago

Actually, this does not refer to the global object within lick(), it refers to the lick function itself.

David Winiecki Over a year ago

Honest question: why did you add ellipsis to the declaration of this.paw? Declaring this.paw without a value prevents an exception when referencing the variable. this.paw = ...; produces a syntax error. Maybe I should use this.paw = undefined; instead.

David Winiecki Over a year ago

@andersand It would make since to me that this would refer to lick inside lick, but if you alert(this.toString()) inside lick, it actually says "[object Window]", which is the same thing it says in a <script> tag outside any function so I think that's the global object. Inside beCat on the other hand, it says "[object Object]". I think this is because lick has not been instantiated with new. (I only tried this in Firefox.)

Hemlock · Accepted Answer · 2012-11-18 13:38:30Z

1

There are a couple ways to solve this. The problem is that the context inside of lick is not the instance of cat. You can either:

Use the call method to set the context

this.beCat = function() {
    this.paw = "sticky";
    lick.call(this);
};

or use closure

var instance = this;
var lick = function() {
    alert(instance.paw);
    if(instance.paw == "sticky") {
        alert("meow");
        document.getElementById("catStatus").innerHTML = "*Slurp*";
    }
};

answered Nov 18, 2012 at 13:38

Hemlock

6,2282 gold badges29 silver badges38 bronze badges

2 Comments

David Winiecki Over a year ago

Is that really a closure? It doesn't seem to me to resemble this description of a closure. But I'm really not sure.

Hemlock Over a year ago

Sure it is, it's a closure over the variable instance inside the function lick.

The Heatherleaf · Accepted Answer · 2012-11-18 13:42:17Z

1

The context of this depends upon who called the function. In this case it is beCat. You can however explicitly specify the this scope by using call.

In your case:

    this.beCat = function () {
        this.paw = "sticky";
        lick.call(this);
    }

Or you can store the this in a variable.

You can read more about the this scope/how it works here.

answered Nov 18, 2012 at 13:42

The Heatherleaf

1281 gold badge2 silver badges11 bronze badges

Collectives™ on Stack Overflow

Access a member variable from a private method in JavaScript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related