Dojo面向对象机制深入剖析

痛定思痛。 2022-04-22 09:38 243阅读 0赞

Dojo是一个基于javascript语言的web控件库，要了解dojo的面向对象机制，我们可以首先来回顾一下javascript本身的基本面向对象机制:

首先，javascript主要通过函数来模拟面向对象机制，如：

function func1()\{\};

func1(); //函数调用

new func1(); //实例化的对象

上述两种方式其函数内部的this对象也是不一样的。

再者，关于javascript的最基本的继承方式主要有两种，（当然还有更复杂的，这里只列出最基本的两种方式）

1. 对象冒充方式：

function ClassA(sColor) \{  
this.color = sColor;  
this.xxx = xxx;  
......  
\}

function ClassB(sColor, name) \{  
this.newMethod = ClassA;  
this.newMethod(sColor);  
delete this.newMethod;  
......  
\}

或者：（这里ClassA同上）

function ClassB(sColor, sName) \{  
**ClassA.call(this, sColor); //或者apply**  
  
this.name = sName;  
this.sayName = function() \{  
alert(this.name);  
\};  
\}

2. 原型链式继承：

//基类

function ClassA() \{ \}  
ClassA.... = .....;  
//子类  
function ClassB() \{ \}  
**//通过修改prototype来达到继承目的  
ClassB.prototype = new ClassA();**   
//定义新属性与方法  
ClassB.... = .....;

**//保证constructor的一致性（修改prototype后其constructor变为ClassA，应该是ClassB）**

**ClassB.prototype.constructor = ClassB;**

上述两种方法各有优缺点:对象冒充方式效率低，而且必须使用构造函数方式但是能支持多继承，而prototype方式很灵活但不支持多继承。于是有了如下混合方式：

下面我们来看看dojo是如何实现继承机制的：

下面是dojo中声明类和使用类的一个简单示例，可以看出，其核心在一个dojo.declare函数上：

![0_1282028141F8d8.gif][]

我们来看看dojo.declare函数：

1> 先看第一个参数：className参数，可以见如下相关代码：

......

// add name if specified  
if(className)\{  
proto.declaredClass = className;  
**d.setObject(className, ctor);**  
\}

......

其中ctor是在该方法内构造的一个函数，其实是该声明类的定义，其本身是一个函数对象，里面有很多成员：包括属性定义，函数定义，关于这个的详细介绍这个后面会涉及到。这里主要通过dojo.setObject将该构造的函数对象赋给名为className的变量，如dijit.WidgetSet.

所以这里相当于这样写:

ctor = function()\{....\};

**Dijit.WidgetSet = ctor;**

另外强调一下，这里的proto就是ctor的prototype.

2> 我们再来看看第三个参数：props，可以见如下代码：**（具体可见加粗的字体说明）**

............  
  
proto = \{\};

**//复制一份类的定义对象的内容，见上面Dijit.Calendar的templateString, value, buildRendering等等属性和方法.**  
 safeMixin(proto, props);

**// 开始构造ctor，即构造类的定义，可以看到里面还有很多dojo自己添加的属性**  
t = !chains || !chains.hasOwnProperty(cname);

**//以下三个对象singleConstructor/simpleConstructor/chainedConstructor 都是** **是一个函数对象，其返回值也是一个函数对像，这些返回的函数对象内部，都会包含一些默认操作，包括初始化，调用ctor及其基类的ctor等等，具体细节可以参见上述三个函数的定义，可以看出模拟dojo的类的函数在初始化时都做了些什么，很值得研究，为了是篇幅不要太长，这里暂时不做过于细致的深入。**  
bases\[0\] = ctor = (chains && chains.constructor === "manual") ? simpleConstructor(bases) :  
(bases.length == 1 ? singleConstructor(props.constructor, t) : chainedConstructor(bases, t));  
  
// add meta information to the constructor

**//这里的ctor属性很关键，在上面提到的** **singleConstructor/simpleConstructor/chainedConstructor函数里面会调用到，这也是为什么dojo.declare的“类”在初始化时（new操作）会自动调用constructor方法的原因！！！**  
ctor.\_meta = \{bases: bases, hidden: props, chains: chains,  
parents: parents, **ctor: props.constructor** \};  
ctor.superclass = superclass && superclass.prototype;  
ctor.extend = extend;

**//这里是比较关键的操作了，将定义的属性全部作为prototype的属性，注意我们这里先不谈继承，而且这里不是在继承，请和前面的javascript继承区分开**

ctor.prototype = proto;

**//由于prototype被修改，所以需要重新赋值以保持prototype的constructor一致性**  
proto.constructor = ctor;  
  
**// 添加dojo里面比较常用的方法，注意：这些方法被直接加到了prototype中！**  
proto.getInherited = getInherited;  
proto.inherited = inherited;  
proto.isInstanceOf = isInstanceOf;  
  
............

**//最后将构造好的类对象ctor（本质上是一个函数对象）赋值给我们声明的类名**  
dojo.setObject(className, ctor)  
  
.............

所以这里其实可以知道，在dojo中declare的类，其本质是函数对象，其实他就是如下代码：

ctor = function()\{\};

ctor.prototype = props 属性定义.....

类名变量\{eval(className)\} = ctor;

3> 下面我们来看一看第二个参数，关系着dojo的继承机制：**（具体可见加粗的字体说明）**

..................  
  
if(opts.call(superclass) == "\[object Array\]")\{  
**//多个基类时，整理基类数组**  
bases = c3mro(superclass);  
t = bases\[0\];  
mixins = bases.length - t;

**//基类数组里的第一个对象**  
superclass = bases\[mixins\];  
\}else\{

**//只有一个基类的情况**  
bases = \[0\];  
if(superclass)\{  
if(opts.call(superclass) == "\[object Function\]")\{  
t = superclass.\_meta;  
bases = bases.concat(t ? t.bases : superclass);  
\}else\{  
err("base class is not a callable constructor.");  
\}  
\}else if(superclass !== null)\{  
err("unknown base class. Did you use dojo.require to pull it in?")  
\}  
\}

