JavaScriptテンプレート方法モード(es 6)

経典の飲み物とコーヒーは先に父類を定義して、子類は通用の方法を継承して、特殊な方法は子類で書き直します.

//    
class Beverage {
    constructor(name) {
        //       ，   constructor    this，this    
        this.init = () => {
            this.boilWater();
            this.brew();
            this.pourInCup();
            if (this.customerWantsCondiments()) { //        true，     
                this.addCondiments();
            }
        };
        console.log('     '+name)
    };
    //  boilWater，       
    boilWater() {
        console.log('    ');
    };
    brew() {
        throw new Error('       brew   ');
    };
    pourInCup() {
        throw new Error('       pourInCup   ');
    };
    addCondiments() {
        throw new Error('       addCondiments   ');
    };
    customerWantsCondiments() {
        return true; //       
    };
    //init       ，         ， es5 ,this   window， es6,this    window，   
    // init() {
    //     console.log(this);
    //     this.boilWater();
    //     this.brew();
    //     this.pourInCup();
    //     if (this.customerWantsCondiments()) { //        true，     
    //         this.addCondiments();
    //     }
    // };


}
//    ，      
class CoffeeWithHook extends Beverage {
    constructor(name) {
        //         ,    super   ，    ‘  ’   
        super(name);
    }
    brew() {
        console.log('       ');
    };
    pourInCup() {
        console.log('       ');
    };
    addCondiments() {
        console.log('     ');
    };
    customerWantsCondiments() {
        return window.confirm('       ？');
    };

};

let coffeeWithHook = new CoffeeWithHook('  ');
//    init  constructor   ，        。 es5 ,this   window， es6,this    window，   
let {init} = coffeeWithHook;//var init = coffeeWithHook.init
init();

以下のコードは伝統的なJavaScriptのテンプレート方法を実現するコードです.伝統が良くないというわけではありません.ただES 6はすでに種類の概念があって、もちろん種類を使うことを提唱するので、コードを更にはっきりさせます.

var Beverage = function (param) {
    var boilWater = function () {
        console.log('    ');
    };
    var brew = param.brew || function () {
        throw new Error('     brew   ');
    };
    var pourInCup = param.pourInCup || function () {
        throw new Error('     pourInCup   ');
    };
    var addCondiments = param.addCondiments || function () {
        throw new Error('     addCondiments   ');
    };
    var F = function () { };
    F.prototype.init = function () {
        boilWater();
        brew();
        pourInCup();
        addCondiments();
    };
    return F;
};
var Coffee = Beverage({
    brew: function () {
        console.log('       ');
    },
    pourInCup: function () {
        console.log('       ');
    },
    addCondiments: function () {
        console.log('     ');
    }
});

var coffee = new Coffee();
coffee.init();