首頁  >  問答  >  主體

JavaScript: The Good Parts 中 Inheritance 一章 Parts 章節的意思

最近在看JavaScript: The Good Parts,目前為止看的輕鬆愉快,內容講的很好。但是到了 Inheritance 一章 Parts
這一節的時候,完全傻眼了,根本不知道它在講什麼東西,求給點提示或者例子,以下是章節內容

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,odod on 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:

  2. 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 line of class#. 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
#

给我你的怀抱给我你的怀抱2663 天前838

全部回覆(1)我來回復

  • 我想大声告诉你

    我想大声告诉你2017-07-05 11:09:31

    英文的 "parts" 意思是部分,這裡我不知道該怎麼準確的描述它的意思。大概是說,可以用一些方法將多個「部分」組合在物件上,在建構函數中,當然就是組合在 this 上。例如 eventuality,簡化一下

    var eventuality = function(that) {
        // 用于保存注册到 that 上的事件,闭包实现
        var registry = {};
    
        // 注册事件,将事件注册到 registry 中
        that.on = function() {};
    
        // 从 registry 中搜索对应的事情处理函数来执行
        that.fire = function() {};
    };

    它會為傳入的物件that 增加on()fire() 兩個方法用於事件的註冊和觸發,而閉包變數registry 用於保存註冊的事件(處理函數)。這個函數當然是為物件添加事件處理功能的。

    假如我們還有一個其它功能需要添加到對象,例如序列化為 JSON,也就是添加一個 toJson() 方法將當前對象序列化成 JSON 字符串,比如

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

    然後我們有一個 Boo 類,它除了自身的一些特性之外,還需要事件和 JSON 特性,那麼在其構造函數中就可以這樣

    function Boo() {
        // Boo 自身的构造内容
        // ......
    
        eventuality(this);  // 添加事件功能
        jsonlity(this);     // 添加 JSON 支持
    }

    後面兩句應該就是所謂的 compose parts 吧

    補充

    這種方法會為每個物件設定相關方法函數的副本,不能重複使用定義的方法,所以還是比較耗資源的。不過教程中引入這一段應該是為了引出後面的繼承這個知識點。

    說到繼承,ES2015 語法上已經支援 class 和 extends,比起之前的建構函式方式更嚴格,也更方便,所以這部分我建議你多了解一下新的類別語法,不要太糾結舊的類別語法。以後有一定基礎也有時間的時候,如果有興趣,再去研究 JS 的原型機制和基於原型機制的 OO 實作。

    回覆
    0
  • 取消回覆