JS - 装饰器模式

学习装饰器模式,理解使用范围如下:不影响其本身接口,只是对其进行扩展。

遂练习做了几种尝试:

模式一

var Person = function(str) {
    this.name = str;
    this.show = function(){
        return this.name + ' wei';
    }
    this.Decorations = {
        show: function() {
            return this.show() + ' dong !';
        }.bind(this)   
    };
}
var person = new Person('lee');
console.log(person.show());
console.log(person.Decorations.show());

同一接口show,都定义在构造函数Person上.感觉使用上维护会稍微差一点。

利用apply做了一个调整如下.

模式二

var Base = function(str) {
    this.name = str;
    this.show = function(){
        return this.name + ' wei'; 
    }
}

var Person = function(str) {
    Base.apply(this, arguments);
    this.Decorations = {
        show: function() {
            return this.show() + ' dong !';
        }.bind(this)   
    };
}


var person = new Person('lee');
console.log(person.show());
console.log(person.Decorations.show());

将原始定义的内容写在Base下,Person通过apply继承得到相关属性和方法,实现分离基本接口和装饰器提供的接口.

改写成ES6 的Class如下:

模式三

class Base {
    constructor(x) {
        this.name = x;
    }
    show() {
        return this.name + ' wei'; 
    }
}
class Person extends Base {
    constructor(x){
        super(x);
        this.Decorations = {
            show: function() {
                return this.show() + ' dong !';
            }.bind(this)              
        }
    }
}
var person = new Person('lee');
console.log(person.show());
console.log(person.Decorations.show());

前端攻略系列(三) - javascript 设计模式一文中,收获了作者另一种装饰器写法

模式四

var Person = {};
Person.Decorations = {}
Person.Base = function(name) {
    this.name = function() {
        return name + ' wei';
    }
}
Person.Decorations = function(arg) {
    this.name = function() {
        return arg.name() + ' dong';
    }
}

var person = new Person.Base('lee');
console.log(person.name());

var whole = new Person.Decorations(person);
console.log(whole.name());

参考链接

@2018-03-01 22:06