Utilizing JavaScript to implement a single method across multiple objects

Question

Utilizing JavaScript to implement a single method across multiple objects

Recently, I encountered a problem while trying to use the prototype method to apply the same function or variable to multiple objects. Despite creating numerous objects in the following manner:

var item = {
  a: {
    aa: "lalala",
    ab: 1,
    something: 3
  },
  b: {
    ba: "jfjb",
    bb: 2,
    something: 4
  }
}

When attempting to implement the prototype method like so:

item.prototype.bob = 2;

An error message stating

"Cannot set property 'bob' of undefined"

was displayed. The same issue arose when trying to create a method:

item.prototype.bob = function() {
   100 - this.something;
   this.something++;
}

I am at a loss as to what I might be doing incorrectly. Is there an alternative method that can achieve the desired outcome across multiple objects?

javascript object prototype undefined

Answer 1

Answer №1

You may be caught up in the confusion of classes and object instances. What you actually have is an anonymous object, not a class instance. Remember, item represents the instance whereas the class itself is denoted by Item.

In the code snippet below, notice the declaration of a class (Item with a capital 'I'), creation of an instance (item), and modification of the prototype belonging to the class. This demonstrates how setting a property on the prototype allows you to access it through the instance.

var Item = function() {
  a = {
    aa: "lalala",
    ab: 1,
    something: 3
  };
  b = {
    ba: "jfjb",
    bb: 2,
    something: 4
  };
}

var item = new Item();

Item.prototype.bob = 'x';

alert(item.bob);

Answer 2

You may be caught up in the confusion of classes and object instances. What you actually have is an anonymous object, not a class instance. Remember, item represents the instance whereas the class itself is denoted by Item.

In the code snippet below, notice the declaration of a class (Item with a capital 'I'), creation of an instance (item), and modification of the prototype belonging to the class. This demonstrates how setting a property on the prototype allows you to access it through the instance.

var Item = function() {
  a = {
    aa: "lalala",
    ab: 1,
    something: 3
  };
  b = {
    ba: "jfjb",
    bb: 2,
    something: 4
  };
}

var item = new Item();

Item.prototype.bob = 'x';

alert(item.bob);

Answer 3

Answer №2

The traditional approach is:

function Individual(first, last) {
    this.first = first;
    this.last = last;
}

Individual.prototype.sayHello = function() {
    console.log(this.first + " greets you");
}

var john = new Individual("John", "Doe");

john.sayHello();

It is important to note that the prototype property belongs to the constructor (the function object we use with new to create the instance), not the individual instance itself.

In ECMAScript 6, you can express this more concisely as:

class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    sayHello() {
        console.log(this.first + " greets you");
    }
}

new Person("John", "Doe").sayHello();

Answer 4

The traditional approach is:

function Individual(first, last) {
    this.first = first;
    this.last = last;
}

Individual.prototype.sayHello = function() {
    console.log(this.first + " greets you");
}

var john = new Individual("John", "Doe");

john.sayHello();

It is important to note that the prototype property belongs to the constructor (the function object we use with new to create the instance), not the individual instance itself.

In ECMAScript 6, you can express this more concisely as:

class Person {
    constructor(first, last) {
        this.first = first;
        this.last = last;
    }

    sayHello() {
        console.log(this.first + " greets you");
    }
}

new Person("John", "Doe").sayHello();

Answer 5

Answer №3

When utilizing the prototype property, it should be called on the class name as opposed to the object name. For instance, if 'item' is an object of class 'MyClass', the correct syntax would be:

MyClass.prototype.bob = 2;

For more information, feel free to check out the following links:

Answer 6

When utilizing the prototype property, it should be called on the class name as opposed to the object name. For instance, if 'item' is an object of class 'MyClass', the correct syntax would be:

MyClass.prototype.bob = 2;

For more information, feel free to check out the following links:

Answer 7

Answer №4

Your item is considered an independent object without a constructor, which means you are unable to define or set it on the prototype. As a result, your code will throw an error.

To resolve this issue, you can restructure your code as shown below:

function item(x, y){
   this.x = x;
   this.y = y;
}
function example(aa, bb, something){
   this.aa = aa;
   this.bb = bb;
   this.something = something
}
item.prototype.value = 2;
item.prototype.method2 = function() {
   100 - this.something;
   this.something++;
}

I hope this explanation clarifies the situation for you.

Answer 8

Your item is considered an independent object without a constructor, which means you are unable to define or set it on the prototype. As a result, your code will throw an error.

To resolve this issue, you can restructure your code as shown below:

function item(x, y){
   this.x = x;
   this.y = y;
}
function example(aa, bb, something){
   this.aa = aa;
   this.bb = bb;
   this.something = something
}
item.prototype.value = 2;
item.prototype.method2 = function() {
   100 - this.something;
   this.something++;
}

I hope this explanation clarifies the situation for you.

Utilizing JavaScript to implement a single method across multiple objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

Struggling with implementing Mobile Navigation menu

What is the best way to make a container 100% tall and display a navigation bar?

The parameter 'string | JwtPayload' cannot be assigned to the parameter 'string'

Automatically bundle and release an NPM package using the libnpm library

Set a variable in Node.js to capture the return value of res.json

The cookies() function in NextJS triggers a page refresh, while trpc consistently fetches the entire route

challenges surrounding the use of getElementByTagName

Nesting Multiple Click Directives in AngularJS

$injector.modulerr problem

preserve functionality when switching between pages

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

"Implementing Nested Actions in Vuex: A Guide on Calling Actions within Actions

"Apply a class to a span element using the onClick event handler in JavaScript

Creating dynamic and fluid motion with Bezier curves on canvas

Scrolling back to the top of the page using Jquery instead of a specific div

Problem with selecting odd and even div elements

Refreshing a div using ajax technology

What is the best way to incorporate several functions within a resize function?