ES6 系列之我們來聊聊裝飾器

阿新 • • 發佈：2018-11-14

Decorator

裝飾器主要用於:

裝飾類
裝飾方法或屬性

裝飾類

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}
複製程式碼

裝飾方法或屬性

class MyClass {
  @readonly
  method() { }
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}
複製程式碼

Babel

安裝編譯

我們可以在 Babel 官網的 Try it out，檢視 Babel 編譯後的程式碼。

不過我們也可以選擇本地編譯：

npm init

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
複製程式碼

新建 .babelrc 檔案

{
  "plugins": [
    ["@babel/plugin-proposal-decorators" 
, { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ]
}
複製程式碼

再編譯指定的檔案

babel decorator.js --out-file decorator-compiled.js
複製程式碼

裝飾類的編譯

編譯前：

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}
複製程式碼

編譯後：

var _class;

let 
 MyClass = annotation(_class = class MyClass {}) || _class;

function annotation(target) {
  target.annotated = true;
}
複製程式碼

我們可以看到對於類的裝飾，其原理就是：

@decorator
class A {}

// 等同於

class A {}
A = decorator(A) || A;
複製程式碼

裝飾方法的編譯

編譯前：

class MyClass {
  @unenumerable
  @readonly
  method() { }
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

function unenumerable(target, name, descriptor) {
  descriptor.enumerable = false;
  return descriptor;
}
複製程式碼

編譯後：

var _class;

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context ) {
	/**
	 * 第一部分
	 * 拷貝屬性
	 */
	var desc = {};
	Object["ke" + "ys"](descriptor).forEach(function(key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ("value" in desc || desc.initializer) {
		desc.writable = true;
	}

	/**
	 * 第二部分
	 * 應用多個 decorators
	 */
	desc = decorators
		.slice()
		.reverse()
		.reduce(function(desc, decorator) {
			return decorator(target, property, desc) || desc;
		}, desc);

	/**
	 * 第三部分
	 * 設定要 decorators 的屬性
	 */
	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object["define" + "Property"](target, property, desc);
		desc = null;
	}

	return desc;
}

let MyClass = ((_class = class MyClass {
	method() {}
}),
_applyDecoratedDescriptor(
	_class.prototype,
	"method",
	[readonly],
	Object.getOwnPropertyDescriptor(_class.prototype, "method"),
	_class.prototype
),
_class);

function readonly(target, name, descriptor) {
	descriptor.writable = false;
	return descriptor;
}
複製程式碼

裝飾方法的編譯原始碼解析

我們可以看到 Babel 構建了一個 _applyDecoratedDescriptor 函式，用於給方法裝飾。

Object.getOwnPropertyDescriptor()

在傳入引數的時候，我們使用了一個 Object.getOwnPropertyDescriptor() 方法，我們來看下這個方法：

Object.getOwnPropertyDescriptor() 方法返回指定物件上的一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該物件的屬性，不需要從原型鏈上進行查詢的屬性）

順便注意這是一個 ES5 的方法。

舉個例子：

const foo = { value: 1 };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//   value: 1,
//   writable: true
//   enumerable: true,
//   configurable: true,
// }

const foo = { get value() { return 1; } };
const bar = Object.getOwnPropertyDescriptor(foo, "value");
// bar {
//   get: /*the getter function*/,
//   set: undefined
//   enumerable: true,
//   configurable: true,
// }
複製程式碼

第一部分原始碼解析

在 _applyDecoratedDescriptor 函式內部，我們首先將 Object.getOwnPropertyDescriptor() 返回的屬性描述符物件做了一份拷貝：

// 拷貝一份 descriptor
var desc = {};
Object["ke" + "ys"](descriptor).forEach(function(key) {
	desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;

// 如果沒有 value 屬性或者沒有 initializer 屬性，表明是 getter 和 setter
if ("value" in desc || desc.initializer) {
	desc.writable = true;
}
複製程式碼

那麼 initializer 屬性是什麼呢？Object.getOwnPropertyDescriptor() 返回的物件並不具有這個屬性呀，確實，這是 Babel 的 Class 為了與 decorator 配合而產生的一個屬性，比如說對於下面這種程式碼：

class MyClass {
  @readonly
  born = Date.now();
}

function readonly(target, name, descriptor) {
  descriptor.writable = false;
  return descriptor;
}

var foo = new MyClass();
console.log(foo.born);
複製程式碼

Babel 就會編譯為：

// ...
(_descriptor = _applyDecoratedDescriptor(_class.prototype, "born", [readonly], {
	configurable: true,
	enumerable: true,
	writable: true,
	initializer: function() {
		return Date.now();
	}
}))
// ...
複製程式碼

此時傳入 _applyDecoratedDescriptor 函式的 descriptor 就具有 initializer 屬性。

第二部分原始碼解析

接下是應用多個 decorators：

/**
 * 第二部分
 * @type {[type]}
 */
desc = decorators
	.slice()
	.reverse()
	.reduce(function(desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);
複製程式碼

對於一個方法應用了多個 decorator，比如：

class MyClass {
  @unenumerable
  @readonly
  method() { }
}
複製程式碼

Babel 會編譯為：

_applyDecoratedDescriptor(
	_class.prototype,
	"method",
	[unenumerable, readonly],
	Object.getOwnPropertyDescriptor(_class.prototype, "method"),
	_class.prototype
)
複製程式碼

在第二部分的原始碼中，執行了 reverse() 和 reduce() 操作，由此我們也可以發現，如果同一個方法有多個裝飾器，會由內向外執行。

第三部分原始碼解析

/**
 * 第三部分
 * 設定要 decorators 的屬性
 */
if (context && desc.initializer !== void 0) {
	desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
	desc.initializer = undefined;
}

if (desc.initializer === void 0) {
	Object["define" + "Property"](target, property, desc);
	desc = null;
}

return desc;
複製程式碼

如果 desc 有 initializer 屬性，意味著當裝飾的是類的屬性時，會將 value 的值設定為:

desc.initializer.call(context)
複製程式碼

而 context 的值為 _class.prototype，之所以要 call(context)，這也很好理解，因為有可能

class MyClass {
  @readonly
  value = this.getNum() + 1;

  getNum() {
    return 1;
  }
}
複製程式碼

最後無論是裝飾方法還是屬性，都會執行：

Object["define" + "Property"](target, property, desc);
複製程式碼

由此可見，裝飾方法本質上還是使用 Object.defineProperty() 來實現的。

應用

1.log

為一個方法新增 log 函式，檢查輸入的引數：

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

function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return oldValue.apply(this, args);
  };

  return descriptor;
}

const math = new Math();

// Calling add with [2, 4]
math.add(2, 4);
複製程式碼

再完善點：

let log = (type) => {
  return (target, name, descriptor) => {
    const method = descriptor.value;
    descriptor.value =  (...args) => {
      console.info(`(${type}) 正在執行: ${name}(${args}) = ?`);
      let ret;
      try {
        ret = method.apply(target, args);
        console.info(`(${type}) 成功 : ${name}(${args}) => ${ret}`);
      } catch (error) {
        console.error(`(${type}) 失敗: ${name}(${args}) => ${error}`);
      }
      return ret;
    }
  }
};
複製程式碼

2.autobind

class Person {
  @autobind
  getPerson() {
  	return this;
  }
}

let person = new Person();
let { getPerson } = person;

getPerson() === person;
// true
複製程式碼

我們很容易想到的一個場景是 React 繫結事件的時候：

class Toggle extends React.Component {

  @autobind
  handleClick() {
	  console.log(this)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}
複製程式碼

我們來寫這樣一個 autobind 函式：

const { defineProperty, getPrototypeOf} = Object;

function bind(fn, context) {
  if (fn.bind) {
    return fn.bind(context);
  } else {
    return function __autobind__() {
      return fn.apply(context, arguments);
    };
  }
}

function createDefaultSetter(key) {
  return function set(newValue) {
    Object.defineProperty(this, key, {
      configurable: true,
      writable: true,
      enumerable: true,
      value: newValue
    });

    return newValue;
  };
}

function autobind(target, key, { value: fn, configurable, enumerable }) {
  if (typeof fn !== 'function') {
    throw new SyntaxError(`@autobind can only be used on functions, not: ${fn}`);
  }

  const { constructor } = target;

  return {
    configurable,
    enumerable,

    get() {

      /**
       * 使用這種方式相當於替換了這個函式，所以當比如
       * Class.prototype.hasOwnProperty(key) 的時候，為了正確返回
       * 所以這裡做了 this 的判斷
       */
      if (this === target) {
        return fn;
      }

      const boundFn = bind(fn, this);

      defineProperty(this, key, {
        configurable: true,
        writable: true,
        enumerable: false,
        value: boundFn
      });

      return boundFn;
    },
    set: createDefaultSetter(key)
  };
}
複製程式碼

3.debounce

有的時候，我們需要對執行的方法進行防抖處理:

class Toggle extends React.Component {

  @debounce(500, true)
  handleClick() {
    console.log('toggle')
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        button
      </button>
    );
  }
}
複製程式碼

我們來實現一下：

function _debounce(func, wait, immediate) {

    var timeout;

    return function () {
        var context = this;
        var args = arguments;

        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

function debounce(wait, immediate) {
  return function handleDescriptor(target, key, descriptor) {
    const callback = descriptor.value;

    if (typeof callback !== 'function') {
      throw new SyntaxError('Only functions can be debounced');
    }

    var fn = _debounce(callback, wait, immediate)

    return {
      ...descriptor,
      value() {
        fn()
      }
    };
  }
}
複製程式碼

4.time

用於統計方法執行的時間:

function time(prefix) {
  let count = 0;
  return function handleDescriptor(target, key, descriptor) {

    const fn = descriptor.value;

    if (prefix == null) {
      prefix = `${target.constructor.name}.${key}`;
    }

    if (typeof fn !== 'function') {
      throw new SyntaxError(`@time can only be used on functions, not: ${fn}`);
    }

    return {
      ...descriptor,
      value() {
        const label = `${prefix}-${count}`;
        count++;
        console.time(label);

        try {
          return fn.apply(this, arguments);
        } finally {
          console.timeEnd(label);
        }
      }
    }
  }
}
複製程式碼

5.mixin

用於將物件的方法混入 Class 中：

const SingerMixin = {
  sing(sound) {
    alert(sound);
  }
};

const FlyMixin = {
  // All types of property descriptors are supported
  get speed() {},
  fly() {},
  land() {}
};

@mixin(SingerMixin, FlyMixin)
class Bird {
  singMatingCall() {
    this.sing('tweet tweet');
  }
}

var bird = new Bird();
bird.singMatingCall();
// alerts "tweet tweet"
複製程式碼

mixin 的一個簡單實現如下：

function mixin(...mixins) {
  return target => {
    if (!mixins.length) {
      throw new SyntaxError(`@mixin() class ${target.name} requires at least one mixin as an argument`);
    }

    for (let i = 0, l = mixins.length; i < l; i++) {
      const descs = Object.getOwnPropertyDescriptors(mixins[i]);
      const keys = Object.getOwnPropertyNames(descs);

      for (let j = 0, k = keys.length; j < k; j++) {
        const key = keys[j];

        if (!target.prototype.hasOwnProperty(key)) {
          Object.defineProperty(target.prototype, key, descs[key]);
        }
      }
    }
  };
}
複製程式碼

6.redux

實際開發中，React 與 Redux 庫結合使用時，常常需要寫成下面這樣。

class MyReactComponent extends React.Component {}

export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
複製程式碼

有了裝飾器，就可以改寫上面的程式碼。

@connect(mapStateToProps, mapDispatchToProps)
export default class MyReactComponent extends React.Component {};
複製程式碼

相對來說，後一種寫法看上去更容易理解。

7.注意

以上我們都是用於修飾類方法，我們獲取值的方式為：

const method = descriptor.value;
複製程式碼

但是如果我們修飾的是類的例項屬性，因為 Babel 的緣故，通過 value 屬性並不能獲取值，我們可以寫成：

const value = descriptor.initializer && descriptor.initializer();
複製程式碼

參考

ES6 系列

ES6 系列目錄地址：github.com/mqyqingfeng…

ES6 系列預計寫二十篇左右，旨在加深 ES6 部分知識點的理解，重點講解塊級作用域、標籤模板、箭頭函式、Symbol、Set、Map 以及 Promise 的模擬實現、模組載入方案、非同步處理等內容。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎 star，對作者也是一種鼓勵。

ES6 系列之我們來聊聊裝飾器

Decorator 裝飾器主要用於: 裝飾類裝飾方法或屬性裝飾類 @annotation class MyClass { } function annotation(target) { target.annotated = true; } 複製程式碼裝飾方法或屬性 cla

ES6 系列之我們來聊聊 Promise

前言 Promise 的基本使用可以看阮一峰老師的《ECMAScript 6 入門》。我們來聊點其他的。回撥說起 Promise，我們一般都會從回撥或者回調地獄說起，那麼使用回撥到底會導致哪些不好的地方呢？ 1. 回撥巢狀使用回撥，我們很有可能會將業務程式碼寫成如下這種形式： doA(

ES6 系列之我們來聊聊 Async

1. 原生 css 動畫代替 js 動畫原生 css 動畫要比 js 實現的動畫要高效很多，所以在可能的情況下儘量用原生 css 動畫。可以參考： You-Dont-Need-JavaScript css animation css @keyframes c

Day 19 函數之閉包、裝飾器

false print glob src true success 返回值 count please 一、什麽是裝飾器器即函數裝飾即修飾，意指為其他函數添加新功能裝飾器定義：本質就是函數，功能是為其他函數添加新功能二、裝飾器遵循的原則 1.不修改被裝飾函數

Https系列之三：讓服務器同時支持http、https，基於spring boot

signed 默認 gfs proc idl clas 兩種方法 .... gpg Https系列會在下面幾篇文章中分別作介紹：一：https的簡單介紹及SSL證書的生成二：https的SSL證書在服務器端的部署，基於tomcat,spring boot三：讓服務器同時

what's the python之函數及裝飾器

聲明做的運用本質修改忽略局部變量即使實現 what‘s the 函數？　　函數的定義：（return是返回值，可以沒有，不過沒有的話就返回了None） def wrapper(參數1,參數2,*args,默認參數,**kwargs): ‘‘‘註釋

django之基於cookie和裝飾器實現用戶認證

view itl 代碼重新 -- eve method args () 一、使用Django自帶的decorator 通常情況，使用函數定義的view,可以直接使用 login_required 直接裝飾 @login_required def index(requ

使用類來寫裝飾器

mon main ext end cti wrap 計算 nbsp them 前兩天發現了裝飾器可以直接使用類來寫，分享一下，需要用類裏面的__call__方法，__call__方法就是可以把這個實例當成一個函數來調用，如果正常使用類裏面的方法的話，實例方法要先實例化類，然

來，我們來聊聊怎麽學好3dMax三維建模這款軟件

dMax三維建模室內效果圖效果圖公司近年來的發展體現了流行3D技術，而3D技術的應用也越來越廣泛，3D為電腦效果圖制作的主力。室內效果是設計師進行設計後所達到的效果，除了通常采用的方法外，還應該積極地找尋一種適合的教學方法，培養興趣，以達到最好的效果。

ES6 系列之 Babel 將 Async 編譯成了什麼樣子

前言本文就是簡單介紹下 Async 語法編譯後的程式碼。 Async const fetchData = (data) => new Promise((resolve) => setTimeout(resolve, 1000, data + 1)) const fetchValue =

ES6 系列之 Babel 是如何編譯 Class 的(上)

前言在瞭解 Babel 是如何編譯 class 前，我們先看看 ES6 的 class 和 ES5 的建構函式是如何對應的。畢竟，ES6 的 class 可以看作一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。 con

ES6 系列之 Babel 是如何編譯 Class 的(下)

前言在上一篇《 ES6 系列 Babel 是如何編譯 Class 的(上)》，我們知道了 Babel 是如何編譯 Class 的，這篇我們學習 Babel 是如何用 ES5 實現 Class 的繼承。 ES5 寄生組合式繼承 function Parent (name) { this.nam

ES6 系列之 defineProperty 與 proxy

前言我們或多或少都聽過“資料繫結”這個詞，“資料繫結”的關鍵在於監聽資料的變化，可是對於這樣一個物件：var obj = {value: 1}，我們該怎麼知道 obj 發生了改變呢？ definePropety ES5 提供了 Object.defineProperty 方法，該方法可以在一個物件上定

ES6 系列之 Generator 的自動執行

單個非同步任務 var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); c

ES6 系列之私有變數的實現

前言在閱讀《ECMAScript 6 入門》的時候，零散的看到有私有變數的實現，所以在此總結一篇。 1. 約定實現 class Example { constructor() { this._private = 'private'; } getName() { return thi

【Flask】增加使用者體驗之 abort和@errorhandler裝飾器，自定義錯誤頁面和資訊

一、abort函式概念：flask中的異常處理語句，功能類似於python中raise語句，只要觸發abort，後面的程式碼不會執行，abort只能丟擲符合http協議的異常狀態碼（不同於return可以返回自定義狀態碼，這裡不做討論）。應用場景：一般用來實現自定義的錯誤資訊，讓程式

(譯)Effective Kotlin系列之遇到多個構造器引數要考慮使用Builder(二)

翻譯說明: 原標題: Effective Java in Kotlin, item 2: Consider a builder when faced with many constructor parameters 原文地址: https://blog.kotlin-academy.

Java設計模式之外觀模式和裝飾器模式的設計（精選）

前言本篇來學習下結構型模式的外觀模式和裝飾器模式。外觀模式簡介外觀模式隱藏系統的複雜性，並向客戶端提供了一個客戶端可以訪問系統的介面。這種型別的設計模式屬於結構型模式，它向現有的系統新增一個介面，來隱藏系統的複雜性。簡單的來說就是對外提供一個簡單介面，

python快速學習系列（5）：裝飾器

裝飾器概述： -理解裝飾器要從三方面入手：why?what?how? -學習裝飾器要從模仿開始 1.why?為什麼會出現裝飾器這個東西？ ·名稱管理 ·顯示呼叫 ·就近原則 ·充分複用例如： def decorate(func): func.__doc__ += '\nDe

從ES6重新認識JavaScript設計模式: 裝飾器模式

1 什麼是裝飾器模式向一個現有的物件新增新的功能，同時又不改變其結構的設計模式被稱為裝飾器模式（Decorator Pattern），它是作為現有的類的一個包裝（Wrapper）。可以將裝飾器理解為遊戲人物購買的裝備，例如LOL中的英雄剛開始遊戲時只有基礎的攻擊力和法強

ES6 系列之我們來聊聊裝飾器

Decorator

裝飾類

裝飾方法或屬性

Babel

安裝編譯

裝飾類的編譯

裝飾方法的編譯

裝飾方法的編譯原始碼解析

Object.getOwnPropertyDescriptor()

第一部分原始碼解析

第二部分原始碼解析

第三部分原始碼解析

應用

1.log

2.autobind

3.debounce

4.time

5.mixin

6.redux

7.注意

參考

ES6 系列

相關推薦