iT邦幫忙

0

請教Javascript 物件屬性的問題

  • 分享至 

  • xImage

各位先進好:
最近在練習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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
小碼農米爾
iT邦高手 1 級 ‧ 2017-11-10 14:10:38
最佳解答

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

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

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

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

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

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

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

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

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

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

原來如此!!感謝各位大大的回答。
如果要變更物件屬性的值
用傳址的方式是像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);
    }
}

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

恩,很常這樣用,把 this 存起來。
/images/emoticon/emoticon34.gif

我要發表回答

立即登入回答