問題描述

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

PartsWe can compose objects out of sets of parts. For example, we can make a functionthat can add simple event processing features to any object. It adds an on method, afire 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

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’sloose typing is a big benefit here because we are not burdened with a type systemthat is concerned about the lineage of classes. Instead, we can focus on the characterof their contents.If we wanted eventuality to have access to the object’s private state, we could pass itthe my bundle

問題解答

英文的 'parts' 意思是部分，這里我不知道該怎么準(zhǔn)確的描述它的意思。大概就是說，可以通過一些方法將多個“部分”組合在對象上，在構(gòu)建函數(shù)中，當(dāng)然就是組合在 this 上。比如 eventuality，簡化一下

var eventuality = function(that) { // 用于保存注冊到 that 上的事件，閉包實現(xiàn) var registry = {}; // 注冊事件，將事件注冊到 registry 中 that.on = function() {}; // 從 registry 中搜索對應(yīng)的事情處理函數(shù)來執(zhí)行 that.fire = function() {};};

它會為傳入的對象 that 添加 on() 和 fire() 兩個方法用于事件的注冊和觸發(fā)，而閉包變量 registry 用于保存注冊的事件(處理函數(shù))。這個函數(shù)當(dāng)然是為對象添加事件處理功能的。

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

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

然后我們有一個 Boo 類，它除了自身的一些特性之外，還需要事件和 JSON 特性，那么在其構(gòu)造函數(shù)中就可以這樣

function Boo() { // Boo 自身的構(gòu)造內(nèi)容 // ...... eventuality(this); // 添加事件功能 jsonlity(this); // 添加 JSON 支持}

后面兩句應(yīng)該就是所謂的 compose parts 吧

這種方法會為每個對象設(shè)置相關(guān)方法函數(shù)的副本，不能重用定義的方法，所以還是比較耗資源的。不過教程中引入這一段應(yīng)該是為了引出后面的繼承這個知識點。

說到繼承，ES2015 語法上已經(jīng)支持 class 和 extends，比起之前的構(gòu)造函數(shù)方式更加嚴(yán)格，也更方便，所以這部分我建議你多了解一下新的類語法，不要太糾結(jié)舊的類語法。以后有一定基礎(chǔ)也有時間的時候，如果有興趣，再去研究 JS 的原型機制和基于原型機制的 OO 實現(xiàn)。