lambdasとtypescriptの関数のキーワードthisを使用するとどうなります

Question

私はAngular 2プロジェクトにTypescriptを使用しています。私は、ラブマの式と関数の中でキーワードthisを使用すると、thisは異なるものを参照することに気付きました。

たとえば、次のような角型コンポーネントがあるとします。

export class MyComponet { 
isActive = true; 
names = [ "john", "jeff", "jared" ]; 

doSomethingWithLambda() { 
    names.forEach((value, index) => { 
    if(this.isActive) { //this.isActive refers to MyComponent.isActive 
    //do something... 
    } 
    }); 
} 

doSomethingWithFunction() { 
    names.forEach(function(value, index) { 
    if(this.isActive) { //this.isActive is undefined, since this refers to the function 
    //do something 
    } 
    }); 
} 

doSomethingWithFunction2() { 
    let isActive = this.isActive; 
    names.forEach(function(value, index) { 
    if(isActive) { //if we change isActive will this also change MyComponent.isActive? 
    //do something 
    } 
    }); 
} 
} 

ここで実際に何が起きているのですか（話すのはどうでしょう）？ thisの裏にある魔法は、「正しく」外部クラスのフィールドを参照できるようにするものですか？私は関数内のthisが関数自体を参照することを理解しています。

また、ローカル変数にMyComponent.isActiveを参照するdoSomethingWithFunction2メソッドがあります。そのローカル変数を変更した場合、それは参照変数を変更するようなものでしょうか？ （関係なく、整数/数またはJSON {}のような「オブジェクト」のような「プリミティブ」という）

Answer 1

脂肪矢印関数の構文は、の省略形である。

function() { }.bind(this); 

bindのJavaScript ES5法でありますこれと同等：

に関しては

Function.prototype.bind = function bind(context) { 
    var func = this; 
    return function() { 
    return func.apply(context, arguments); 
    }; 
} 

また、私はdoSomethingWithFunction2方法tを持っていますhatはMyComponent.isActiveをローカル変数に参照します。そのローカル変数を変更した場合、それは参照変数を変更するようなものでしょうか？ （整数/数値のような「プリミティブ」やJSON {}のような「オブジェクト」に関係なく）

JavaScriptは、変数がポインタのようなもので、プリミティブとコピーオンライトオブジェクト）は、変更されたときに参照される値を変更します。再割り当てによって元の値は変更されません。 isActive = false;しかし、this.isActive = falseは実際にはの変数をthisに再割り当てすることになりましたが、これはうまくいけば正しく割り当てられました。

Answer 2

これは、lambda functionがTSでどのように実装されているかと関係があります。この矢印関数は字句的に推測されているので、以下のコードと一直線になります。

function Person（）{ var self = this; //一部はselfの代わりにthatを選択します。 // 1つを選択して一貫性を保つ。 self.age = 0;

たsetInterval（関数growUp（）{// コールバック//値が予測対象となっているself変数を指す self.age ++;} 、1000）。 } ラムダ関数の内部では、実際にはこれがコンテキストではなく、コンテキストに近いです。これは実際の実装ではないかもしれませんが、何が起こっているのかを理解するためにはるかに近いでしょう。

は今、あなたは私の無力this外にいるときwindow

ラムダ関数は、JavaScriptのbind functionに似ているだろうグローバルVARを指します。

Protipラムダ関数がどのように変換されているかをあなたのtranspiled JSに見てください。