看了Tomxu 的文章,特写下一个他的一个js程序的执行过程。

看了
Tomxu
的文章,特写下一个他的一个js程序的执行过程。

function ConcreteClass(){

this.performTask=function(){

console.log(this)

this.preTask();

console.log(‘一些代码’);

this.postTask();

}

}

ConcreteClass.prototype.add=function(){console.log(‘测试使用。’)}

function AbstractDecorator(decorated){//抽象类 Abstract

this.performTask=function(){

decorated.performTask();

}

}

function ConcreteDecoratorClass(decorated){

this.base=AbstractDecorator;

this.base(decorated);

decorated.preTask=function(){

console.log(‘pre-calling…’);

}

decorated.postTask=function(){

console.log(‘post-calling…’);

}

}

var c1=new ConcreteClass();

var d1=new ConcreteDecoratorClass(c1);

d1.performTask();

var c2=new ConcreteClass();

//新添加,以上为Tom大叔的代码

c2.preTask();// TypeError: c2.preTask is not a function

var d2=new ConcreteDecoratorClass();

d2.performTask();//TypeError: decorated is undefined

上面程序执行过程如下:

1.载入后,分别注册3个函数ConcreteClass、AbstractDecorator、ConcreteDecoratorClass,但不执行内部方法

2.var c1=new ConcreteClass();执行至此时,跳到ConcreteClass函数内部,进行属性或方法的添加,添加performTask方法,但不执行

3.var d1=new ConcreteDecoratorClass(c1);执行至此时:

A:跳到ConcreteClass函数内部,添加base属性,this.base=AbstractDecorator;

this.base=function AbstractDecorator(decorated){//抽象类 Abstract

this.performTask=function(){

decorated.performTask();

}

}

接着顺序执行decorated.preTask、decorated.postTask 为c1对象实例添加了这2个方法

B:this.base(decorated);变为AbstractDecorator(c1),并立即执行,跳转至函数AbstractDecorator(decorated)中,

它里面的this代表ConcreteDecoratorClass【当前作用域】,添加属性performTask,且

this.performTask=function(){

c1.performTask();

}

即对象实例d1拥有了performTask属性而不是构造函数ConcreteDecoratorClass的属性

C:c2.preTask();执行至此时,在对象实例中开始查找preTask()方法并执行

查找过程:从ConcreteClass构造函数中查找,当走到this.base(decorated);时,查找到了:

this.performTask=function(){

c1.performTask();

}

故this.performTask()至c1.performTask();,故c2.preTask()变成c1.performTask(),至此执行c1内部的‘

this.preTask();

console.log(‘一些代码’);

this.postTask();

以上执行完毕。

var c2=new ConcreteClass();

c2.preTask();// TypeError: c2.preTask is not a function

var d2=new ConcreteDecoratorClass();

d2.performTask();//TypeError: decorated is undefined

对于这2个是为了查看ConcreteClass中和ConcreteDecoratorClass

稿源:博客园-搜索引擎研究团队 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 手机数码 » 看了Tomxu 的文章,特写下一个他的一个js程序的执行过程。

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录