[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 55
  • Last Modified:

Question about JavaScript scoping

My question is in the comments. Thanks.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn").click(function() {
                    var t = new TestConstructor();
                    t.sayHello();
                });
                
                function TestConstructor() {
                    this.sayHello = function() {
                        /*
                         * THIS FUNCTION IS NOT ACCESSIBLE. HOW TO ACCESS??
                         */
                        addAgain("Hello");
                    }; // END sayHello()
                    
                    /*
                     * THIS FUNCTIONS IS NOT ACCESSIBLE SOMEHOW. HOW CAN I
                     * ACCESS THIS FUNCTION INTERNALLY IN THIS CONSTRUCTOR
                     * FUNCTION? IT'S GIVING A MESSAGE SAYING addAgain IS
                     * NOT DEFINED. (click the Test button to see the error)
                     */
                    this.addAgain = function(str) {
                        console.log(str + " again!");
                    } // END addAgain
                    
                    /*
                     * I KNOW THIS FUNCTION WORKS, BUT IT'S NOT MY QUESTION.
                     */
                    function addAgain2(str) {
                        console.log(str + " again!");
                    } // END addAgain2()
                } // END TestConstructor()

            });
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="Test" />
    </body>
</html>

Open in new window

0
elepil
Asked:
elepil
1 Solution
 
käµfm³d 👽Commented:
THIS FUNCTION IS NOT ACCESSIBLE. HOW TO ACCESS??
Create an "instance":

var testInstance = new TestConstructor();

testInstance.sayHello();

Open in new window


HOW CAN I ACCESS THIS FUNCTION INTERNALLY IN THIS CONSTRUCTOR FUNCTION?
You would ordinarily use the this qualifier, but since you are within a nested function, this will point to that particular function. You need to introduce a closure around the this that represents your constructor. The typical pattern is to introduce a variable named "self":

                function TestConstructor() {
                    var self = this;
                                        
                    self.sayHello = function() {

                        self.addAgain("Hello");

                    }; // END sayHello()
                    
                    self.addAgain = function(str) {

                        console.log(str + " again!");

                    } // END addAgain

                    ...
                    
                } // END TestConstructor()

Open in new window

0
 
elepilAuthor Commented:
Excellent answer, kaufmed, thanks! (And thanks for that link on closure, it is one of the clearest articles on the subject I've ever read!)
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now