When we modify the prototype of the parent object, where does the __proto__ point to?

Typically, when a new object is created using the "new" keyword, the __proto__ property of the newly created object points to the prototype property of the parent class. This can be verified with the following code:

function myfunc(){};
myfunc.prototype.name="myfunction";
var child= new myfunc();
child.__proto__=== myfunc.prototype  ---> true

However, let's explore what happens when we modify the prototype of the parent function:

myfunc.prototype={};
child.__proto__=== myfunc.prototype  ---> false
child.name   ------> "myfunction"

If child.__proto__ doesn't point to myfunc.prototype, then where does it point in the object chain? Even more intriguing, how does it still have access to the "name" property of the myfunc class?

Answer №1

When utilizing the new operator to instantiate an Object, a fresh JavaScript Object is generated with its internal property of __proto__ set to the function's prototype.

At this stage,

console.log(myfunc.prototype);

is referencing the object

{ name: 'myfunction' }

So, when you perform

var child = new myfunc();

internally

child.__proto__ = myfunc.prototype;

takes place. It's crucial to grasp that in JavaScript, the usage of the assignment operator implies that the left-hand side name now refers to the outcome of the expression on the right-hand side. Consequently, in this instance, child.__proto__ is simply another identifier for the object designated by the name myfunc.prototype. Subsequently, both

child.__proto__ === myfunc.prototype
are pointing to { name: 'myfunction' }. This explains why
child.__proto__ === myfunc.prototype
yields true.

Now, upon executing

myfunc.prototype = {};

You are instructing myfunc.prototype to reference the new object {}, yet child.__proto__ continues to point to the previous object { name: 'myfunction' }. Hence,

child.__proto__ === myfunc.prototype
returns false, and child.name retains the value of myfunction.

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

Endless repetition occurs when invoking a function within a v-for loop

I've encountered an issue while trying to populate an array using a method, leading to redundant data and the following warning message: You may have an infinite update loop in a component render function. Below is the code snippet in question: ...

Using Vue.js to conditionally render content based on changes in a variable

I am facing a challenge in rendering a new element once the boolean variable waiting changes to true. The issue arises when transitioning from one v-if statement to another, as the boolean does not update until the first statement is completed. How can I s ...

instructions on modifying a singular row within a v-data-table (excluding design changes, focusing on the data itself)

For this specific scenario involving v-data-table, I encountered a challenge in finding an answer. While I am aware that templates and slots can be utilized to modify columns, my query pertains to reflecting values in only one row. Essentially, I aim to ad ...

Difficulty accessing context.params query in Next.js Dynamic Path

I've almost completed setting up a dynamic page in Next.js using getStaticPaths(), but I'm running into an issue with the getStaticProps() function not referencing the URL query correctly to load the relevant information. Here is my code: //Get ...

Exploring the power of Vue.js by utilizing nested components within single file components

I have been attempting to implement nested single file components, but it's not working as expected. Below is a snippet of my main.js file : import Vue from 'vue' import BootstrapVue from "bootstrap-vue" import App from './App.vue&apos ...

Creating a personalized .hasError condition in Angular 4

I am currently in the process of modifying an html form that previously had mandatory fields to now have optional fields. Previously, the validation for these fields used .hasError('required') which would disable the submit button by triggering a ...

Incorporating URL addresses and pagination features using React.Js and Material-UI components

I have a functional component-page on my website, where I display a table that fetches data from an API. To improve user experience, I implemented pagination using the Material-UI library. While the pagination functionality works fine in updating the table ...

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

By utilizing Express, Node, and Angular, I incorporated an HTML button on my website that triggers a get request to Express. This request then executes a function that logs a predefined message to the console. Initially, when I click the button for the fir ...

Encountering an Issue with NextJS on GAE: EROFS Error indicating a read-only file system

Trying to deploy a customized Next.js application into Google App Engine has hit a snag. The project runs smoothly locally and on Google Cloud Platform CLI, but upon successful deployment using gcloud app deploy, an error arises when opening the app. 2020 ...

tips on retrieving the Vue element using a method in Vue.js

How can I dynamically add an element to the array by clicking a button in vue.js? Is it possible to call the method aggiungiViaggio on click, and how do I determine which viaggio I am currently in? Below is an example of the HTML: <div class=" ...

Unable to retrieve scope data in controller function

Having trouble accessing the scope attribute fullName from the controller method login. What could be causing this issue? App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, Log ...

Creating Vue components and including Javascript code within them

Attempting to develop a component using Vue for my JavaScript code, but encountering issues. My primary aim is to build a component with either Vue or Vue3 <head> <title></title> <script src="https://cdn.jsdelivr ...

Harness the power of $compile within the Angular link function while also retrieving and utilizing the arguments of the

I am currently developing a custom directive in angular.js 1.x Here is how I call the directive: <mydirective dirarg={{value-1}}></mydirective> My goal is to define the directive by including code to alter the DOM within the directive's ...

Problem with Java class in GWT JsInterop

Having some trouble with JsInterop while wrapping up a piece of JavaScript code. The JavaScript code looks like this: com = { gwidgets: {} }; com.gwidgets.Spring = function () { this.name = "hello"; }; com.gwidgets.Spring.prototype.getName = ...

Store the results in the database following the execution of a protractor test

I am completely new to angular protractor testing. I have created some test cases using the protractor framework with jasmine runner BDD style. Within a single test class, I have 10 to 12 specs, each with an expectation. Currently, I am running these tests ...

Drawing on Canvas with Html5, shifting canvas results in significant issues

I've been working on developing an HTML5 drawing app, and while I have all the functionality sorted out, I'm facing challenges during the design phase. My main issue is centered around trying to make everything look visually appealing. Specifical ...

generate a dynamic dropdown menu using ajax to handle a vast amount of information

I have been tackling a challenge involving codeigniter and ajax. Specifically, I am working with two select boxes - one for countries and another for states. The goal is to dynamically populate the states select box based on the selected country using an a ...

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

Customizing data attributes for child components in Vue 2

In my Vue project, I have created a multi-page questionnaire using the v-show directive within a container called RiskAssessmentTest.vue. To handle loading questionnaire drafts, I have a component named RiskAssessmentDrafts.vue, which has the following st ...

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

I have two tables already set up (User and PaymentPlan), but they were not initially linked together. PaymentPlan.ts import { DataTypes, Model } from "sequelize"; import { sequelize } from "./DBConnections/SequelizeNewConnection"; exp ...