How can I access parent object "this" from its function in JS?

Question

(function( $ ) {

    var TagHolder = function(element,options){

        this.property1 = options.p1;
        this.id = 0;

        this.init = function(){
           $('a').on('click',function(e){
              e.preventDefault();

              var id = $(this).attr('id');
              this.id = id;
           });
        }
    }

    $.fn.TagHolderProperty = function(options) {
        return new TagHolder(this, options);
    }
})( window.jQuery );

How can I access this object instance in line this.property1 = options.p1; from line this.id = id; so I can set the id property?

Create a ref of `this` i.e. `var _this=this` in `TagHolder ` and then set `_this.id = id` — Satpal, Jan 15 '19 at 05:26
or you can use ES6 arrow function, so you can replace the `function(e)` with `() =>` on click function. — He Wang, Jan 15 '19 at 05:28
jQuery binds element as context to all handlers. So `$(this)` refers to attached element. — Rajesh, Jan 15 '19 at 05:29
@Speir arrow function is a bad option. It beats the `$(this)` feature of jQuery — Rajesh, Jan 15 '19 at 05:30
@Rajesh it depends on your preference, in this case I think you are right. — He Wang, Jan 15 '19 at 05:32

score 1 · Answer 1 · answered Jan 15 '19 at 05:36

1

Use

self = this;

In your TagHolder function and then do

self.id = id;

In your init function

answered Jan 15 '19 at 05:36

saurabh singh

419
4
5

score 0 · Accepted Answer · answered Jan 15 '19 at 05:39

Store a reference to this in a variable in the parent function, then use self in to reference the parent functions contexts e.g. self.id

(function( $ ) {

    var TagHolder = function(element,options){
       var self = this;


        this.property1 = options.p1;
        this.id = 0;

        this.init = function(){
           $('a').on('click',function(e){
              e.preventDefault();

              var id = $(this).attr('id');
              self.id = id;
           });
        }
    }

    $.fn.TagHolderProperty = function(options) {
        return new TagHolder(this, options);
    }
})( window.jQuery );

How can I access parent object "this" from its function in JS?

2 Answers2