Question

我试图了解箭头功能的范围。我在Angular中实现了一个小程序，但是有点困惑。在下面的代码中，我不太明白为什么它会绑定到TestComponent

export class TestComponent {
 a: string = "Hello World";
 myArrowFunction = () => {
  console.log(this.a); //
 }
 constructor(){
  myArrowFunction(); //output: "Hello World"
 }
}

箭头函数没有自己的this，因此this绑定到父级，是吗？ myArrowFunction属于TestComponent，因此this中的myArrowFunction应该是未定义的，但是在上面的示例中，this绑定到TestComponent为什么？

    test = {
        b: "Hello World",
        foo: () => {
            console.log(this.b);
        }
    }
        
    test.foo(); //output: undefined

与上面的javascript代码有何区别？那里this.b是未定义的。

Answer 1

这是正常现象，因为箭头功能是指上层对象，因此是您的实例。


//console.log(this)
class TestComponent {
    myArrowFunction = () => {// function set in instance
        console.log(this); //
    }
    myFunction() {// function set in prototype
        console.log(this); //
    }
    constructor() {
        this.a = "Hello World";
        this.myArrowFunction(); //output: "Hello World"
    }
}

function A() {
    this.foo = () => { console.log(this) };// A instance
    this.foo()
}
A.prototype.bar = () => { console.log(this) };// global
new A();
//const a = new TestComponent();

为什么Typescript箭头函数属性可以访问此

1 个答案: