Connect the parent object's `this` to the child object's `this` in JavaScript

Exploring the world of object-oriented programming in JavaScript for the first time. It may sound like a simple question, but I really want to grasp this concept fully.


var objA = {
 a : 10,
 b : 20,
 newobjB : {
  c : 100,
  funOfObjB: function(){
   console.log(this.a)
  }
 }
}

I'm looking to access the value of a parent object variable using this particular concept. I've attempted using the bind() method, but it seems to be returning unexpected data in the (this) variable.

Appreciate any assistance on this matter.

javascriptangularjs

Answer №1

You won't be able to access objA through newobjB in that manner.

The relationship between objA and the object referenced by its property newobjB is not one-to-one. In order to reference back to objA, you must pass objA to your object within newobjB, like so:

var objA = {
    a : 10,
    b : 20,
};

objA.newobjB = {
    objA: objA,
    c : 100,
    funOfObjB: function(){
        console.log(this.objA.a)
    }
};

If you need this to point to objA inside funOfObjB, you can utilize call or apply:

objA.newobjB.funOfObjB.call(objA);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Issue 415: Adding and modifying database records through jQuery AJAX in ASP.NET 6.0 MVC Application

Implementing the Add/Edit functionality for categories in my project led me to utilize a modal (pop-up) to transfer data to the backend without refreshing the page. To achieve this seamless interaction, I opted for ajax integration. However, encountering a ...

javascriptjqueryajax

Simple guide on how to use AJAX (without jQuery) and PHP to count the number of records

As a novice programmer, I am attempting to tally the number of records in a table. Despite perusing various code snippets, I am unable to seamlessly integrate them to pass the PHP result to my javascript code. Here is the current state of my code: showsca ...

javascriptphphtmlajax

Updating parts of a list using AJAX

Recently, I've encountered a challenge where I need to enable editing functionality on a table column from a database. The goal is to make the column editable when clicked and update the value when clicked out. To achieve this, I decided to utilize A ...

javascriptphpjquerymysqlajax

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

After upgrading my Angular application from version 8 to 12, I encountered an issue. Previously, when I ran ng serve, the application would start the server without any errors. However, after updating to v12, I started receiving an error when I attempted t ...

javascriptangularangular-cli

Display the current count of selected radio buttons in real-time

I am working with radio buttons that are generated dynamically using a 2D array within a while loop. I want to display the number of radio buttons checked when one is clicked. Here are my radio buttons: $n=0; while($row=mysqli_fetch_row($rs)){?> <f ...

javascriptphpjqueryajax

"Permission denied to access restricted URI" error encountered while attempting to utilize ng-template functionality

I am attempting to implement ng-include for recursive templates in my HTML. After testing it on jsfiddle and confirming that it works, I tried the same locally. However, I encountered the following error: Error: Access to restricted URI denied createHttpB ...

javascriptangularjscors

Execute a task on Mobile Safari (after a delay)

I'm currently experimenting with HTML5 on Mobile Safari for iOS 6 and I'm curious about executing JavaScript code after a certain amount of time has elapsed. One specific task I am interested in is redirecting to a different page after 60 seconds ...

javascripthtmliosmobile-safaridom-events

What is the best way to upgrade to a specific version of a child dependency within a module?

npm version: 7.24.2 Looking for assistance on updating a child dependency. The dependency in question is: vue-tel-input This dependency relies on libphonenumber-js with version ^1.9.6 I am aiming to update libphonenumber-js to version ^1.10.12. I have ...

javascriptvue.jsnpmversionvue-tel-input

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

javascriptcssreactjsmaterial-ui

What is the method for shifting the expansion panel icon position to the left?

I need the expansion arrow in my app to be on the left side of the panel. However, it currently appears on the right side by default. This is what I have tried: <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMore ...

javascriptreactjsmaterial-uiaccordion

Angular UI Accordion with full-size clickable panels available for interaction (?)

I'm facing a simple issue and I can't figure out why I'm not getting the desired behavior. I am currently utilizing the Angular UI Bootstrap accordion, however, in the provided example, the only way to open the accordion is by clicking on th ...

javascriptangularjstwitter-bootstrapangular-ui

Effortlessly communicate events from a nested component to its parent in Vue 2

In my project, I created a base component called BaseInput.vue which accepts attributes and emits events. To easily bind all attributes, I use the v-bind="$attrs" directive. // BaseInput.vue <template> <label> <input v- ...

javascriptvue.js

Creating a delayed queue using RxJS Observables can provide a powerful and

Imagine we have a line of true or false statements (we're not using a complicated data structure because we only want to store the order). Statements can be added to the line at any time and pace. An observer will remove items from this line and make ...

javascriptangularrxjs

Divergence between two distinctive occurrences in Google Analytics

Why are there differences in the number of unique events recorded by Google Analytics for two consecutive events? I have set up onClick tracking for a button. When the button is clicked, an event (Event 1) is sent to Google Analytics and a CSS-selector ap ...

javascriptcookiesgoogle-analyticsgoogle-tag-managertracking

Enhance user experience with Angular Material and TypeScript by implementing an auto-complete feature that allows

Currently facing an issue with my code where creating a new chip triggers the label model to generate a name and ID. The problem arises when trying to select an option from the dropdown menu. Instead of returning the label name, it returns an Object. The ...

javascriptangularjstypescriptangular-material

Encountered a 'Topology is closed' error while using EJS

After creating my profile.ejs page, I encountered an error upon reloading the page. Can someone help me understand what's causing this issue? Below is all the code I've used. My setup includes Node.js and Express as the server technologies. I cam ...

javascriptnode.jsmongodbexpressejs

Allowing several text fields to be paired with multiple checkboxes through a unified jQuery function

I have 4 different checkboxes, each one corresponding to a specific text box. I want to enable the disabled textbox when its corresponding checkbox is checked. Currently, I have written a function for each checkbox in the HTML tag itself using onclick="doc ...

javascriptjqueryhtmlcheckboxdisabled-input

Trigger a keyframe animation upon initial click and then reverse playback on the subsequent click

I'm struggling to create a wave animation that fills the screen up to a certain point and stops on the first click of a navigation menu. I've attempted to have it play in reverse when the navigation menu is clicked again, but it's not workin ...

javascriptjqueryhtmlcss-animations

Obtaining the "match" object within a Custom Filter Selector on jQuery version 1.8

Here's a helpful resource on Creating a Custom Filter Selector with jQuery for your reference. A Quick Overview: If you're unfamiliar with jQuery's Custom Filter Selectors, they allow you to extend jQuery’s selector expressions by addi ...

javascriptjqueryjquery-selectors

Securing Communication with HTTPS in Express JS

After purchasing an AlphaSSL from a hosting provider, I received the following files: domain.csr.crt domain.interCert.crt domain.PKCS7Cert.crt domain.rootCert.crt domain.X509Cert.crt However, in order to enable HTTPS on Node.JS using Express, I am aware ...

javascriptnode.jsexpresshttps