Crockford's system for safeguarded entities

Question

Crockford's system for safeguarded entities

Despite the abundance of questions and resources related to "Javascript: The Good Parts," I am struggling to comprehend a specific sentence in the book. On pages 41-42, the author defines the serial_maker function as follows:

var serial_maker = function (  ) {

// This function produces an object that generates unique strings. Each unique string consists of a prefix
// and a sequence number. The generated object includes 
// methods for setting the prefix and sequence
// number, as well as a gensym method for producing unique
// strings.

    var prefix = '';
    var seq = 0;
    return {
        set_prefix: function (p) {
            prefix = String(p);
        },
        set_seq: function (s) {
            seq = s;
        },
        gensym: function (  ) {
            var result = prefix + seq;  
            seq += 1;
            return result;
        }
    };
};

var seqer = serial_maker();
seqer.set_prefix('Q');
seqer.set_seq(1000);
var unique = seqer.gensym(); // the value of unique will be "Q1000"

The author further explains:

The methods within this function do not utilize this or that. Consequently, the integrity of the sequer remains intact. It is impossible to access or alter the values of prefix and seq except through approved methods.

I am puzzled about how to use this and/or that to breach this encapsulation. Can someone shed some light on this issue?

Thank you

javascript

Answer 1

Answer №1

Take a look at the code snippet below:

var generator = function () {
    return {
        prefix: '',
        sequence: 0,

        set_prefix: function (p) {
            this.prefix = String(p);
        },
        set_sequence: function (s) {
            this.sequence = s;
        },
        generate_unique_code: function (  ) {
            var result = this.prefix + this.sequence;
            this.sequence += 1;
            return result;
        }
    };
};

The intended use of this generator is as follows:

var myGenerator = generator();
myGenerator.set_prefix('correct');
myGenerator.set_sequence(1000);

However, in the above version, you could also do the following:

var myGenerator = generator();
myGenerator.prefix = 'incorrect';
myGenerator.sequence = -500;

Or even this:

delete myGenerator.prefix;

Since both prefix and sequence are exposed as properties of the generator object, they can be accessed and modified by any code that has access to the object.

In JavaScript, properties are always public unless specific features like Object.defineProperty() are used to restrict access.

Prior to arrow functions being introduced, a common issue was with functions defined as methods not being able to access their original context. Consider this example:

var ButtonHandler = {
    message: 'Hello!',

    initialize: function() {
        for (let button of document.querySelectorAll('button')) {
            button.onclick = function() {
                alert(this.message);
            }
        }
    }
};

ButtonHandler.initialize();

In this case, the alert will show "undefined" instead of "Hello!". This is because the this keyword inside the click event function refers to the button element itself, not the ButtonHandler.

To resolve this issue, arrow functions were introduced:

button.onclick = () => {
    alert(this.message);
}

With arrow functions, the this scope is maintained, so ButtonHandler.message will display correctly.

Before arrow functions, developers commonly used the workaround below:

var self = this;
button.onclick = function() {
    alert(self.message);
}

This technique, along with closures, allowed for a limited form of "private" members that object methods could access but were hidden from outside code.

Answer 2

Take a look at the code snippet below:

var generator = function () {
    return {
        prefix: '',
        sequence: 0,

        set_prefix: function (p) {
            this.prefix = String(p);
        },
        set_sequence: function (s) {
            this.sequence = s;
        },
        generate_unique_code: function (  ) {
            var result = this.prefix + this.sequence;
            this.sequence += 1;
            return result;
        }
    };
};

The intended use of this generator is as follows:

var myGenerator = generator();
myGenerator.set_prefix('correct');
myGenerator.set_sequence(1000);

However, in the above version, you could also do the following:

var myGenerator = generator();
myGenerator.prefix = 'incorrect';
myGenerator.sequence = -500;

Or even this:

delete myGenerator.prefix;

Since both prefix and sequence are exposed as properties of the generator object, they can be accessed and modified by any code that has access to the object.

In JavaScript, properties are always public unless specific features like Object.defineProperty() are used to restrict access.

Prior to arrow functions being introduced, a common issue was with functions defined as methods not being able to access their original context. Consider this example:

var ButtonHandler = {
    message: 'Hello!',

    initialize: function() {
        for (let button of document.querySelectorAll('button')) {
            button.onclick = function() {
                alert(this.message);
            }
        }
    }
};

ButtonHandler.initialize();

In this case, the alert will show "undefined" instead of "Hello!". This is because the this keyword inside the click event function refers to the button element itself, not the ButtonHandler.

To resolve this issue, arrow functions were introduced:

button.onclick = () => {
    alert(this.message);
}

With arrow functions, the this scope is maintained, so ButtonHandler.message will display correctly.

Before arrow functions, developers commonly used the workaround below:

var self = this;
button.onclick = function() {
    alert(self.message);
}

This technique, along with closures, allowed for a limited form of "private" members that object methods could access but were hidden from outside code.

Answer 3

Answer №2

When it comes to creating objects from a function in JavaScript, there are two main approaches that are commonly used:

