클래스 방법 대 클래스 필드 함수 대 클래스 필드 화살표 함수의 차이점은 무엇입니까?

클래스 방법 대 클래스 필드 함수 대 클래스 필드 화살표 함수의 차이점은 무엇입니까?

클래스 메소드, 함수인 클래스 속성과 화살표 함수인 클래스 속성의 차이점은 무엇입니까?하십니까?this키워드는 메소드의 다양한 변형에서 다르게 동작합니까?

class Greeter {
  constructor() {
    this.greet();
    this.greet2();
    this.greet3();
  }

  greet() {
    console.log('greet1', this);
  }

  greet2 = () => {
    console.log('greet2', this);
  }

  greet3 = function() {
    console.log('greet3', this);
  }
}
      
let bla = new Greeter();

이것은 TypeScript에서 transcript할 때의 결과 JavaScript입니다.

var Greeter = /** @class */ (function () {
function Greeter() {
    var _this = this;
    this.greet2 = function () {
        console.log('greet2', _this);
    };
    this.greet3 = function () {
        console.log('greet3', this);
    };
    this.greet();
    this.greet2();
    this.greet3();
}
Greeter.prototype.greet = function () {
    console.log('greet1', this);
};
return Greeter;
}());
var bla = new Greeter();

내 TypeScript 버전은 3.4.5입니다.

3가지 버전 모두 차이가 있습니다.이 차이는 세 가지 영역에 있습니다.

1. 누가this런타임에
2. 기능이 할당된 위치
3. 의 유형은 무엇입니까?this활자로

그들이 똑같이 일하는 곳부터 시작해 보겠습니다.클래스 필드가 있는 이 클래스를 고려합니다.

class Greeter {
  constructor(private x: string) {
  }
  greet() {
    console.log('greet1', this.x);
  }

  greet2 = () => {
    console.log('greet2', this.x);
  }

  greet3 = function () {    
    // this is typed as any 
    console.log('greet3', this.x);
  }
}

let bla = new Greeter(" me");

이 클래스에서는 세 가지 기능 호출이 모두 예상대로 인쇄됩니다.'greet* me'에 발동하면.bla

bla.greet()
bla.greet2()
bla.greet3()

런타임에 이 사용자는 누구입니까?

화살표 함수 캡처this선언 맥락에서, 그래서.this에greet2는 항상 이 함수를 생성한 클래스 인스턴스로 보장됩니다.다른 버전(방법 및 함수)은 이러한 보장을 하지 않습니다.

따라서 이 코드에서 3개 모두가 동일한 텍스트를 인쇄하지는 않습니다.

function call(fn: () => void) {
  fn();
}

call(bla.greet) // greet1 undefined 
call(bla.greet2) //greet2 me
call(bla.greet3) // greet3 undefined

이는 이벤트 핸들러 기능을 다른 구성 요소로 전달할 때 특히 중요합니다.

기능이 할당된 위치

클래스 메서드(예:greet)는 프로토타입, 필드 초기화에 할당됩니다(예:greet2그리고.greet3)이 생성자에 할당됩니다.즉,greet2그리고.greet3매번 새로운 마감을 할당해야 하기 때문에 메모리 설치 공간이 더 큽니다.Greeter인스턴스화됩니다.

이 유형 스크립트의 유형은 무엇입니까?

유형 스크립트가 유형화됩니다.this의 예로서Greeter두 가지 방법 모두에서 (greet) 및 화살표 함수(greet2입력합니다.this의 어느 것이나 마찬가지로greet3사용하려고 하면 오류가 발생합니다.this에greet3아래noImplictAny

사용 시기

1. 이 함수가 다른 구성 요소에 이벤트 처리기로 전달되지 않을 경우 메서드 구문 사용bind아니면 확실하게 해야 할 다른 것.this클래스의 인스턴스로 남음)

2. 함수가 다른 구성 요소로 전달되고 액세스 권한이 필요한 경우 화살표 함수 구문 사용this함수 내부에 있습니다.

3. 이에 대한 적절한 사용 사례를 생각할 수 없습니다. 일반적으로 피하십시오.

this키워드 차이:

위의 세 가지는 모두 동일합니다.this그러나 메소드를 다른 함수로 전달할 때 차이를 볼 수 있습니다.

class Greeter {
  constructor() {
  }
  greet() {
    console.log(this);
  }

  greet2 = () => {
    console.log(this);
  }

  greet3 = function() {
    console.log(this);
  }
}


let bla = new Greeter();
function wrapper(f){
  f();
}
wrapper(bla.greet) //undefined
wrapper(bla.greet2) //Greeter 
wrapper(bla.greet3) //undefined

하지만 첫 번째 방법이 다음과 같다는 또 다른 차이점이 있습니다.prototypeclass다른 두 명은 그렇지 않습니다.이들은 객체의 인스턴스 방법입니다.

class Greeter {
  constructor() {
  }
  greet() {
    console.log('greet1', this);
  }

  greet2 = () => {
    console.log('greet2', this);
  }

  greet3 = function() {
    console.log('greet3', this);
  }
}

let bla = new Greeter();
console.log(Object.getOwnPropertyNames(Greeter.prototype))

그 -> 약내수있다에면업가만 ->str = "my string";그리고 내가 말할 수 있는 세 가지 방법 모두에서.console.log(this.str)그리고 "내 문자열"을 출력합니다.저는 요 - 요? ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

아니요, 그들은 같은 것이 아닙니다. greet2그리고.greet3에 입니다.Greeter.prototype대신 그들은 그 인스턴스 자체에 있을 것입니다.그 말은 만약 당신이 만든다면1000 예Greeter 다른이 될 입니다.greet2그리고.greet3 인스턴스에 는 1000개의 다른 인스턴스에 대해 메모리에 저장됩니다.하지만 단 한 명의 사람이greet모든 인스턴스에 대한 메서드입니다.

가 하십시오.Greeter()

언급URL : https://stackoverflow.com/questions/56055658/what-is-the-difference-between-class-method-vs-class-field-function-vs-class-f