es7學(xué)習(xí)教程之Decorators（修飾器）詳解

更新時間：2017年07月21日 11:09:30 投稿：daisy

這篇文章主要給大家介紹了關(guān)于es7中Decorators（修飾器）的相關(guān)資料，文中通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。

本文主要給大家介紹的是關(guān)于es7 Decorators（修飾器）的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說，來一起看看詳細(xì)的介紹：

ES6 Decorators（修飾器）

修飾器（Decorator）是一個函數(shù)，用來修改類的行為。這是ES7的一個提案，目前Babel轉(zhuǎn)碼器已經(jīng)支持

我們在游戲大型項(xiàng)目種經(jīng)常會用到的方法，現(xiàn)在es6直接支持

想要使用Decorator的話需要我們配置一下文件夾，配置一下環(huán)境

npm install babel-plugin-transform-decorators-legacy --save-dev

完事配置一下babelrc文件

"plugins": ["transform-decorators-legacy"]

先說一下裝飾器的特點(diǎn)

裝飾器本質(zhì)是一個函數(shù)

@hometown hometown()

裝飾對象可以使用多個裝飾器

@hometown("山西")
@school
 class Student{
  constructor(name){
   this.name=name;
  }
  @studyke("HTML")
  study(){
   console.log(this.name+" is studying"+this.ke+"!")
  }
}

裝飾器可以帶參數(shù)

function hometown(diqu){
   //target.home="廣靈";
   return function(target){
    target.home=diqu;
   }
  }

@hometown("山西")
class...

裝飾器修飾類

function school(target){
   console.log("123")
   target.schoolName="師徒課堂";
  }
  function hometown(diqu){
   //target.home="廣靈";
   return function(target){
    target.home=diqu;
   }
  }

  function studyke(kemu){
   return function(target){
    target.ke=kemu;
   }
  }
  @hometown("山西")
  @school
  class Student{
   constructor(name){
    this.name=name;
   }
   @studyke("HTML")
   study(){
    console.log(this.name+" is studying"+this.ke+"!")
   }
  }
  console.log(Student.schoolName);
  console.log(Student.home);

  let l=new Student("xiaoA");
  l.study();

  @school
  function Teacher(){

  }

總結(jié)

以上就是這篇文章的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

一文讀懂ES7中的javascript修飾器

相關(guān)文章

利用JavaScript的Map提升性能的方法詳解
這篇文章主要介紹了利用JavaScript的Map提升性能的方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
深入淺析同源策略和跨域訪問
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實(shí)現(xiàn)
2015-11-11
layer.js open 隱藏滾動條的例子
今天小編就為大家分享一篇layer.js open 隱藏滾動條的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JS去除字符串中空格的方法
這篇文章主要介紹了JS去除字符串中空格的方法,涉及javascript字符串的正則、遍歷、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
分享JavaScript的?3?種工廠模式的用法
這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計(jì)模式中最常用的設(shè)計(jì)模式之一，這種類型的設(shè)計(jì)模式屬于創(chuàng)建型模式，它提供了一種創(chuàng)建對象的最佳方式，下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下
2022-04-04
js判斷瀏覽器類型及設(shè)備（移動頁面開發(fā)）
這篇文章主要介紹了js判斷瀏覽器類型及設(shè)備（移動頁面開發(fā)）,需要的朋友可以參考下
2015-07-07
javascript實(shí)現(xiàn)自動輸出文本（打字特效）
文字如何實(shí)現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁的時候也經(jīng)常能看到這種效果。本文給大家匯總介紹了幾種打字效果的文字特效,文字一個一個地打印在頁面上。
2015-08-08
Javascript打印網(wǎng)頁部分內(nèi)容的腳本
有時候我們只需要打印部分內(nèi)容，因?yàn)楝F(xiàn)在的頁面中廣告和一些相關(guān)內(nèi)容很多，所有用下面的方法，就可以了
2008-11-11
JavaScript展開運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解
本文主要介紹了JavaScript展開運(yùn)算符和剩余運(yùn)算符的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
微信小程序canvas實(shí)現(xiàn)環(huán)形漸變
這篇文章主要為大家詳細(xì)介紹了微信小程序canvas實(shí)現(xiàn)環(huán)形漸變，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08