請教Javascript 物件屬性的問題

javascript jquery

植物系男子 2017-11-10 13:50:19 ‧ 6005 瀏覽

各位先進好：
最近在練習javascript object相關應用時，
建置了一個簡易的計時工具，其中有將setInterval、clearInterval
宣告在一個object(timer)中，並供按鈕的click事件叫用。執行上沒有出錯，
但在抓取timer object負責暫存累積時間的屬性時(有暫停function)，發現
屬性值並沒有隨時間變動，但Function在跑的時候該累積的值卻有正常顯示在畫面上。

請問他的值實際上有存在記憶體當中嗎?
有問題的物件屬性是** ObjTimer['s0'].tat**
程式碼如下，並附上codepen連結
https://codepen.io/wunzack/pen/MObNqP?editors=0011

var i=1;
var ObjTimer={};
var ObjRowEle={};
ObjTimer['s0']=new timer(0,'s0');
ObjRowEle['e0']=new rowEle(0);
// rowEle(0);
function rowEle(id){
  //id==i
  console.log(id);
  
  $('#s'+id).click(function(){          
    ObjTimer['s'+id].timerSet();
  })
  $('#p'+id).click(function(){    
    ObjTimer['s'+id].pause();
  })
}
function timer(tat,id) {
    this.tat=tat;
    this.id=id;    
    var tickEle;
    this.timerSet = function () {
        tickEle = setInterval(function () { timerTick() }, 1000);
    }
    function timerTick() {
      console.log(tat);
        tat += 1;              
        $('#timeTag'+id).html(tat);
    }
    this.pause = function () {
        clearInterval(tickEle);
    }
}
$('#addRowBtn').click(function(){  
  var rowStr="<div class='row'>"
    +"<div class='col' id='timeTags"+i+"'>0</div>"
    +"<div class='col'>"
     +" <div class='btn'> "
     +"   <div class='ss' id='s"+i+"'>start</div>"
     +"  </div>"
     +" <div class='btn'> "
     +"   <div class='ss' id='p"+i+"'>stop</div>"
     +" </div>"
   +" </div>"
 +" </div>";
  $('.content').append(rowStr);
  ObjTimer['s'+i]=new timer(0,'s'+i);
  // ObjRowEle['e'+i]=new rowEle(i);
  // rowEle(i);
  ObjRowEle['e'+i]=new rowEle(i);
  i++;
})

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

小碼農米爾

iT邦高手 1 級 ‧ 2017-11-10 14:10:38

最佳解答

但在抓取timer object負責暫存累積時間的屬性時(有暫停function)，發現
屬性值並沒有隨時間變動

這裡不是很理解，您怎麼抓取呢?

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

植物系男子 iT邦新手 5 級 ‧ 2017-11-10 14:13:10 檢舉

我是直接在console畫面下輸入ObjTimer['s0'].tat來看。
其中照我的理解他的值應該會隨setInterval的function來變更值，可他始終都是0，所以覺得有疑問。

fillano iT邦超人 1 級 ‧ 2017-11-10 14:20:46 檢舉

因為你在constructor中就是塞給他0阿？然後你一直操作的是tat這個變數，不是timer object的屬性tat。

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-10 14:22:13 檢舉

function timerTick() {
    console.log(tat);
    tat += 1;              
    $('#timeTag'+id).html(tat);
}

這段這裡的 tat 和 this.tat 是不同變數，
累加的是 tat ，Console 的是 this.tat，
所以抓不到XD，
然後他們都存在於記憶體，只是處於不同地方。

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-10 14:29:47 檢舉

function timer(tat,id) {
    this.tat=tat;

關鍵在這裡，this.tat=tat，這裡雖然把 tat 丟給 this.tat，但是只是把 tat 的值丟給 this.tat，並不是把記憶體指過去(C++的說法)，所以操作 tat 並不會引響 this.tat ，因為他們存在於不同的記憶體中。

植物系男子 iT邦新手 5 級 ‧ 2017-11-10 14:47:39 檢舉

原來如此!!感謝各位大大的回答。
如果要變更物件屬性的值
用傳址的方式是像var dke=this;這樣對嗎?

function timer(tat2,id) {
    this.tat=tat2;
    var dke=this;
    this.id=id;    
    var tickEle;
    this.timerSet = function () {
        tickEle = setInterval(function () { timerTick() }, 1000);
    }
    function timerTick() {
      console.log(dke.tat);
        dke.tat += 1;              
        $('#timeTag'+id).html(dke.tat);
    }
    this.pause = function () {
        clearInterval(tickEle);
    }
}

後來改成這樣就可以變更屬性值了!!