为什么此Typescript / jscript代码段的范围出错

Question

the code below is inside a "view" and is having scope issues with "this"

Typescript:

getInvitations() {
        var invitationsUri = "/Api/Invitations/";

        $.ajax({
            url: invitationsUri ,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json'
        })
            .done((result) => {
                $.each(result, (index, item) => {
                    var invitation = new Invitation();
                    invitation.InvitationId(item.InvitationId);
                    invitation.Invited(true);
                    invitation.Email(item.Email);

                    this.Business.Invitations.push(invitation);
                });
            })
            .fail((x, y, z) => {
                alert(x + '\n' + y + '\n' + z + ' - failed to get invitations');
            });
    }

    getUsers() {
        var usersUri = "/Api/Users/";

        $.ajax({
            url: usersUri,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json'
        })
            .done((result) => {
                $.each(result, (index, item) => {
                    var user = new User();
                    user.Id(item.Id);
                    user.UserName(item.UserName);
                    user.Email(item.Email);

                    this.Business.Users.push(user);
                });
            })
            .fail((x, y, z) => {
                alert(x + '\n' + y + '\n' + z + ' - failed to get users');
            });
    }

The first method works well, the second thinks "this" is referring to "item", so it does not recognize "Business" as a property and with that the objective is not achieved.

Any ideas what could be happening here?

EDIT: Here is the generated code (jscript)

BusinessView.prototype.getInvitations = function () {
        var _this = this;
        var invitationsUri = "/Api/Invitations/";

        $.ajax({
            url: invitationsUri,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json'
        }).done(function (result) {
            $.each(result, function (index, item) {
                var invitation = new Invitation();
                invitation.InvitationId(item.InvitationId);
                invitation.Invited(true);
                invitation.Email(item.Email);

                _this.Business.Invitations.push(invitation);
            });
        }).fail(function (x, y, z) {
            alert(x + '\n' + y + '\n' + z + ' - failed to get invitations');
        });
    };

    BusinessView.prototype.getUsers = function () {
        var _this = this;
        var usersUri = "/Api/Users/";

        $.ajax({
            url: usersUri,
            type: 'GET',
            dataType: 'json',
            contentType: 'application/json'
        }).done(function (result) {
            $.each(result, function (index, item) {
                var user = new User();
                user.Id(item.Id);
                user.UserName(item.UserName);
                user.Email(item.Email);

                _this.Business.Users.push(user);
            });
        }).fail(function (x, y, z) {
            alert(x + '\n' + y + '\n' + z + ' - failed to get users');
        });
    };

Answer 1

Inside a jQuery .each() callback, this is always set by jQuery so it won't be what this was in a higher level scope. If you need to access the value of this from the higher level scope, then the usual work-around is to save it to a local variable at that higher level scope and you can then access that local variable from within the .each() callback function.

From the code snippet you included in your answer, it is not clear what this value you want to access. You may also need to know that call a regular function such as calling getInvitations() will change the this pointer to point to either the global object or in strict mode to undefined . this is set by the javascript interpreter on every function call based on how the function call is made.

Answer 2

您在每个调用中都得到正确的lambda值，即$.each(result, (index, item) => {您应该对函数定义执行相同的操作，以确保在整个过程中， this的作用域都是正确的，即getInvitations = () => {和getUsers = () => {