The factory pattern
The constructor pattern (especially demonstrated with ES6's class)

Exploring the factory Pattern

The concept of the factory pattern involves creating new objects without relying on the new keyword or establishing a this binding for the newly generated object. Essentially, this approach focuses on generating and returning a fresh object as the output of the function expression, hence its name - factory.

One significant advantage of using factory functions is their ability to implement true private attributes within an object in JavaScript by leveraging closure for encapsulation. Since there is no direct reference to the internal variables like prefix and seq, these properties are effectively hidden. This methodology stands out as the primary method for achieving fully-private encapsulated object attributes in JavaScript, unlike Java's employment of private.

Is there a way to breach the encapsulation barrier imposed by factory functions?

In such cases, transitioning to the Constructor Pattern through converting the function into a constructor proves to be the solution, depicted below using ES6 syntax:

class SerialMaker {
    // Introduces a `this` context linked to the instance
    // However, genuine encapsulation of private properties is absent
    constructor () {
        // PSEUDO-PRIVATE PROPERTIES
        this.__prefix__ = '';
        this.__seq__ = 0;
        // METHODS
        this.set_prefix: function (p) {
            this.__prefix__ = String(p);
        };
        this.set_seq: function (s) {
            this.__seq__ = s;
        };
        gensym: function (  ) {
            var result = this.__prefix__ + this.__seq__;
            this.__seq__ += 1;
            return result;
        };
    }

With this structure, object instances can now be initialized using the new operator

var seqer = new SerialMaker(); // Invokes the constructor to create a new object instance
seqer.set_prefix('Q'); // Modifies only for this specific instance: this.__prefix__
seqer.set_seq(1000); // Updates solely for this particular instance: this.__seq__
var unique = seqer.gensym(); // Generates "Q1000"

While things seem similar thus far, a crucial issue arises...

sequer.__prefix__ // => 'Q' // Unexpected access to privacy!
sequer.__seq__ = 2000 // Direct manipulation without errors

... the protective shield of encapsulation is utterly breached. The integrity of the sequer has been compromised.

Answer 4

When it comes to creating objects from a function in JavaScript, there are two main approaches that are commonly used:

The factory pattern
The constructor pattern (especially demonstrated with ES6's class)

Exploring the factory Pattern

The concept of the factory pattern involves creating new objects without relying on the new keyword or establishing a this binding for the newly generated object. Essentially, this approach focuses on generating and returning a fresh object as the output of the function expression, hence its name - factory.

One significant advantage of using factory functions is their ability to implement true private attributes within an object in JavaScript by leveraging closure for encapsulation. Since there is no direct reference to the internal variables like prefix and seq, these properties are effectively hidden. This methodology stands out as the primary method for achieving fully-private encapsulated object attributes in JavaScript, unlike Java's employment of private.

Is there a way to breach the encapsulation barrier imposed by factory functions?

In such cases, transitioning to the Constructor Pattern through converting the function into a constructor proves to be the solution, depicted below using ES6 syntax:

class SerialMaker {
    // Introduces a `this` context linked to the instance
    // However, genuine encapsulation of private properties is absent
    constructor () {
        // PSEUDO-PRIVATE PROPERTIES
        this.__prefix__ = '';
        this.__seq__ = 0;
        // METHODS
        this.set_prefix: function (p) {
            this.__prefix__ = String(p);
        };
        this.set_seq: function (s) {
            this.__seq__ = s;
        };
        gensym: function (  ) {
            var result = this.__prefix__ + this.__seq__;
            this.__seq__ += 1;
            return result;
        };
    }

With this structure, object instances can now be initialized using the new operator

var seqer = new SerialMaker(); // Invokes the constructor to create a new object instance
seqer.set_prefix('Q'); // Modifies only for this specific instance: this.__prefix__
seqer.set_seq(1000); // Updates solely for this particular instance: this.__seq__
var unique = seqer.gensym(); // Generates "Q1000"

While things seem similar thus far, a crucial issue arises...

sequer.__prefix__ // => 'Q' // Unexpected access to privacy!
sequer.__seq__ = 2000 // Direct manipulation without errors

... the protective shield of encapsulation is utterly breached. The integrity of the sequer has been compromised.

Crockford's system for safeguarded entities

Answer №1

Answer №2

Similar questions

My component reference seems to have gone missing in angular2

The seamless flow of web design

Is it possible to use Docxtemplater.js in a browser without familiarity with Node, Browserify, or npm?

Ways to dynamically apply styles to the component tag depending on the visibility of its content

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

Using AJAX to submit a form to a CodeIgniter 3 controller

What is the best way to capture the output of a script from an external website using Javascript when it is returning simple text?

Accessing an array of objects within nested objects results in an undefined value

Ways to automatically update property value in MongoDB once a particular date is reached

Geocomplete Plugin without Google Branding

Transfer PHP's uniqid() function to real-time using JavaScript with jQuery

What could be the reason for the handleOpen and handleClose functions not functioning as expected?

Issue locating the bottom of the scroll bar

Error encountered during Yarn installation process: The tunneling socket was unable to be established due to a connection refusal on localhost at port 80

Using webpack to load the css dependency of a requirejs module

JavaScript's addition function is not functioning properly

Testing the screen size automatically using Javascript

The timing calculations in Vue.js do not align with the standard JavaScript version

Is there a way to determine if npm packages are accessing and misusing my system's environment variables?

Does the entire state get replaced every time a change is made if the state is immutable?