為物件新增新功能；不改變其原有的結構和功能。

手機殼就是裝飾器，沒有它手機也能正常使用，原有的功能不變，手機殼可以減輕手機滑落的損耗。

程式碼示例

class Circle {
  draw() {
    console.log('畫一個圓形')
  }
}
class Decorator {
  constructor(circle) {
    this.circle = circle
  }
  draw() {
    this.circle.draw()
    this.setRedBorder(circle)
  }
  setRedBorder(circle) {
    console.log('設定紅色邊框')
  }
}

// 測試
let circle = new Circle()
circle.draw()

let decorator = new Decorator(cicle)
decorator.draw()
 

ES7裝飾器

// 簡單的裝飾器
@testDec // 裝飾器
class Demo {}

function testDec(target){
  target.isDec = true
}
console.log(Demo.isDec) // true

// 裝飾器原理
@decorator
class A {}

// 等同於
class A {}
A = decorator(A) || A; // 把A 作為引數，返回執行的結果

// 傳引數
function testDec(isDec) {
  return function(target) { // 這裡要 return 一個函式
    target.isDec = isDec;
  }
}
@testDec(true)
class Demo {
  // ...
}
alert(Demo.isDec) // true
 

裝飾類

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}
const Foo = {
  foo() {
    console.log('foo')
  }
}
@mixins(Foo)
class MyClass{}

let myclass = new MyClass()
myclass.foo() // 'foo'

裝飾方法

// 例1 只讀
function readonly(target, name, descriptor){
  // descriptor物件原來的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false, // 可列舉
  //   configurable: true, // 可配置
  //   writable: true // 可寫
  // };
  descriptor.writable = false;
  return descriptor;
}

class Person {
  constructor() {
    this.first = 'A'
    this.last = 'B'
  }

  @readonly
  name() { return `${this.first} ${this.last}` }
}

var p = new Person()
console.log(p.name())
p.name = function () {} // 這裡會報錯，因為 name 是隻讀屬性
 

// 例2 列印日誌
function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    // 1\. 先列印日子
    console.log(`Calling ${name} with`, arguments);
    // 2\. 執行原來的程式碼，並返回
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

const math = new Math();
const result = math.add(2, 4);
console.log('result', result);

成熟的裝飾器庫

最後

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。