Crockford的安全对象模块

Question

I understand there's loads of questions and documentation around "Javascript: The Good Parts" but I'm trying to understand the meaning of a sentence in the book and can't quite get it. In the pages 41-42 he defines the serial_maker function:

var serial_maker = function (  ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces 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(); // unique is "Q1000"

And then he says:

The methods do not make use of this and that . As a result, there is no way to compromise the sequer . It isn't posible to get or change the prefix or seq except as permitted by the methods

How should I use this and/or that to break that encapsulation? I can't see it

Thanks

Answer 1

Consider the variation below:

var serial_maker = function () {
    return {
        prefix: '',
        seq: 0,

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

Now, the intended use of the sequer is the following:

var sequer = serial_maker();
sequer.set_prefix('right');
sequer.set_seq(1000);

However, in the version I posted above, you could also do this:

var sequer = serial_maker();
sequer.prefix = 'wrong';
sequer.seq = -500;

Or even this:

delete sequer.prefix;

Since both prefix and seq are exposed as properties of the sequer object, and properties in JavaScript are always public. Any code that has access to the object can at least read its properties, and usually modify them as well (unless you use some of the features provided by Object.defineProperty() ).

As for that : before arrow functions were introduced, it was a very common problem that functions defined as methods weren't able to access the context where they were created.

Consider the following example:

var ButtonInitializer = {
    message: 'Hello!'

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

ButtonInitializer.init();

The object ButtonInitializer searches the document for <button> elements and sets their onclick event listener to display an alert; our intention is to show the message defined in ButtonInitializer.message . However, if you run the above code, you'll find that the alert is " undefined ". This is because the function we assign to button.onclick becomes a method of the button, so the this keyword inside the function will now refer to the button, and not the ButtonInitializer .

Today, we can solve this with an arrow function:

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

Arrow functions don't have their own this scope, so the alert will display ButtonInitializer.message , as we meant. Before arrow functions were introduced, this was a common workaround:

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

This technique was used very commonly together with closures, and allowed a limited implementation of "private" members that the object's methods could access, but weren't directly visible from outside code.

Answer 2

There are two popular ways of creating objects from a function in JavaScript:

• The factory pattern
• The constructor pattern (Better illustrated using ES6 class )

The factory Pattern

In this example, he is using and referring to the factory pattern, which does not make use of the new keyword and also does not create a this binding on the newly created object. It only creates a new object and returns it as a value of the function expression, thus why it is called a factory.

Factory functions are the best way to create true object private attributes in JavaScript, thus encapsulation using closure. Because there is no this binding, you cannot access the variables prefix and seq that are encapsulated within the factory function. Using this pattern is the only way to create fully-private encapsulated object "property" in JavaScript (in comparison to Java's use of private .)

How should I use this and/or that to break that encapsulation?

You would re-factor that code using the Constructor Pattern (Make it into a constructor) which would look like this (using ES6):

class SerialMaker {
    // Creates a `this` binding to the instance of the class
    // No actual encapsulation on the private properties
    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;
        };
    }

Now, you can create new object using the new operator

var seqer = new SerialMaker(); // Calls the constructor and creates a new instance object
seqer.set_prefix('Q'); // Set on this instance only: this.__prefix__
seqer.set_seq(1000); // Set on this instance only: this.__seq__
var unique = seqer.gensym(); // unique is "Q1000"

Same thing up to this point, but the problem is...

sequer.__prefix__ // => 'Q' // What??? This was supposed to be private!
sequer.__seq__ = 2000 // Works with no error

... the encapsulation is completely broken . The seqer is compromised.