Help us understand the problem. What is going on with this article?

【JavaScript】プロパティの変化を監視する

はじめに

React.jsやVue.jsのようなJSフレームワークを使用してない案件で、オブジェクトのプロパティの変化を監視しないといけないことがあったので、生のJavaScriptで実装しました。
今時のフロントエンド開発では、あまりなさそうな気もしますが。。。

サンプルプログラム

sample.js
//オブジェクトのプロパティの変化を監視する関数
let watchProp = function(obj, propName) {
    let value = obj[propName];
    Object.defineProperty(obj, propName, {
        get: () => value,
        set: newValue => {
            const oldValue = value;
            value = newValue;
            consoleOut(oldValue,value);
        }
    });
}

//プロパティが変化した時に呼び出す関数
let consoleOut = function(oldValue,value){
    document.getElementById("outTime").innerHTML = oldValue+""+value;
}

//監視させるオブジェクトとプロパティを定義
let timeKeeper = {"count_time" : 0};
watchProp(timeKeeper, "count_time");

//1秒ごとにプロパティをカウントアップ
setInterval("countup()", 1000);
let countup = function(){
    timeKeeper["count_time"] += 1;
    console.log(timeKeeper["count_time"]);
}

サンプルプログラムはこんな感じで、以下のようなhtmlで読み込ませてあげると、1秒毎に<p>タグのテキストが変化します。

sample.html
<!DOCTYPE html>
<html>
<head></head>
<body>
    <p id="outTime">0</p>
    <script type="text/javascript" src="sample.js"></script>
</body>
</html>

【ブラウザ表示】

timestamp.gif

Object.definePropertyでプロパティの変化を監視

let watchProp = function(obj, propName) {
    let value = obj[propName];
    Object.defineProperty(obj, propName, {
        get: () => value,
        set: newValue => {
            const oldValue = value;
            value = newValue;
            consoleOut(oldValue,value);
        }
    });
}

サンプルプログラムでは、この「watchProp」という関数がプロパティの変化を監視して、変化した時に「consoleOut」という関数を呼び出しているのですが、 Object.defineProperty() というメソッドを使用しています。

詳しくは、リンクのMDNや他の方の記事が参考になるかと思います。

Object.defineProperty() - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

「[JavaScript] 6. Object.defineProperty/ies でプロパティ/メソッド定義」
https://qiita.com/Koizumi-Greenwich/items/1b827b4304538f2f8e37

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした