前言

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元惠農(nóng)做網(wǎng)站,已為上家服務(wù),為惠農(nóng)各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

本文主要給大家介紹的關(guān)于Javascript中g(shù)etter和setter的相關(guān)內(nèi)容，第一次聽說這個東西的時候是vue.js里面的數(shù)據(jù)綁定，只要綁定了數(shù)據(jù)，修改對象屬性可以自動反饋到dom上，很神奇，后面也看到了文檔里面實現(xiàn)是對對象定義了getter和setter并覆蓋原屬性，索性就來總結(jié)這兩者的用法，下面話不多說了，來一起看看詳細(xì)的介紹吧。

原理

利用Object.defineProperty來重寫對象屬性為getter和setter，通過getter和setter順便改變綁定DOM節(jié)點的值

例子

摘自MDN

function Archiver() {
 var temperature = null;
 var archive = [];

 Object.defineProperty(this, 'temperature', {
  get: function() {
   console.log('get!');
   return temperature;
  },
  set: function(value) {
   temperature = value;
   archive.push({ val: temperature });
  }
 });

 this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

利用這個MDN例子小小的寫了個方法并寫了個計時器的DEMO

  
  


  
0s

參考

Object.defineProperty() - JavaScript | MDN

深入響應(yīng)式原理 — Vue.js

總結(jié)

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