0

I'm trying to learn object oriented javascript by tidying up some messy JavaScript and wanted to make it more object oriented however the methods seem to start failing when i pass variables to them.

e.g. This is how i think it should work:

function object() {
    this.helloWorld = function() {
      alert("hello world");
    }; 
    this.alertString = function(string) {
      alert(string);
    }
    this.init = function() {
      string = "Alert String";
      this.helloWorld();
      this.alertString(string);
    }
} 
var objectInstance = new object();
objectInstance.init();

So this all works fine however when doing similar with ajax call in below, my functions fail at this.redirectDetect(result);

this.search = function() {
    if (this.runsearch == 1) {
        this.disableAction();
        term = $("#search").val();
        this.buildSearchLayout();
        $('.sidebar-main').css('opacity', '0');
        $.ajax({url: "/catalogsearch/result/index/", type: "get", data: { ajax: "1", q: term}, dataType: "json",success: function(result){
            this.redirectDetect(result);
            this.renderAjax(result, term);
            this.noResults();
            this.initJavascript();
        }});
    }
};
this.redirectDetect = function(result) {
    if(result['html']['products_list'].split('<li class="item product product-item">').length - 1 == 1) {
        redirect = result['html']['products_list'].match(/href="(.*?)" class="product/)[1];
        window.location.href = redirect;
        return;
    }
};
harri
  • 494
  • 11
  • 26
  • This has nothing to do with arguments. Look at the console in your browser's developer tools. It will tell you that `this.redirectDetect` is not a function (because `this` isn't what you think it is). – Quentin Oct 06 '17 at 15:15
  • 2
    A common way to get around this is: `function object() { var that = this; //... now use that in place of this everywhere. }` – Capstone Oct 06 '17 at 15:17
  • I'm not getting any errors on console however ive just twigged that yeah its not a function, ill figure it out from that i think – harri Oct 06 '17 at 15:18
  • I just don't get why it works in my first example. – harri Oct 06 '17 at 15:20
  • The this that trick works but i kinda want to use this rather than that :P Can you explain some more? – harri Oct 06 '17 at 15:26
  • 1
    Your first example works because the function gets invoked with the same `this`. Your second example doesn't work because it's a callback that gets invoked with something else set as `this`. – Lennholm Oct 06 '17 at 15:26
  • Is the ajax function a callback so this is no longer this? so if i replace this in just there ill be fine? – harri Oct 06 '17 at 15:31
  • The *success* function you provide to the `$.ajax` function is the callback. When the success callback gets invoked by the ajax function, it sets something else as `this`. That's why people suggested you store your own `this` as a closure variable called `that` and then use `that` in the callback instead. – Lennholm Oct 06 '17 at 15:36
  • Other possible solutions are to `bind()` your success callback or to define it as an ES6 arrow function – Lennholm Oct 06 '17 at 15:39
  • Thanks so much guys ! I have got it i think all working! – harri Oct 06 '17 at 15:42

0 Answers0