클래스 메서드 안에 스크립트 "this"를 입력합니다.

클래스 메서드 안에 스크립트 "this"를 입력합니다.

저는 이것이 고통스러울 정도로 기본적인 것이라는 것을 알지만, 저는 그것에 제 머리를 감는 데 어려움을 겪고 있습니다.

class Main
{
     constructor()
     {
         requestAnimationFrame(this.update);  //fine    
     }

     update(): void
     {
         requestAnimationFrame(this.update);  //error, because this is window
     }

}

프록시가 필요한 경우인 것 같으니 Jquery를 사용해 보겠습니다.

class Main
{
     constructor()
     {
         this.updateProxy = $.proxy(this.update, this);
         requestAnimationFrame(this.updateProxy);  //fine    
     }

     updateProxy: () => void
     update(): void
     {
         requestAnimationFrame(this.updateProxy);  //fine
     }

}

그러나 액션스크립트 3 배경에서 볼 때 여기서 무슨 일이 일어나고 있는지 잘 모르겠습니다.죄송합니다. 자바스크립트가 어디서 시작하고 TypeScript가 끝나는지 잘 모르겠습니다.

updateProxy: () => void

그리고 저는 제가 이것을 제대로 하고 있는지 확신하지 못합니다. 않는 은 우리 반이 a()입니다로 있다는 입니다.aProxy()같은 글을 두 번이나 쓰는 것 같은데요?정상인가요?

.this화살표 함수를 통해 TypeScript 방식을 캡처했습니다.앤더스의 말을 인용하자면:

this입니다입니다.

다음은 제가 이점을 위해 사용하고 싶은 방법입니다.

class test{
    // Use arrow functions
    func1=(arg:string)=>{
            return arg+" yeah" + this.prop;
    }
    func2=(arg:number)=>{
            return arg+10 + this.prop;
    }       

    // some property on this
    prop = 10;      
}

TypeScript Playground에서 보기

할 수 .this기능 호출 외부에 캡처됩니다.

var _this = this;
this.prop = 10;
this.func1 = function (arg) {
    return arg + " yeah" + _this.prop;
};

.this값음)일 수 )window는 사용하지 않습니다는 사용되지 않습니다.

자세한 내용: "TypeScript에서의 이해" (4:05) – YouTube

이렇게 방법을 쓰면 '이것'은 당신이 기대하는 대로 취급될 것입니다.

class Main
{
    constructor()
    {
        requestAnimationFrame(() => this.update());
    }

    update(): void
    {
        requestAnimationFrame(() => this.update());
    }
}

또 다른 옵션은 '이것'을 함수 호출에 바인딩하는 것입니다.

class Main
{
    constructor()
    {
        requestAnimationFrame(this.update.bind(this));
    }

    update(): void
    {
        requestAnimationFrame(this.update.bind(this));
    }
}

타이프스크립트 언어 사양 72페이지 https://github.com/Microsoft/TypeScript/blob/master/doc/TypeScript%20Language%20Specification.pdf?raw=true 참조

화살표 함수식

예에서

class Messenger {
 message = "Hello World";
 start() {
 setTimeout(() => alert(this.message), 3000);
 }
};
var messenger = new Messenger();
messenger.start();

화살표 함수식을 사용하면 콜백이 주변의 '시작' 방법과 동일하게 됩니다.콜백을 표준 함수식으로 쓰면 로컬 변수에 복사하는 등 주변에 대한 액세스를 수동으로 정렬할 필요가 있습니다.

이것은 실제 생성된 자바스크립트입니다.

class Messenger {
 message = "Hello World";
 start() {
 var _this = this;
 setTimeout(function() { alert(_this.message); }, 3000);
 }
};

파티에 매우 늦었지만, 향후 이 질문의 방문자들에게 다음 사항을 고려해 보는 것이 매우 중요하다고 생각합니다.

수용된 답변을 포함한 다른 답변들은 중요한 점을 놓치고 있습니다.

myFunction() { ... }

그리고.

myFunction = () => { ... }

후자가 포착하는 것을 제외하고는 "같은 것이 아닙니다.this".

첫 두 구문은 , 합니다()).this). 이는 번역된 자바스크립트에서 명확하게 확인할 수 있습니다.

완료 방법:

myFunction = function() { ... }

두 번째 구문도 동일하지만 캡처는 없습니다.

따라서 대부분의 경우 화살표 구문을 사용하면 개체에 바인딩하는 문제가 해결되지만, 동일하지 않으며 속성 대신 프로토타입에 적절한 기능을 적용하고 싶은 경우가 많습니다.

이 경우 프록시를 사용하거나.bind()사실은 정확한 해결책입니다.(가독성에 어려움을 겪고 있지만)

여기서 더 자세히 읽어 보십시오. (주로 TypeScript에 관한 것이 아니라 원칙이 있습니다.)

https://medium.com/ @charpeni/arrow 기능-급속물-might-생각만큼 위대하지 않은-3b3551c440b1

https://ponyfoo.com/articles/binding-methods-to-class-instance-objects

문제는 콜백 기능을 전달할 때 발생합니다.콜백이 실행될 때까지 "이것"의 값이 윈도우, 콜백을 호출하는 컨트롤 또는 다른 것으로 변경되었을 수 있습니다.

호출할 함수에 대한 참조를 전달하는 지점에서 항상 람다 식을 사용해야 합니다.예를들면

public addFile(file) {
  this.files.push(file);
}
//Not like this
someObject.doSomething(addFile);
//but instead, like this
someObject.doSomething( (file) => addFile(file) );

이것은 다음과 같은 것으로 압축됩니다.

this.addFile(file) {
  this.files.push(file);
}
var _this = this;
someObject.doSomething(_this.addFile);

addFile 함수는 특정 개체 참조(_this)에서 호출되기 때문에 호출자의 "this"를 사용하지 않고 대신 _this 값을 사용합니다.

간단히 말해, 이 키워드는 항상 함수를 호출한 개체에 대한 참조를 가지고 있습니다.

자바스크립트에서는 함수가 변수에 불과하기 때문에 전달할 수 있습니다.

예:

var x = {
   localvar: 5, 
   test: function(){
      alert(this.localvar);
   }
};

x.test() // outputs 5

var y;
y.somemethod = x.test; // assign the function test from x to the 'property' somemethod on y
y.test();              // outputs undefined, this now points to y and y has no localvar

y.localvar = "super dooper string";
y.test();              // outputs super dooper string

jQuery로 다음을 수행할 때:

$.proxy(this.update, this);

당신이 하고 있는 일은 그 맥락을 우선시하는 것입니다.무대 뒤에서 jQuery가 다음과 같은 내용을 알려드립니다.

$.proxy = function(fnc, scope){
  return function(){
     return fnc.apply(scope);  // apply is a method on a function that calls that function with a given this value
  }
};

이렇게 하는 게 어때요?"myClass" 유형의 전역 변수를 선언하고 클래스의 생성자에서 초기화합니다.

var _self: myClass;

class myClass {
    classScopeVar: string = "hello";

    constructor() {
        _self = this;
    }

    alerter() {
        setTimeout(function () {
            alert(_self.classScopeVar)
        }, 500);
    }
}

var classInstance = new myClass();
classInstance.alerter();

참고: "자신"을 이미 특별한 의미로 사용하지 않는 것이 중요합니다.

언급URL : https://stackoverflow.com/questions/16157839/typescript-this-inside-a-class-method