Steps for accessing the "this" keyword within the parent function

Question

Steps for accessing the "this" keyword within the parent function

Struggling with referencing `this` within a parent function while building a basic tab system using AngularJS. It seems like I may not have a solid grasp on the fundamentals, so any guidance would be appreciated:

JavaScript:

$scope.tabs = {
    _this: this, // not functioning as expected
    open: function(elem) {
        $scope.tabsOpen = true; 
        if(elem) 
            $scope[elem] = true;
    },
    close: function() {
        $scope.tabsOpen = false;    
    },
    about: {
        open: function() {
            $scope.aboutOpen = true;    

            _this.notification.close(); // not working
            $scope.tabs.notification.close();  // works

        },
        close: function() {
            $scope.aboutOpen = false;   
        }           
    },
    notification: {
        open: function() {/*etc*/},
        close: function() {/*etc*/}
    },
    message: {
        open: function() {/*etc*/},
        close: function() {/*etc*/}
    },
}

javascript angularjs

Answer 1

Answer №1

Have you considered this approach?

$scope.tabs = getTab();

function getTab(){
    var tab = {
        open: function(elem) {
            $scope.tabsOpen = true; 
            if(elem) 
                $scope[elem] = true;
        },
        close: function() {
            $scope.tabsOpen = false;    
        },
        about: {
            open: function() {
                $scope.aboutOpen = true;    
                tab.notification.close(); // This should do the trick
             },
            close: function() {
                $scope.aboutOpen = false;   
            }           
        },
        notification: {
            open: function() {/*etc*/},
            close: function() {/*etc*/}
        },
        message: {
            open: function() {/*etc*/},
            close: function() {/*etc*/}
        },
    }

    return tab ;
}

By implementing it this way, you remove the dependency on the context of this, which is determined by the execution context, not where it is defined. Here, you are simply using a local object named tab created within the local scope when invoking the function getTab. Instead of using _this.notification.close();, you can use tab.notification.close();, where tab represents the desired context. View a simple demonstration.

Answer 2

Have you considered this approach?

$scope.tabs = getTab();

function getTab(){
    var tab = {
        open: function(elem) {
            $scope.tabsOpen = true; 
            if(elem) 
                $scope[elem] = true;
        },
        close: function() {
            $scope.tabsOpen = false;    
        },
        about: {
            open: function() {
                $scope.aboutOpen = true;    
                tab.notification.close(); // This should do the trick
             },
            close: function() {
                $scope.aboutOpen = false;   
            }           
        },
        notification: {
            open: function() {/*etc*/},
            close: function() {/*etc*/}
        },
        message: {
            open: function() {/*etc*/},
            close: function() {/*etc*/}
        },
    }

    return tab ;
}

By implementing it this way, you remove the dependency on the context of this, which is determined by the execution context, not where it is defined. Here, you are simply using a local object named tab created within the local scope when invoking the function getTab. Instead of using _this.notification.close();, you can use tab.notification.close();, where tab represents the desired context. View a simple demonstration.

Steps for accessing the "this" keyword within the parent function

Answer №1

Similar questions

What is the best way to incorporate parallax scrolling in the center of a webpage?

Exploring the Integration of jQuery AJAX in a Contact Form

VueJS allows for seamless image uploading using either a gallery of images or input files

Identify input elements that specifically contain an onclick event

Utilize PHP to transform JSON data into JavaScript

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

Angularjs: The Art of Loading Modules

Why am I unable to choose an element by its Id?

Updating the style of different input elements using Angular's dynamic CSS properties

Is there a way to display customized values on a particular column in a Vuetify table?

Deciphering the Results of AngularJS

Unveil concealed information within a freshly enlarged container

Is there a way for me to access the current templating in AngularJS?

Enhance the form values using HTML and Javascript before submitting them via POST

Exploring object properties within arrays and nested objects using ReactJS

React Higher Order Component (HOC) encountered an ESLint issue: spreading props is not

Generating a unique user ID similar to Zerodha's user ID using Node.js/JavaScript

Adjusting the styling of a webpage in real-time

Retrieving data from an anonymous function in AngularJS and outputting it as JSON or another value

Accessing API using Next.js 14