Can I avoid using the word “this” inside Typescript when calling a function that came in through a constructor?

问题

I have:

class AdminHomeController {

    private config1; // I tried different variations here but none worked
    public config2;  //

    constructor(
                 private $scope: IAdminHomeControllerScope
               ) {
                     this.config = $scope.config; // << this works
                 }

    static $inject = [
        '$scope'
    ];

    configChanged = (clear) => {
        this.config.clear();
    };

}

This code works and this.config has all the methods I need. However is there a way that I can remove the need for the this? What I would like to be able to do is to code the following:

configChanged = (clear) => {
    config.clear();
};

I tried with many different variations but I cannot get it to work.

Here's an example of the same code before changing to Typescript:

angular.module('admin')
    .controller('AdminHomeController', [
        '$http',
        '$q',
        '$scope',
        'utilityService',
        adminHomeController]);

function adminHomeController(
    $http,
    $q,
    $scope,
    utilityService
    ) {

    var app = $scope.app;
    var config = app.config;
    var home = this;
    var util = utilityService;

    home.autoSave = false;
    home.data = {};
    home.entityType = null;
    home.forms = { grid: null, modal: null };
    home.grid = { view: [], data: [] };
    home.modal = { visible: false };
    home.row = {};
    home.rowSelected = null;

    home.configChanged = function (clear) {
        config.put();
        if (clear) {
            home.grid.backup = [];
            home.grid.data = [];
        }
    };

回答1:

As djechilin said:

If you omit "this," the interpreter will simply look for the variable name in local, closured and global scopes, not actually look up object properties

So you can potentially do that in TypeScript by moving the function definition into the body of the constructor (where you have access to the closured $scope variable). Here we also close over config and then use it in the function:

class AdminHomeController {

    configChanged: ()=>void; // Need to declare the function  

    constructor(private $scope: any) {
        var config = $scope.config;
        this.configChanged = ()=> { // And then assign it
            config.clear();
        };
    }
}

As you can see, it's not elegant. You have function definition + declaration split. Also, the constructor body is becoming needlessly heavy.

TypeScript is not to blame here. It's just JavaScript.

回答2:

In Javascript definitely not, and in Typescript I'm pretty sure no. References in Javascript bind lexically, not whatever the other way is called. If you omit "this," the interpreter will simply look for the variable name in local, closured and global scopes, not actually look up object properties. You would need some sort of magical flag to say "this variable is an object property," and the way this is implemented is with "this."

This is very usual in Javascript. Compiled languages like Java don't suffer this problem, and I'm not sure about other dynamic languages. It's not necessarily hard to solve; it's just not how JS has done things (arguably wrongly).

来源：https://stackoverflow.com/questions/24977814/can-i-avoid-using-the-word-this-inside-typescript-when-calling-a-function-that

标签

javascript

angularjs

typescript