클래스 내의 javascript에서 두 가지 유형의 함수 선언 사이의 차이점은 무엇입니까?

Question

나는 지난 2 년 동안 React과 Redux에서 일해 왔지만, inheritance을 자바 스크립트에서 사용할 때 자바 스크립트에서이 두 가지 유형의 함수 선언의 차이점을 발견했습니다.

나는 구문 bfunc = function(){이 this에서 함수를두고 있다고 가정 클래스 a 및 클래스 a 때마다 나는 다음 코드를 실행 해요 상속 클래스 b, 그것은

bfunc called from class a 
afunc called from class b 

로그 아웃했습니다 그리고 구문 afunc() {은 클래스의 프로토 타입에 함수를 넣었지만 실제로는 잘 모르겠습니다. 누군가이 행동을 설명해 주시겠습니까?

bfunc called from class a 
afunc called from class b 

Answer 1

귀하의 가정이 정확

class a { 
 
    afunc() { 
 
    console.log('afunc called from class a'); 
 
    } 
 

 
    bfunc = function() { 
 
    console.log('bfunc called from class a'); 
 
    } 
 
} 
 

 
class b extends a { 
 
    afunc() { 
 
    console.log('afunc called from class b'); 
 
    } 
 

 
    bfunc() { 
 
    console.log('bfunc called from class b'); 
 
    } 
 
} 
 

 
const bObject = new b(); 
 
bObject.bfunc(); 
 
bObject.afunc();

. console.log(bObject);을 수행하면 해당 기능이 포함 된 자체 bfunc 속성이 있음을 알 수 있습니다.

개체가 자체 속성을 가지고 있지 않은 경우에만 프로토 타입이 사용되기 때문에 부모 클래스에서 입력 했더라도 우선 적용됩니다. @Barmar는 그의 대답에 말했듯이

Answer 2

와의 세부 정보 :

이 코드의가 transpiled 무엇 바벨을 사용하여 : [Follow the link].

당신이 코드의 transpiled 버전을 아름답게 경우처럼 함수를 정의하는 것을 알 수 있습니다 :

bfunc = function() { 
    // 
    } 

것은 this에 기능을 추가합니다.
동안 :

bfunc() { 
    // 
    } 

이 프로토 타입 그 자체에 추가됩니다

b.prototype.bfunc = function() { 
    //do something 
}; 

는 prototype보다 우선합니다 this를 사용하여 bfunc를 호출하는 이유에 look here for more details을 가져 가라.