Exploring JS inheritance concepts including the use of .call, .create,

I've recently started learning Javascript and I'm a bit perplexed by the concept of Inheritance. The code snippet below is from a phaser tutorial where Bullet seems to inherit from Sprite. Firstly, it employs the call method which, as far as I know, copies properties from one function to another. So, at this stage, Bullet basically assumes all the properties of Sprite. Call usually requires an object along with its parameters, but where do the 0,0 values come into play?

Now, after that initial step, it further goes on to use Object.create to convert the sprite object into the bullet prototype. But wasn't that already achieved through the call method?

Lastly, it sets prototype.constructor = bullet. But why is there a need for this when bullet has already been assigned as Bullet?

If anyone could shed some light on this for me, I would greatly appreciate it. Thank you!

var Bullet = function (game, key) {

    Phaser.Sprite.call(this, game, 0, 0, key);

    this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST;

    this.anchor.set(0.5);

    this.checkWorldBounds = true;
    this.outOfBoundsKill = true;
    this.exists = false;

    this.tracking = false;
    this.scaleSpeed = 0;

};

 Bullet.prototype = Object.create(Phaser.Sprite.prototype);
 Bullet.prototype.constructor = Bullet;

Answer №1

Sorry, I don't have a specific link to share at the moment. However...

Every constructor function has a prototype property that was set when the function was initially created as an object with a constructor property pointing back to the constructor function itself. Both the function's prototype and the prototype's constructor properties are editable.

Objects generated using a constructor function inherit properties from the object referenced in the constructor function's prototype property at the time of object creation. This prototype object can also inherit properties from the prototype property of its own constructor, establishing an inheritance hierarchy.

Object.create is a factory function that creates a new object inheriting from the object passed as the first argument. The returned object inherits its constructor property either directly if it's a local property or indirectly through the object's prototype chain.


  1. When calling Phaser.Sprite on a new Bullet object, only local properties defined by the Phaser.Sprite constructor are added.

  2. Bullet.prototype = Object.create(Phaser.Sprite.prototype);
    produces an object that directly inherits from Phaser.Sprite.prototype. Subsequently, Bullet objects will inherit all Sprite's prototyped values through the inheritance chain of Bullet objects.

  3. Bullet.prototype.constructor = Bullet;
    establishes a local constructor property on Bullet.prototype, which is inherited by Bullet objects. Without this step, they would inherit the value of Sprite for the property via the inheritance chain.

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

Using the Proper 'this' Reference Without Repeating 'this' in Nested Functions

I am facing an issue in my class where I have multiple methods and properties. One of these methods contains a setTimeout() function as follows: function myClass() { this.some_property = "test"; this.PrintOnTimeout = function() { // I thou ...

Tips for saving variable state using closure

I am working on a function that needs to be called multiple times, and this function will add elements to my HTML: class MyClass { addElements(elements) { const parentElement = $("#parent").find("#other-element"); for (let element of elements) ...

Error: Module not found '!raw-loader!@types/lodash/common/array.d.ts' or its type declarations are missing

I encountered a typescript error while building my NEXT JS application. The error message was: Type error: Cannot find module '!raw-loader!@types/lodash/common/array.d.ts' Below is the content of my tsConfig.json file: { "compilerOptions& ...

It seems that you're facing an issue with the react-native-git-upgrade tool. The error message

I encountered issues while attempting to upgrade using react-native-git-upgrade. One of the first problems I faced was similar to what was described in https://github.com/facebook/react-native/issues/11578. Unfortunately, none of the solutions mentioned i ...

Ways to manage V-show in a dynamically changing environment

I am currently in the process of developing an Ecommerce shopping platform. I have been importing data from a JSON file and successfully printing it using a v-for loop. One feature I am implementing is the Show Order Details option, where clicking on it re ...

Easily manipulate textboxes by dynamically adding or deleting them and then sending the data to a

Can you provide a simple example of how to dynamically add and remove textboxes and then display the results? I envision it like this: [Empty Textbox][Add button] When 'Value1' is entered into the textbox and 'add' is clicked, it s ...

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

What is the reasoning behind placing CDN links at the bottom of the index file?

What is the reason for placing CDN links for AngularJS file at the end of the index page? I initially placed it at the top of the file and it worked fine. Is there a significant difference between these two placements? ...

Develop a personalized API using Strapi that involves integrating data from two distinct tables

I am relatively new to Strapi, so please forgive my lack of experience. My goal is to set up a custom route for retrieving complex data using two related tables. I have relationships with the "items" and "comments" tables. My approach involves selecting ...

Developing a simple component

Is there a variance in performance when working with dumb components in React? There are two methods to achieve the same outcome. function Comp(props) { ... } const Comp = props => { ... } ...

Height not being applied to DIV container

I'm facing an issue with my CSS code that is causing images to break the row after reaching the end of the DIV. However, the container behind it is not adjusting its height according to the images. The height should expand along with the images. Here ...

Why won't my code execute in the script using Python's selenium function driver.execute_script()?

In my python script with the selenium library, I am encountering an issue with the driver.execute_script() function. It seems that only certain parts of the script are being executed while others are not. The following code works properly: driver.execute ...

What is the best way to select the element where a user has clicked using JavaScript?

Referencing a previous question on Stack Overflow, the goal is to track user clicks in a Firefox browser using JavaScript. The provided JavaScript code almost achieves this: var DocElements = document.getElementsByTagName('*');for(var i = 0; i & ...

Creating getter and setter functions for an input field model property in Angular

I need help creating getter and setter methods for an input field property. Here is my attempted code: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', st ...

Implement an AJAX function to prompt a save dialog before initiating the download process

I'm currently programming an embedded device in C with a web server. One of the tasks I am working on is downloading files from this device. I need to download several files at once, so I've set up an AJAX request that uses a POST method and send ...

How can I navigate to a different page using Node.js and Express?

I am currently developing a chat application in Node.js with the use of socket.io. Whenever a new user logs into localhost:3000, they are presented with a form where they can input their name and the room they wish to join. How can I efficiently redirect t ...

Having trouble performing an Image (base64) update in Next.js

Hi everyone, I'm facing a challenge with updating the image data in my code. The base64 string data updates correctly and the new image is displayed before submitting the data. However, once I submit the data, the image doesn't update. Below is ...

Connect-Domain fails to detect errors in the scenario described below:

I have chosen to implement the connect-domain module (https://github.com/baryshev/connect-domain) in order to streamline error handling within my Express application. Although it generally functions as expected, there is a peculiar issue that arises when ...

Ensuring the correctness of environment variables in Next.js using Zod

After spending the entire day trying to figure it out, I realize that the solution may be simpler than expected. I am currently using the well-known zod library to validate my environment variables and transform data. However, I keep encountering a persis ...

Make sure to clear the timeout in JavaScript before re-calling the function again

Scenario: Whenever a user clicks on a cell within the "#test" table, the "update_func" function will run and repeat every 10 seconds. If the user clicks on the same cell or another cell, multiple instances of "update_func" start running simultaneously ev ...