Reference this for member functions in literal objects

Question

0.00/5 (No votes)

See more:

Here is the modular way of js literal object.
In the 'display' function, 'this' refers normally.
But in 'addEvt' this refers to something else.
Since the object where the click event occurred becomes 'this', this pointing to a member function cannot be used. How can I solve this problem?

What I have tried:

let s_text = {};
var currentPanel = function(){
       var prefix = '';
       var subtext = '';
       return {
           setText: function(text){
              subtext = text;
           },
           getText: function(){
              return subtext;
           },
           display: function(text){
               this.setText(text);     
               return '<span>'+subtext+'</span>'
           },
           addEvt: function(){
               document.getElementById('canvas'+id).onclick = function(){ 
                   let args = {};                                   
                   var id = $(this).attr('data-root');                        
                   args['page' = $(this).attr('data-page');
                   args['c_id'] = $(this).attr('data-ole');
                   args['panel'] = $(this).attr('data-target');
                   if(this.getText(args['page'])){
                      /* here, 'This' is not object*/
                      args['length'] = this.getText(args['page']).length;
                   }
                   return args;
               }
           }
       }
}
var foo = Object.create(currentPanel());
s_text = foo.addEvt();

Posted 23-Nov-22 5:21am

Chopin2001

Updated 24-Nov-22 2:05am

v4

Add a Solution

Comments

Member 15627495 24-Nov-22 11:25am

 $(selector).Attr(....) is a jquery use.

maybe try it by 'native Js'

var or let ?

var myVar; is a global var, reachable from all js pattern in your page. //
let anothervar; seems to be more reliable with your object and its inner vars.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2022-11-24T02:05:00

The problem is, you're not referencing this within the addEvt function; you're referencing it from the handler for the onclick event raised on the canvas.

Within that event handler, you seem to be expecting this to point to both the element that was clicked, and the object the event handler was added from.

You'll need to capture the outer this reference. You'll also need to fix up your $(this) references, and fix the syntax error in your function.

JavaScript

addEvt: function(){
   const me = this;
   document.getElementById('canvas'+id).onclick = function(e){
       const el = $(e.target);
       const args = {};                                   
       var id = el.attr('data-root');                        
       args['page'] = el.attr('data-page');
       args['c_id'] = el.attr('data-ole');
       args['panel'] = el.attr('data-target');
       
       const text = me.getText(args['page']);
       if (text){
          args['length'] = text.length;
       }
       
       return args;
   }
}

Once you've sorted that, you'll need to check your logic. For example, returning an array from the onclick event handler isn't going to do what you think it will do.