getter和setter

getter 是一種獲得屬性值的方法，setter是一種設置屬性值的方法。
屬性被賦值 a = 1的時候, a 的原型內的setter就會被觸發；
而 console.log(a) 的時候，a 的原型內的getter就會被觸發。

實現getter和setter

我們不能直接給變量的setter和getter 綁定事件函數，為了實現綁定我們要借助Object對象來構造帶有setter和getter的屬性。

這里有前輩總結的 幾種實現getter和setter的方法，而且他還總結了一些Object.prototype內控制屬性枚舉的特性的隱式屬性。

我這里選用了比較好構造的一種 Object.defineProperty

概要
Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 并返回這個對象。
語法
Object.defineProperty(obj, prop, descriptor)
參數
obj
需要定義屬性的對象。
prop
需被定義或修改的屬性名。
descriptor
需被定義或修改的屬性的描述符。

第一個參數，被構造的屬性的this指向的對象 第二個參數，被構造的屬性名 第三個參數，構造的規則（上面的文字鏈接最后面有介紹）

(function () {  var o = { a : 1}//聲明一個對象,包含一個 a 屬性,值為1  Object.defineProperty(o,"b",{    get: function () {      return this.a;    },    set : function (val) {      this.a = val;    },    configurable : true  });  console.log(o.b);//==> 1  o.b = 2;  console.log(o.b);//==> 2})();

configurable是指 "b" 是否可以被再配置，默認是false。false的話
Object.defineProperty(o,"a",{set : function(val){}} );

再修改時會不起作用或者報錯，一般默認false。

構造我們的vue.watch

目標實現，以下是我們想要的達到的效果

import watcher from './watcher.js';let wm = new watcher({  data:{    a: 0   },  watch:{    a(newVal,oldVal){      console.log('newVal:'+newVal);      console.log('oldVal:'+oldVal);    }  }})vm.a = 1 // newVal:1// oldVal:0

創建構造對象

class watcher{  constructor(opts){    this.$data = opts.data;    for(let key in opts.data){      this.setData(key,opts.data[key])    }  }  setData(_key,_val){    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;        return val;      },    });  }}export default watcher;

添加 watch事件觸發

/** * @desc 屬性改變監聽，屬性被set時出發watch的方法，類似vue的watch * @author Jason * @date 2018-04-27 * @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;      },    });  }}export default watcher;