es6의 클래스에 정적 속성이 있습니까?

es6의 클래스에는 정적 속성이 없습니다. 정적 속성은 클래스 자체의 속성입니다. 즉, 클래스(Class.propname) 내부에 직접 정의된 속성이므로 인스턴스화할 필요가 없습니다. 그러나 ES6에서는 Class 내부에 정적 메서드만 있고 정적 속성은 없다고 규정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

ES6에서는 객체에 대한 템플릿으로 클래스(class)가 도입되었으며, 클래스는 class 키워드를 통해 정의할 수 있습니다.

수업의 본질은 기능입니다.

객체 프로토타입 작성을 더 명확하고 객체 지향 프로그래밍의 구문과 더 유사하게 만드는 구문 설탕으로 간주할 수 있습니다.

ES6 클래스 정적 메서드, 속성 및 인스턴스 속성

클래스는 인스턴스의 프로토타입과 동일합니다. 클래스에 정의된 모든 메서드는 인스턴스에 의해 상속됩니다. 메소드 앞에 static 키워드를 추가하면 메소드가 인스턴스에 의해 상속되지 않고 클래스를 통해 직접 호출된다는 의미입니다. 이를 "정적 메소드"라고 합니다.

class Foo {
	static classMethod() {
		return 'hello';
	}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
	// TypeError: foo.classMethod is not a function

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

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'

위 코드에서 상위 클래스 Foo에는 정적 메서드가 있고 하위 클래스 Bar에서는 이 메서드를 호출할 수 있습니다.

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

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {
	static classMethod() {
		return super.classMethod() + ', too';
	}
}
Bar.classMethod();

정적 속성

정적 속성은 인스턴스 객체(this)에 정의된 속성이 아닌 클래스 자체의 속성, 즉 Class.propname을 참조합니다.

class Foo {}
Foo.prop = 1;
Foo.prop // 1

위 작성 방법은 Foo 클래스에 대한 정적 속성 prop을 정의합니다.

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

//  以下两种写法都无效
class Foo {
	//  写法一
	prop: 2
		//  写法二
	static prop: 2
}
Foo.prop // undefined

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

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

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

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

class MyClass {
	myProp = 42;
	constructor() {
		console.log(this.myProp); // 42
	}
}

위 코드에서 myProp은 MyClass의 인스턴스 속성입니다. MyClass 인스턴스에서 이 속성을 읽을 수 있습니다.
이전에는 인스턴스 속성을 정의할 때 클래스의 생성자 메서드에만 작성할 수 있었습니다.

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
}

위 코드에서 this.state 속성은 생성자에 정의되어 있습니다.
새로운 작성 방법을 사용하면 생성자 메서드에서 정의할 필요가 없습니다.

class ReactCounter extends React.Component {
	state = {
		count: 0
	};
}

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

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

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
	state;
}

(2) 클래스의 정적 속성

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

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}

마찬가지로 이 새로운 작성 방법은 정적 속성의 표현을 크게 촉진합니다.

//  老写法
class Foo {}
Foo.prop = 1;
//  新写法
class Foo {
	static prop = 1;
}

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

위 내용은 es6의 클래스에 정적 속성이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!