I make a class for pagination, I use a wrapper for jquery inside it - the class Request . The getRecords method is a callback that hangs on $(window).scroll() , inside it calls the Request class to make a request, inside of which onRequest is a callback that calls $.ajax() . Inside onRequest , this already does not contain a Pagination but contains an object containing the request data.

 export class Pagination{ constructor (params? :Object){ //.. more actions this.getRecords(); fn.setOnWindowListener('scroll','pagination',null,(e) => {this.setScrollEvent(e)}); } private setScrollEvent = (e) :void =>{ let pos = $(e.currentTarget).scrollTop() + this.paginationHeight; let height = $(document).height(); if(pos >= height && !this.doRequest) this.getRecords(); }; public getRecords = () :void =>{ this.doRequest = true; //здесь this - ссылка на Pagination return new Request({ url: this.url + this.currentPage, type: `GET`, dataType: this.requestDataType, onRequest: (data) =>{ //а здесь this превратился в объект $.ajax() this.doRequest = false; this.currentPage++; this.onRecordsLoaded(data); } }).exec(); }; }

The question is how to throw this from Pagination to onRequest so that inside the onRequest Holy Island islands of Pagination ?

ps

var _self = this; course, you can create a variable like before before new Request() like var _self = this; and further in onRequest pull it, but it will be a crutch pulling approach used in es5. This is not an option, because I want to make everything beautiful.

pps

So far, I have done a context transfer, passing this in getRecords ,

 public getRecords = (context: Pagination) :void =>{ context.doRequest = true; return new Request({ url: context.url + context.currentPage, type: `GET`, dataType: context.requestDataType, onRequest: (data) =>{ context.doRequest = false; context.currentPage++; context.onRecordsLoaded(context.context, data); } }).exec(); };

And in the constructor, in the same way, remember the class context from which the Pagination instance was created:

 constructor (context :Object, params? :Object){ this.context = context;

    1 answer 1

    callback is a function. When a function is called, its context is set depending on how it was called and, in general, does not match the context of the external function.

    The easiest way to pass context to the callback function is through a closure and a local variable:

     var self = this; /**/ (data) => { // Здесь this изменился - но self осталась прежней! }

    Sometimes this variable is also called that or _this . If you read the code of the libraries used - you should have paid attention to this construction.

    Another way to bind the context is to use bind:

     /**/ ((data) => { // Здесь this изменился - но self осталась прежней! }).bind(this);

    The bind method binds the function to the context, making the internal context independent of the calling method.

    If you wrote in javascript or in the latest version of typescript, you could also use the arrow functions from ECMA 2015, which were specifically created to solve this problem - but for your versioncript version, this solution is probably not available. Maybe you just need to update the typescript compiler ...

    • ((data) => { }).bind(this); o_O - Qwertiy ♦
    • @Qwertiy also look at it myself. But if the author of the question asserts that this is lost with him - you have to believe him. - Pavel Mayorov
    • @PavelMayorov ts version - 2.x. I think the problem is because of the Request class, in which the request is $.ajax(options) .done(data => this.onRequest(data)) .fail(err => this.onError(err)) .always(data => this.onComplete(data)); that is where the context is lost. Although in theory, should not - sanu0074
    • If the context is stored inside by the means of the language - not to "lose" it from the outside. - Pavel Mayorov