TransWikia.com

JavaScript Inner Anonymous Function Cannot Access Member?

Stack Overflow Asked by Phil on August 2, 2020

I’m trying to learn how to use anonymous function in JavaScript. So I create anonymous function then I add the inner function, tigerInner() and in the function, I try to access the members in outer scope but I got error for undefined.

var tiger = function(name, info) {    
    var name = name;//put this as private member
    this.behave = info;

    console.log("tiger: " + name + " " + behave);

    this.tigerInner = function(){
        console.log('name: ' + name);    
        console.log("tigerInner, behave: " + this.behave);//undefined error "this.behave"
    }
}

var test = tiger("tiger", "eating");
test.tigerInner();

2 Answers

Your main issues are:

  1. You assign info to this.behave but then you use behave instead of either info or this.behave. Change behave to this.behave in your console.log line.

  2. You wrote code that works like a constructor (assuming a newly constructed object as this and not returning anything) but you are not calling it as a constructor. To do that, you need to use the new keyword: var test = new tiger("tiger", "eating").


Additionally, your line var name = name doesn't do what you think it does - it does nothing because name is already working like a local variable, and you just assign it to itself. So you can remove that line.


Here would be my proposal how the fixed code could look like:

var tiger = function(name, info) {    
    this.behave = info;

    console.log("tiger: " + name + " " + this.behave);

    this.tigerInner = function(){
        console.log('name: ' + name);    
        console.log("tigerInner, behave: " + this.behave);
    }
}

var test = new tiger("tiger", "eating");
test.tigerInner();

An alternative without new would require using and returning a new object that you create yourself - just returning this as has been proposed in other answers will seem to work but actually put your behave and tigerInner properties into the global object and return the global object itself at the end (and will crash in strict mode). The new-less solution would look like this:

var tiger = function(name, info) {
    var obj = {};
    obj.behave = info;

    console.log("tiger: " + name + " " + obj.behave);

    obj.tigerInner = function(){
        console.log('name: ' + name);    
        console.log("tigerInner, behave: " + obj.behave);
    };
    return obj;
}

var test = tiger("tiger", "eating");
test.tigerInner();

Correct answer by CherryDT on August 2, 2020

You are not getting that error, but instead you are getting one that is telling you that you are calling tigerInner on a undefined object, since tiger is not returning anything... instead you should return this:

var tiger = function(name, info) {    
    var name = name;//put this as private member
    this.behave = info;

    console.log("tiger: " + name + " " + behave);

    this.tigerInner = function(){
        console.log('name: ' + name);    
        console.log("tigerInner, behave: " + this.behave);//undefined error "this.behave"
    }
    return this;
}

var test = tiger("tiger", "eating");
test.tigerInner();

Answered by Berto99 on August 2, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP