【JavaScript】JavaScript問題集に問題を追加しました(Decorator)

2020年6月6日

kenjimorita

【JavaScript】JavaScript問題集に問題を追加しました

オレンジ

JavaScript問題集
にDecoratorに関するものを追加しました

問題385

こちらの関数

function dosomthing(name){
 console.log("Hello " + name)
}

に dosomthing("kenji")実行すると "Hello kenji"と出力されます。

これをdosomthingの関数の中身を変えずに

 start
 Hello kenji
 finish

とHello kenjiの前と後にstart, finishと出力されるようにしてください

function dosomthing(name){
 console.log("Hello " + name)
}

function loggingDecorator(callback){
 return function(){
   console.log("starting");
   const result = callback.apply(this, arguments);
   console.log("Finished");
   return result
 }
}

var wrapped = loggingDecorator(dosomthing)
wrapped("kenji")

問題386

下記のように

class Example {
  @log
  sum(a, b){
    return a + b
  }
}
const e = new Example();
e.sum(1, 2)

でsumに対するlog(subに渡された引数)出力される@logz(Decorators)を作ってください


function log(_target, _name, descriptor) {
  const original = descriptor.value; // decorateしている関数
  if (typeof original === "function") {
    descriptor.value = function(...arg) {
      console.log("arguments:", `${arg}`);
      try {
        const result = original.apply(this, arg);
        return result;
      } catch (e) {
        console.log(`Error:${e}`);
        throw e;
      }
    };
  }
  return descriptor;
}
class Example {
  @log
  sum(a, b) {
    return a + b;
  }
}
const ins = new Example();
ins.sum(1, 2);

勉強になりました

sandboxはこちら
decroator

は現在stage-2です。
なのでbabelのプラグイン設定が必要です

babelのplayground
を利用するか
codeSandBoxを用意したのでそちらをforkして試してみると早いです

ではでは

「武骨日記の」プライバシーポリシーに関して
・プライバシーポリシー
・個人情報取り扱いに関して

・サイトTOP
・私は何者か
・29歳よしもと芸人がWebデザイナー未経験で学校に通い5年後フリーランスのフロントエンドエンジニアになるためにやった9つのこと
・フロント記事
・フロントエンドエンジニア
・フロントエンド記事(タグ)
・TypeScript
・TypeScript練習問題集
・【TypeScript】TypeSript中級者になる為に知っておくと良い108個のこと
・JavaScript練習問題
・styled-componentsの使い方
・SCSS問題集
・GraphQL「Apollo x Relay-Style-Cursor-Pagination(リレースタイルカーソルページネーション)」
・recomposeと仲良くなりたい
・機動戦士FlowType
・初めてReactNativeWebを触ってみて
・Ramda.jsシグネチャの読み方
・環境変数の話
・いちごタルトの作り方
・フロントエンドエンジニア豚汁の作り方