博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 装饰者模式(this运用)
阅读量:6263 次
发布时间:2019-06-22

本文共 1933 字,大约阅读时间需要 6 分钟。

例:

function ConcreteClass() {    this.performTask = function () {        this.preTask();        console.log('doing something');        this.postTask();    };}function AbstractDecorator(decorated) {    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 concrete = new ConcreteClass();
console.dir(concrete);
var decorator1 = new ConcreteDecoratorClass(concrete);
console.dir(decorator1);console.dir(concrete);
var decorator2 = new ConcreteDecoratorClass(decorator1);
console.dir(decorator2);console.dir(decorator1);
decorator2.performTask();

这个里面最难理解的就是

this.base=AbstractDecorator;

this.base(decorated);

开始还以为有base这个属性呢,其实base没有特殊的意思,换成其他的也一样,只是一个function

这两句要连接在一起运用。

 

2.

 这个很绕人的,估计也不怎么用的到,就是看看this的用法

 大体的过程就是

1.有一个tree对象,有好多的方法

2.

tree.getDecorator = function (deco) {
tree[deco].prototype = this; return new tree[deco]; }; 这句话就是返回一个对象,该对象是deco的实例,deco是tree的方法中的一个,且最重要的该对象的prototype是旧tree对象,就是说该对象继承了旧tree对象,并由deco对它进行扩展。

3.例如上一步的deco就是BlueBalls

tree.BlueBalls = function () {            this.decorate = function () {                this.BlueBalls.prototype.decorate(); // 第1步:先执行原型的decorate方法,也就是tree.decorate()                console.log('Add blue balls'); // 第2步 再输出blue                // 将这2步作为BlueBalls的decorate方法            }        };

这一步就是对上一步对象的扩展

这个里面没有扩展,只有对旧方法的覆盖

this.BlueBalls.prototype.decorate();

这里的this.BlueBalls.prototype就是旧的tree对象

 

图就是上面的this对象,像个死循环,哦,本来就是个死循环

分析:

旧tree对象本身就有BlueBalls方法

新tree对象是旧tree中BlueBalls的实例,且旧tree中的BlueBalls的prototype就是个旧tree对象

很饶人

this  新tree对象

this.BlueBalls 新tree对象所对应的prototype(旧tree对象)中的BlueBails方法,也是新tree的constructor

this.BlueBails  就是旧tree对象

所有的就是这样一层一层套起来的

转载地址:http://xkzpa.baihongyu.com/

你可能感兴趣的文章
存储过程与触发器面试
查看>>
CSS系列:在HTML中引入CSS的方法
查看>>
Orcale约束-------檢查約束
查看>>
VS2013 配置CUDNN V4 DEMO
查看>>
Codeforces Round #207 (Div. 2)C. Knight Tournament
查看>>
JS(JavaScript)的进一步了解5(更新中···)
查看>>
python3基础学习笔记
查看>>
STL模板整理 pair
查看>>
【转】jmeter学习笔记——一个简单的性能测试
查看>>
企业级镜像管理系统Harbor
查看>>
A Plain English Guide to JavaScript Prototypes
查看>>
学习总结汇总
查看>>
Beta阶段测试报告
查看>>
JQ 练习题
查看>>
AndroidStudio、gradle、buildToolsVersion关系
查看>>
WPF入门教程系列八——布局之Grid与UniformGrid(三)
查看>>
递归调用顺序问题
查看>>
Git学习笔记一《版本控制之道-使用Git》
查看>>
Java8新特性--日期和时间API
查看>>
python itertools
查看>>