JS에서 클래스 속성을 사용하는 방법

오늘은 JS에서 클래스를 사용하는 방법을 알려드리겠습니다. 클래스는 인스턴스의 프로토타입과 동일합니다. 클래스에 정의된 모든 메서드는 인스턴스에 상속됩니다 메서드 앞에 정적 키를 추가하면 이 단어가 나타납니다. 메소드가 인스턴스에 상속되지 않는다는 의미입니다. 아래 예를 들어 보겠습니다.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
Foo.classMethod()//'hello'
varfoo=newFoo();
foo.classMethod()
//TypeError:foo.classMethodisnotafunction

위 코드에서 Foo 클래스의 classMethod 메서드 앞에는 static 키워드가 있는데, 이는 해당 메서드가 정적 메서드이고 인스턴스 대신 Foo 클래스(Foo.classMethod())에서 직접 호출할 수 있음을 나타냅니다. 클래스 푸. 인스턴스에서 정적 메서드를 호출하면 해당 메서드가 존재하지 않는다는 오류가 발생합니다.

상위 클래스의 정적 메서드는 하위 클래스에서 상속될 수 있습니다.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{}

Bar.classMethod();//'hello' 위 코드에서 부모 클래스 Foo에는 정적 메서드가 있고 하위 클래스 Bar는 이 메서드를 호출할 수 있습니다.

수퍼 개체에서 정적 메서드를 호출할 수도 있습니다.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{
staticclassMethod(){
returnsuper.classMethod()+',too';
}
}
Bar.classMethod();静态属性[javascript]view plaincopy
classFoo{}
Foo.prop=1;
Foo.prop//1 上面的写法为Foo类定义了一个静态属性prop。

현재는 이 방식만 가능합니다. 왜냐하면 ES6에서는 Class 내부에 정적 메소드만 있고 정적 속성은 없다고 명확하게 규정하고 있기 때문입니다.

[javascript]view plaincopy
//以下两种写法都无效
classFoo{
//写法一
prop:2
//写法二
staticprop:2
}

Foo.prop//undefine ES7에는 현재 Babel 트랜스코더에서 지원되는 정적 속성에 대한 제안이 있습니다.

이 제안은 인스턴스 속성과 정적 속성 모두에 대한 새로운 작성 방법을 규정합니다.

(1) 클래스의 인스턴스 속성

클래스의 인스턴스 속성은 방정식을 사용하여 클래스 정의에 기록될 수 있습니다.

[javascript]view plaincopy
classMyClass{
myProp=42;
constructor(){
console.log(this.myProp);//42
}
}

위 코드에서 myProp은 MyClass의 인스턴스 속성입니다. MyClass 인스턴스에서 이 속성을 읽을 수 있습니다.

과거에는 인스턴스 속성을 정의할 때 클래스의 생성자 메서드에서만 작성할 수 있었습니다.

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
} 上面代码中， 构造方法constructor里面， 定义了this.state属性。
有了新的写法以后， 可以不在constructor方法里面定义。
[javascript]view plaincopy
classReactCounterextendsReact.Component{
state={
count:0
};
}

이번 글쓰기 방식은 이전보다 더 명확해졌습니다.

가독성을 위해 새로운 작성 방법을 사용하면 생성자에 정의된 인스턴스 속성을 직접 나열할 수 있습니다.

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
state;
}

(2) 클래스의 정적 속성

클래스의 정적 속성은 위의 인스턴스 속성 작성 방법 앞에 static 키워드만 추가하면 됩니다.

[javascript]view plaincopy
//老写法
classFoo{}
Foo.prop=1;
//新写法
classFoo{
staticprop=1;
}

위 코드에서는 기존 작성 방식의 정적 속성이 클래스 외부에 정의되어 있습니다. 전체 클래스가 생성된 후 정적 특성이 생성됩니다. 이는 이 정적 속성을 무시하기 쉽게 만들고, 관련 코드를 함께 묶어야 한다는 코드 구성 원칙을 준수하지 않습니다. 또한 새로운 작성 방식은 할당 처리 대신 명시적 선언(선언적)으로 더 나은 의미를 갖습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

실행할 때 JS 엔진은 어떻게 생겼나요?

AJAX 사용에서 비동기 동기 요청을 구현하는 방법

JS 개발에서 jssplice() 메서드를 사용하는 방법

위 내용은 JS에서 클래스 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!