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

Modify every audio mixer for Windows

I'm experiencing a lack of feedback while implementing jQuery/AJAX with JSONP

Issues arise when attempting to alter the background image using jQuery without browserSync being activated

Switch out bootstrap icons for angular material icons

Can you explain the purpose of the "letter:" included in the code and how it is utilized?

Differences in how line breaks are handled in script output have been observed when comparing Atom and Notepad

Is it possible to transform div containers into unique shapes?

Ways to delete a header from the req object in Express

Passing React components between components using dot notation

Encountered an issue when attempting to send data using this.http.post in Angular from the client's perspective

Using jQuery Modal Dialog with ASP.NET MVC 2

How can we dynamically resize page content to fit varying browser window sizes across different devices with the help of jQuery/JavaScript?

Trigger an event in jQuery when the focus moves away from a set of controls

Problem with image title in jQuery mobile

Styling JSON data in a jQuery Mobile list display

Tips for including extra items in a JSON String using Angular 2

Forward the jsp to the servlet before navigating to the following page

Avoid refreshing the page when clicking on an anchor tag in Vue.js

Simultaneously updating the states in both the child and parent components when clicked

How to retrieve JSON data in Angular.js