在Typescript中对子进行范围限定的问题 [英] Issue with child scoping of this in Typescript

问题描述

这是 ALMOST 和我之前读过的每个这个范围界定问题一样，除了一个与之相关的细微差别之外（imo） ）提出这个问题。

This is ALMOST the same as every other this scoping question I have read so far other than one slight difference which makes it relevant (imo) to ask this question.

现在我的问题是使用Knockout和Typescript确定这个，所以给出了以下：

Now originally my problem was scoping of this with Knockout and Typescript, so given the following:

class ViewModel
{
    public SomeObservableArray = new ko.observableArray();

    public AddToTheObservableArray(someJsonData: any) 
    {
        this.SomeObservableArray.push(new SomePojo(someJsonData));
    }
}

所以这个位会爆炸，因为Typescript会让你认为这个是类实例，但实际上它是另一个因为ajax回调或视图元素，无论覆盖此关键字的情况。

So the this bit in the above code would blow up because Typescript makes you think that this is the class instance, but in reality it is some other this because of an ajax callback or view element, whatever the scenario that overrides the this keyword.

所以为了解决这个问题，大多数解决方案都是将该代码移动到类的构造函数中，我个人觉得这很糟糕，但是考虑到使用TypeScript带来的其他好处，这种少量的恐怖是可以接受的。所以我们都在同一页面上，下面的代码修复了上述问题：

So to fix that, most solutions are to move that code into the constructor for the class, which I personally find horrible, however this small amount of horror is acceptable given the other benefits I get from using TypeScript. So just so we are all on the same page, the code below fixes the above problem:

class ViewModel
{
    public SomeObservableArray = new ko.observableArray();
    public AddToTheObservableArray = (someJsonData: any) => Void;

    constructor
    {
        this.AddToTheObservableArray = (someJsonData: any) => {
            this.SomeObservableArray.push(new SomePojo(someJsonData));
        };
    }
}

我只是将这个示例代码写在我的上面所以我为任何错别字等道歉，但它是常见的问题和常见的解决方案/解决方法。

I am just writing this example code off top of my head so I apologize for any typos etc, but it hilights the common issue faced and the common solution/work around.

现在！这个问题我有下一步，我有这样的代码：

NOW! the issue I have is the next step from here, I have code like so:

class ViewModel
{
    public SomeObservableArray = new ko.observableArray();
    public AddToTheObservableArray = (someJsonData: any) => Void;


    constructor
    {
        this.PopulateObservableArray = (someJsonArrayData: any) => {
            this.SomeObservableArray.removeAll();
            someJsonArrayData.forEach(function(someJsonData) {
                this.SomeObservableArray.push(new SomePojo(someJsonData));
            });
        };
    }
}

输出的代码如下：

var ViewModel = (function(){
    function ViewModel(){
        var _this = this;

        this.SomeObservableArray = new ko.observableArray();

        this.AddMultipleEntitiesToObservableArray = function(someJsonArrayData) {
            _this.SomeObservableArray.removeAll();
            someJsonArrayData.forEach(function(someJsonData) {
                this.SomeObservableArray.push(new SomePojo(someJsonData));
            });
        }
    };
    return ViewModel;
})();

我再次为任何拼写错误道歉，因为我只是简化了较大的项目输出，但主要是看到这里是forEach方法子这个仍然存在，所以我得到错误 this.SomeObservableArray是未定义的。

Again I apologise for any typos as I am just simplifying the larger projects output, however the main thing to see here is that the forEach methods child this remains, so I get the error this.SomeObservableArray is undefined.

我相信一个可能的解决方案是将foreach提取出来并使其成为自己的方法，然而这就像感觉就像在blutack上粘贴cellotape一样，所以我想知道是否有一些更优雅的解决方案或一些不法行为，我可以改为至少不要让它更难以理解。

I am sure 1 possible solution is to extract the foreach out and make it its own method, however this then feels like sticking cellotape over blutack, so I was wondering if there is some more elegant solution or some wrongdoing on my part which can be changed to at least not have to make it more unreadable.

推荐答案

是有，而且它实际上很容易。只需在任何方法上使用lambda表达式，并将其范围限定为更高函数的范围。在您的情况下，您需要将您的示例重写为：

Yes there is, and it's actually pretty easy. Just use the lambda expression on any method you want to get scoped to the scope of the higher function. In your case you need to rewrite your example as:

class ViewModel
{
    public SomeObservableArray = new ko.observableArray();
    public AddToTheObservableArray = (someJsonData: any) => Void;


    constructor()
    {
        this.PopulateObservableArray = (someJsonArrayData: any) => {
            this.SomeObservableArray.removeAll();
            someJsonArrayData.forEach((someJsonData) => {
                this.SomeObservableArray.push(new SomePojo(someJsonData));
            });
        };
    }
}

PS：它被视为最佳做法操纵每个中的可观察数组，因为每次更改时都会通知该数组的订阅者。只需将数据推送到临时数组，然后将此数组设置为可观察数组的值（仅限我的2个。）

这篇关于在Typescript中对子进行范围限定的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！