**//开始构造基类属性，合并他们的prototype内容**  
if(superclass)\{  
for(i = mixins - 1;; --i)\{

**//拷贝prototype** ，**superclass为基类数组里的第一个函数对象，forceNew之后变成含有superclass的prototype 属性的一个对象**  
proto = forceNew(superclass);  
if(!i)\{  
// stop if nothing to add (the last base)  
break;  
\}  
// mix in properties  
t = bases\[i\];

**//合并所有基类的prototype，作为后面子类的prototype，实现属性共享**  
(t.\_meta ? mixOwn : mix)(proto, t.prototype);  
**//构造 基于合并prototype的基类临时函数对象**  
ctor = new Function;  
ctor.superclass = superclass;  
ctor.prototype = proto;

superclass = proto.constructor = ctor;

**//如上这行代码用于调整所构造的ctor的constructor，保持一致性，然后修改superclass用于后续迭代，其实将这一行写成如下两行更通俗易懂：**

**// ctor.prototype.constructor = ctor;**

**// superclass = ctor;**

\}  
\}else\{  
proto = \{\};  
\}  
  
.................

这里我们只是粗略的把dojo.declare的主线路大致过了一遍，后面附上了dojo.declare的源代码（基于dojo1.5），大家可以参考一下。关于dojo.declare的实现细节还有很多很多值得讨论的地方，但是这里由于篇幅过长，所以关于dojo的面向对象机制的详细实现我们以后再继续讨论，这里就不做详细说明了。

dojo.declare 是和 dojo.require（类似java的import） 以及 dojo.provide 联合起来一起使用的，主要由这3个函数将javascript封装成了一个接近面向对象的dojo语言模式，这也是dojo比起其他web控件库比较独到的一大特点。

另外强调一点：在dojo.declare方法里还实现了一种比较有用的链式机制，通过定义“-chains-”变量来使用，有兴趣可以研究一下，这里不做过多说明。

附上dojo.declare源代码：（dojo1.5）

d.declare = function(className, superclass, props)\{  
// crack parameters  
if(typeof className != "string")\{  
props = superclass;  
superclass = className;  
className = "";  
\}  
props = props || \{\};  
  
  var proto, i, t, ctor, name, bases, chains, mixins = 1, parents = superclass;  
  
  // build a prototype  
if(opts.call(superclass) == "\[object Array\]")\{  
// C3 MRO  
bases = c3mro(superclass);  
t = bases\[0\];  
mixins = bases.length - t;  
superclass = bases\[mixins\];  
\}else\{  
bases = \[0\];  
if(superclass)\{  
if(opts.call(superclass) == "\[object Function\]")\{  
t = superclass.\_meta;  
bases = bases.concat(t ? t.bases : superclass);  
\}else\{  
err("base class is not a callable constructor.");  
\}  
\}else if(superclass !== null)\{  
err("unknown base class. Did you use dojo.require to pull it in?")  
\}  
\}  
if(superclass)\{  
for(i = mixins - 1;; --i)\{  
proto = forceNew(superclass);  
if(!i)\{  
// stop if nothing to add (the last base)  
break;  
\}  
// mix in properties  
t = bases\[i\];  
(t.\_meta ? mixOwn : mix)(proto, t.prototype);  
// chain in new constructor  
ctor = new Function;  
ctor.superclass = superclass;  
ctor.prototype = proto;  
superclass = proto.constructor = ctor;  
\}  
\}else\{  
proto = \{\};  
\}  
// add all properties  
safeMixin(proto, props);  
// add constructor  
t = props.constructor;  
if(t !== op.constructor)\{  
t.nom = cname;  
proto.constructor = t;  
\}  
  
  // collect chains and flags  
for(i = mixins - 1; i; --i)\{ // intentional assignment  
t = bases\[i\].\_meta;  
if(t && t.chains)\{  
chains = mix(chains || \{\}, t.chains);  
\}  
\}  
if(proto\["-chains-"\])\{  
chains = mix(chains || \{\}, proto\["-chains-"\]);  
\}  
  
  // build ctor  
t = !chains || !chains.hasOwnProperty(cname);  
bases\[0\] = ctor = (chains && chains.constructor === "manual") ? simpleConstructor(bases) :  
(bases.length == 1 ? singleConstructor(props.constructor, t) : chainedConstructor(bases, t));  
  
  // add meta information to the constructor  
ctor.\_meta = \{bases: bases, hidden: props, chains: chains,  
parents: parents, ctor: props.constructor\};  
ctor.superclass = superclass && superclass.prototype;  
ctor.extend = extend;  
ctor.prototype = proto;  
proto.constructor = ctor;  
  
  // add "standard" methods to the prototype  
proto.getInherited = getInherited;  
proto.inherited = inherited;  
proto.isInstanceOf = isInstanceOf;  
  
  // add name if specified  
if(className)\{  
proto.declaredClass = className;  
d.setObject(className, ctor);  
\}  
  
  // build chains and add them to the prototype  
if(chains)\{  
for(name in chains)\{  
if(proto\[name\] && typeof chains\[name\] == "string" && name != cname)\{  
t = proto\[name\] = chain(name, bases, chains\[name\] === "after");  
t.nom = name;  
\}  
\}  
\}  
// chained methods do not return values  
// no need to chain "invisible" functions  
  
  return ctor; // Function  
\};

[0_1282028141F8d8.gif]: /images/20220422/4aed77822b304b6d8d8d3393af4161c9.png