JavaScript: The meaning of the Inheritance chapter and the Parts chapter in The Good Parts

Question

I’ve been reading JavaScript: The Good Parts recently. It’s been a relaxing and enjoyable time so far, and the content is very good. But when I got to the Inheritance chapter Parts
, I was completely dumbfounded and had no idea what it was talking about. Please give me some tips or examples. The following is the chapter content

Parts
We can compose objects out of sets of parts. For example, we can make a function
that can add simple event processing features to any object. It adds an on method, a
fire method , and a private event registry:

var eventuality = function (that) {
    var registry = {};
    that.fire = function (event) {
    // Fire an event on an object. The event can be either
    // a string containing the name of the event or an
    // object containing a type property containing the
    // name of the event. Handlers registered by the 'on'
    // method that match the event name will be invoked.
        var array,
        func,
        handler,
        i,
        type = typeof event === 'string' ?
        event : event.type;
        // If an array of handlers exist for this event, then
        // loop through it and execute the handlers in order.
        if (registry.hasOwnProperty(type)) {
            array = registry[type];
            for (i = 0; i < array.length; i += 1) {
                handler = array[i];
                // A handler record contains a method and an optional
                // array of parameters. If the method is a name, look
                // up the function.
                func = handler.method;
                if (typeof func === 'string') {
                    func = this[func];
                }
                // Invoke a handler. If the record contained
                // parameters, then pass them. Otherwise, pass the
                // event object.
                func.apply(this,
                handler.parameters || [event]);
                }
            }
            return this;
        };
        that.on = function (type, method, parameters) {
        // Register an event. Make a handler record. Put it
        // in a handler array, making one if it doesn't yet
        // exist for this type.
        var handler = {
            method: method,
            parameters: parameters
        };
        if (registry.hasOwnProperty(type)) {
            registry[type].push(handler);
        } else {
            registry[type] = [handler];
        }
        return this;
    };
    return that;
};

We could call eventuality on any inpidual object, bestowing it with event handling

1. We could also call it in a constructor function before that is returned:

eventuality(that)

In this way, a constructor could assemble objects from a set of parts. JavaScript's
loose typing is a big benefit here because we are not burdened with a type system
that is concerned about the lineage of classes. Instead, we can focus on the character
of their contents.
If we wanted eventuality to have access to the object's private state, we could pass it
the my bundle

Answer 1

The English "parts" means parts. I don't know how to accurately describe its meaning here. Roughly speaking, multiple "parts" can be combined on objects through some methods. In the construction function, of course, they are combined on this. For example, eventuality, simplify it

var eventuality = function(that) {
    // 用于保存注册到 that 上的事件，闭包实现
    var registry = {};

    // 注册事件，将事件注册到 registry 中
    that.on = function() {};

    // 从 registry 中搜索对应的事情处理函数来执行
    that.fire = function() {};
};

It will add on() and fire() to the passed objectthat for event registration and triggering, while the closure variable registry is used to save registered events (handling functions ). This function, of course, adds event handling functionality to the object.

Suppose we have another function that needs to be added to the object, such as serialization to JSON, that is, adding a toJson() method to serialize the current object into a JSON string, such as

function jsonlity(that) {
    that.toJson = function() {};
}

Then we have a Boo class, which in addition to some of its own features, also needs events and JSON features, so this can be done in its constructor

function Boo() {
    // Boo 自身的构造内容
    // ......

    eventuality(this);  // 添加事件功能
    jsonlity(this);     // 添加 JSON 支持
}

The last two sentences should be the so-called compose parts

Supplement

This method will set a copy of the relevant method function for each object and cannot reuse the defined method, so it is still relatively resource-consuming. However, this paragraph should be introduced in the tutorial to introduce the following knowledge point of inheritance.

Speaking of inheritance, ES2015 syntax already supports class and extends, which is stricter and more convenient than the previous constructor method. So in this part, I suggest you learn more about the new class syntax and don’t get too entangled in the old class syntax. In the future, when you have a certain foundation and have time, if you are interested, you can study the prototype mechanism of JS and OO implementation based on the prototype mechanism.