Is it possible to create a "private" variable by utilizing prototype in JavaScript?

Question

Is it possible to create a "private" variable by utilizing prototype in JavaScript?

In my JavaScript code, I am trying to have a unique private variable for each "instance," but it seems that both instances end up using the same private variable.

func = function(myName)
{
    this.name = myName
    secret = myName

    func.prototype.tellSecret = function()
    {   return "the secret of "+this.name+" is "+secret
    }
}

f1 = new func("f_One")
f3 = new func("f_3")

console.log(f3.tellSecret()) // "the secret of f_3 is f_3" OK
console.log(f1.tellSecret()) // "the secret of f_One is f_3" (not OK for me)

I came across a possible solution, but

this would mean duplicating the function on every instance, and the function lives on the instance, not on the prototype.

Another developer mentioned a similar solution in this post

That's still not quite traditional class-based JavaScript, which would define the methods only once on Account.prototype.

So, I'm wondering if there is a way to achieve:

have every instance with unique values for secret
ensure that secret is only accessible to methods defined in the constructor, and
avoid duplicating functions for each instance

Is there a solution for this?

javascript closures prototype

Answer 1

Answer №1

The issue lies in the fact that each time the constructor is called, you are replacing your prototype function.

When using old-style closure-based privacy, accessing "private" members from prototype methods is not possible because only functions defined in the constructor closing over them can utilize them. This results in recreating the functions for each instance, which may not be as detrimental as it sounds but is not an ideal approach.

function Example(name) {
    this.name = name;
    var secret = name; // Using `var` here assuming ES5-level code

    // Unable to be a prototype function
    this.tellSecret = function() {
        return "the secret of " + this.name + " is " + secret;
    };
}

You have two alternatives:

1) Utilize a transpiler like Babel, class syntax, and private fields (anticipated to be available in ES2021, currently used by transpiling):

class Example {
    #secret;

    constructor(name) {
        this.name = name;
        this.#secret = name;
    }

    tellSecret() {
        return "the secret of " + this.name + " is " + this.#secret;
    }
}

const f1 = new Example("f_One");
const f3 = new Example("f_3");

console.log(f3.tellSecret()) // "the secret of f_3 is f_3"
console.log(f1.tellSecret()) // "the secret of f_One is f_One"

2) Employ a WeakMap (ES2015+) containing the confidential information:

const secrets = new WeakMap();
class Example {
    constructor(name) {
        this.name = name;
        secrets.set(this, name);
    }

    tellSecret() {
        return "the secret of " + this.name + " is " + secrets.get(this);
    }
}

const f1 = new Example("f_One");
const f3 = new Example("f_3");

console.log(f3.tellSecret()) // "the secret of f_3 is f_3"
console.log(f1.tellSecret()) // "the secret of f_One is f_One"

secrets should be placed where only Example can access it.

You can also use a WeakMap without employing class syntax, but when constructing functions with associated prototypes, using class is more straightforward than defining function Example and assigning properties on Example.prototype.

Answer 2

The issue lies in the fact that each time the constructor is called, you are replacing your prototype function.

When using old-style closure-based privacy, accessing "private" members from prototype methods is not possible because only functions defined in the constructor closing over them can utilize them. This results in recreating the functions for each instance, which may not be as detrimental as it sounds but is not an ideal approach.

function Example(name) {
    this.name = name;
    var secret = name; // Using `var` here assuming ES5-level code

    // Unable to be a prototype function
    this.tellSecret = function() {
        return "the secret of " + this.name + " is " + secret;
    };
}

You have two alternatives:

1) Utilize a transpiler like Babel, class syntax, and private fields (anticipated to be available in ES2021, currently used by transpiling):

class Example {
    #secret;

    constructor(name) {
        this.name = name;
        this.#secret = name;
    }

    tellSecret() {
        return "the secret of " + this.name + " is " + this.#secret;
    }
}

const f1 = new Example("f_One");
const f3 = new Example("f_3");

console.log(f3.tellSecret()) // "the secret of f_3 is f_3"
console.log(f1.tellSecret()) // "the secret of f_One is f_One"

2) Employ a WeakMap (ES2015+) containing the confidential information:

const secrets = new WeakMap();
class Example {
    constructor(name) {
        this.name = name;
        secrets.set(this, name);
    }

    tellSecret() {
        return "the secret of " + this.name + " is " + secrets.get(this);
    }
}

const f1 = new Example("f_One");
const f3 = new Example("f_3");

console.log(f3.tellSecret()) // "the secret of f_3 is f_3"
console.log(f1.tellSecret()) // "the secret of f_One is f_One"

secrets should be placed where only Example can access it.

You can also use a WeakMap without employing class syntax, but when constructing functions with associated prototypes, using class is more straightforward than defining function Example and assigning properties on Example.prototype.

Is it possible to create a "private" variable by utilizing prototype in JavaScript?

Answer №1

Similar questions

Completing the regex properly

Learning how to integrate Next.js, React.js, and Redux into an HTML page for an enhanced user

The touchstart event handler triggers but the event returns as undefined

`Adjusting function calls based on the specific situation`

Interactive Content Swapping: How to Use Javascript for Dynamic Link Updates

Automatically updating div content using a static HTML page

How can you transfer array elements to a new array using JavaScript?

Choose the tag and class then retrieve the custom attribute

Verify if there are duplicate values present in a table

Sending an object to a Vue 2 component and confirming its validity

Failure to display alert message upon completion of AJAX request

I am consistently encountering the error message: "Error: Unable to locate module './framer'"

Receiving the result as well as encountering undefined initially during AJAX request

jsonAn error occurred while attempting to access the Spotify API, which resulted

What is the best way to create a form that includes both dynamic objects and dynamic arrays using a JSON schema?

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

Ways to display a default view in React

Adding Labels to Doughnut Charts in React using Chart.js 2.0

Trouble with tab switching across multiple cards

Trigger a refresh of the Angular app by clicking a button