2013-06-26 40 views
0

我正在用js API製作名爲vLine的工具, 但它是javascript的基本問題,所以我在這裏發帖。如何處理JavaScript面向對象的原型

我想在示例代碼上附上聊天系統。 我有什麼ADDE那朵

之間///聊天功能

this.prototype.onMessage_ 
顯示錯誤,如

Uncaught TypeError: Cannot set property 'onMessage_' of undefined 

我雖然已經做了一些JavaScript的programings,我不擅長這個。 所以我想我沒有明白,一些非常基本的JavaScript面向對象。

請幫幫我。

<script> 
var vlineClient = (function(){ 
    if('{{vlineData.serviceId}}' == 'YOUR_SERVICE_ID' || '{{vlineData.serviceId}}' == 'YOUR_SERVICE_ID'){ 
    alert('Please make sure you have created a vLine service and that you have properly set the $serviceID and $apiSecret variables in classes/Vline.php file.');  

    } 


    var client, vlinesession, 
      authToken = '{{ vlineData.authToken }}', 
      serviceId = '{{ vlineData.serviceId }}', 
      profile = {"displayName": '{{ vlineData.displayName }}', "id": '{{ vlineData.id }}'}; 

    // Create vLine client 
    window.vlineClient = this.client_ = vline.Client.create({"serviceId": serviceId, "ui": true}); 
    // Add login event handler 

this.client_.on('login', onLogin); 
    this.client_.login(serviceId, profile, authToken).done(this.init_,this); 
    // Do login 

    **/////chat function** 
    this.prototype.onMessage_ = function(event) { 
     var msg = event.message, 
     sender = msg.getSender(); 
     console.log('get message'); 
     this.showAlert(sender.getDisplayName(), 
        sender.getThumbnailUrl(), 
        msg.getBody()); 
    }; 
     this.client_.on('recv:im', this.onMessage_, this); 
    **/////chat function** 









    function onLogin(event) { 
    vlinesession = event.target; 
    // Find and init call buttons and init them 
    $(".callbutton").each(function(index, element) { 
     initCallButton($(this)); 
    }); 
    } 

    // add event handlers for call button 
    function initCallButton(button) { 
    var userId = button.attr('data-userid'); 

    // fetch person object associated with username 
    vlinesession.getPerson(userId).done(function(person) { 
     // update button state with presence 
     function onPresenceChange() { 
     if(person.getPresenceState() == 'online'){ 
      button.removeClass().addClass('active'); 
     }else{ 
      button.removeClass().addClass('disabled'); 
     } 
     button.attr('data-presence', person.getPresenceState()); 
     } 

     // set current presence 
     onPresenceChange(); 

     // handle presence changes 
     person.on('change:presenceState', onPresenceChange); 



     // start a call when button is clicked 
     button.click(function() { 
       if (person.getId() == vlinesession.getLocalPersonId()) { 
      alert('You cannot call yourself. Login as another user in an incognito window'); 
      return; 
       } 
      if(button.hasClass('active')) 
          **/////chat function** 
          person.postMessage("Hello there"); 
          console.log("send message"); 
          **////chat function** 
      person.startMedia(); 
     }); 
    }); 

    } 

    return client; 
})(); 





$(window).unload(function() { 
    vlineClient.logout(); 
}); 

回答

1

無法打開您寫完的大量東西。但問題是明確的。 「this」,你期望成爲你的方法,但是你必須非常小心,因爲它會根據執行的位置來改變上下文。

如果我簡單介紹一下你的代碼,那麼它就是一個模塊模式的例子,應該如下。

var moduleExample = (function() { 
    // private variables and functions 
    var privateVar = 'bar'; 

    // constructor 
    var moduleExample = function() { 
    }; 

    moduleExample.prototype.chat = function(){ 
     alert('hello'); 
    }; 

    // return module 
    return moduleExample; 
})(); 

var my_module = new moduleExample(); 
my_module.chat(); 

請注意上面的代碼如何避免使用「this」。 另請注意,如何使用「新」創建新對象