在JS程式設計中，如果能監測變數的內容，當變數值發生變化時，實時發出通知，這定是一項很有用的功能。
下面就來實現它。
監聽效果
先來看效果，當變數值發生變化時，自動提示出舊值和新值：
實現方式
用一個例程實現上述效果。
一個js、一個html。
js內容：
/**
* @desc 屬性改變監聽，屬性被set時出發watch的方法，類似vue的watch
* @study https：//www。jshaman。com/
* @constructor
* @param {object} opts - 構造引數。 @default {data：{}，watch：{}}；
* @argument {object} data - 要繫結的屬性
* @argument {object} watch - 要監聽的屬性的回撥
* watch @callback （newVal，oldVal） - 新值與舊值
*/
class watcher{
constructor（opts）{
this。$data = this。getBaseType（opts。data） === ‘Object’ ？ opts。data ： {}；
this。$watch = this。getBaseType（opts。watch） === ‘Object’ ？ opts。watch ： {}；
for（let key in opts。data）{
this。setData（key）
}
}
getBaseType（target） {
const typeStr = Object。prototype。toString。apply（target）；
return typeStr。slice（8， -1）；
}
setData（_key）{
Object。defineProperty（this，_key，{
get： function （） {
return this。$data［_key］；
}，
set ： function （val） {
const oldVal = this。$data［_key］；
if（oldVal === val）return val；
this。$data［_key］ = val；
this。$watch［_key］ && typeof this。$watch［_key］ === ‘function’ && （
this。$watch［_key］。call（this，val，oldVal）
）；
return val；
}，
}）；
}
}
html內容：
<！DOCTYPE html>
將兩個檔案存放在同一目錄下，開啟html檔案即可看到效果。