Class를 정의하는 한 가지 방법은 class 선언을 이용하는 것입니다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 class 키워드를 사용해야 합니다.
class Rectangle {
+class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
@@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Classes
함수 선언과 클래스 선언의 중요한 차이점은 험수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점입니다. 다음 코드는 {{jsxref("ReferenceError")}}를 던질 것입니다.
-const p = new Rectangle(); // ReferenceError
+const p = new Rectangle(); // ReferenceError
class Rectangle {}
@@ -37,7 +37,7 @@ class Rectangle {}
Class 표현식은 class를 정의하는 또 다른 방법입니다. Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있습니다. 이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효합니다. (하지만, 클래스의 (인스턴스 이름이 아닌) {{jsxref("Function.name", "name")}} 속성을 통해 찾을 수 있습니다).
-// unnamed
+// unnamed
let Rectangle = class {
constructor(height, width) {
this.height = height;
@@ -80,7 +80,7 @@ console.log(Rectangle.name);
{{jsxref("Functions/Method_definitions", "메서드 정의", "", "true")}}도 참조해보세요.
-class Rectangle {
+class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
@@ -103,7 +103,7 @@ console.log(square.area); // 100
{{jsxref("Classes/static", "static", "", "true")}} 키워드는 클래스를 위한 정적(static) 메서드를 정의합니다. 정적 메서드는 클래스의 인스턴스화(instantiating) 없이 호출되며, 클래스의 인스턴스에서는 호출할 수 없습니다. 정적 메서드는 어플리케이션(application)을 위한 유틸리티(utility) 함수를 생성하는 데 주로 사용됩니다. 반면, 정적 속성은 캐시, 고정 환경설정 또는 인스턴스 간에 복제할 필요가 없는 기타 데이터에 유용합니다.
-class Point {
+class Point {
constructor(x, y) {
this.x = x;
this.y = y;
@@ -132,7 +132,7 @@ console.log(Point.distance(p1, p2)); // 7.0710678118654755
메서드를 변수에 할당 한 다음 호출하는 것과 같이, 정적 메서드나 프로토타입 메서드가 {{jsxref("Operators/this", "this")}} 값 없이 호출될 때, this 값은 메서드 안에서 undefined가 됩니다. 이 동작은 {{jsxref("Strict_mode", "\"use strict\"")}} 명령어 없이도 같은 방식으로 동작하는데, class 문법 안에 있는 코드는 항상 strict mode 로 실행되기 때문입니다.
-class Animal {
+class Animal {
speak() {
return this;
}
@@ -152,7 +152,7 @@ eat(); // undefined
위에 작성된 코드를 전통적 방식의 함수기반의 non–strict mode 구문으로 재작성하면, this 메서드 호출은 기본적으로 {{Glossary("Global_object", "전역 객체")}}인 초기 this 값에 자동으로 바인딩 됩니다. Strict mode에서는 자동 바인딩이 발생하지 않습니다; this 값은 전달된 대로 유지됩니다.
-function Animal() { }
+function Animal() { }
Animal.prototype.speak = function() {
return this;
@@ -173,7 +173,7 @@ eat(); // global object (in non-strict mode)
인스턴스 속성은 반드시 클래스 메서드 내에 정의되어야 합니다:
-class Rectangle {
+class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
@@ -182,7 +182,7 @@ eat(); // global object (in non-strict mode)
정적 (클래스사이드) 속성과 프로토타입 데이터 속성은 반드시 클래스 선언부 바깥쪽에서 정의되어야 합니다.
-Rectangle.staticWidth = 20;
+Rectangle.staticWidth = 20;
Rectangle.prototype.prototypeWidth = 25;
@@ -196,7 +196,7 @@ Rectangle.prototype.prototypeWidth = 25;
자바스크립트의 필드 선언 문법을 사용해서 위의 예제는 아래와 같이 다시 쓰여질 수 있습니다.
-class Rectangle {
+class Rectangle {
height = 0;
width;
constructor(height, width) {
@@ -215,7 +215,7 @@ Rectangle.prototype.prototypeWidth = 25;
private 필드를 사용하면 아래와 같이 예제를 개선할 수 있습니다.
-class Rectangle {
+class Rectangle {
#height = 0;
#width;
constructor(height, width) {
@@ -238,7 +238,7 @@ Rectangle.prototype.prototypeWidth = 25;
{{jsxref("Classes/extends", "extends")}} 키워드는 클래스 선언이나 클래스 표현식에서 다른 클래스의 자식 클래스를 생성하기 위해 사용됩니다.
-class Animal {
+class Animal {
constructor(name) {
this.name = name;
}
@@ -265,7 +265,7 @@ d.speak(); // Mitzie barks.
또한 es5에서 사용되던 전통적인 함수 기반의 클래스를 통하여 확장할 수도 있습니다.
-function Animal (name) {
+function Animal (name) {
this.name = name;
}
@@ -286,7 +286,7 @@ d.speak(); // Mitzie barks.
클래스는 생성자가 없는 객체(non-constructible)을 확장할 수 없습니다. 만약 기존의 생성자가 없는 객체을 확장하고 싶다면, 이 메서드를 사용하세요. {{jsxref("Object.setPrototypeOf()")}}:
-const Animal = {
+const Animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
@@ -310,7 +310,7 @@ d.speak(); // Mitzie makes a noise.
예를 들어, {{jsxref("Array.map", "map()")}}과 같은 기본 생성자를 반환하는 메서드를 사용할 때 이 메서드가 MyArray 객체 대신 Array 객체가 반환하도록 하고 싶을 것입니다. {{jsxref("Symbol.species")}} 심볼은 이러한 것을 가능하게 해줍니다:
-class MyArray extends Array {
+class MyArray extends Array {
// 부모 Array 생성자로 species 덮어쓰기
static get [Symbol.species]() { return Array; }
}
@@ -324,7 +324,7 @@ console.log(mapped instanceof Array); // true
{{jsxref("Operators/super", "super")}} 키워드는 객체의 부모가 가지고 있는 메서드를 호출하기 위해 사용됩니다. 이는 프로토타입 기반 상속보다 좋은 점 중 하나입니다.
-class Cat {
+class Cat {
constructor(name) {
this.name = name;
}
@@ -352,7 +352,7 @@ l.speak();
슈퍼클래스를 인자로 받고 이 슈퍼클래스를 확장하는 서브클래스를 생성하여 반환하는 함수를 사용하여 ECMAScript에서 믹스-인을 구현할 수 있습니다:
-var calculatorMixin = Base => class extends Base {
+var calculatorMixin = Base => class extends Base {
calc() { }
};
@@ -362,7 +362,7 @@ var randomizerMixin = Base => class extends Base {
위 믹스-인을 사용하는 클래스는 다음과 같이 작성할 수 있습니다:
-class Foo { }
+class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
클래스 재정의
diff --git a/files/ko/web/javascript/reference/classes/private_class_fields/index.html b/files/ko/web/javascript/reference/classes/private_class_fields/index.html
index ea5508ab27..0e31821cb3 100644
--- a/files/ko/web/javascript/reference/classes/private_class_fields/index.html
+++ b/files/ko/web/javascript/reference/classes/private_class_fields/index.html
@@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Classes/Private_class_fields
Syntax
-class ClassWithPrivateField {
+class ClassWithPrivateField {
#privateField
}
@@ -35,7 +35,7 @@ class ClassWithPrivateStaticField {
static 메소드에서만 static 변수들을 호출할 수 있다는 제약은 그대로 유지된다.
-class ClassWithPrivateStaticField {
+class ClassWithPrivateStaticField {
static #PRIVATE_STATIC_FIELD
static publicStaticMethod() {
@@ -52,7 +52,7 @@ console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)
이는 this 를 사용함에 있어 예상치 못한 동작을 야기할 수 있다.
-class BaseClassWithPrivateStaticField {
+class BaseClassWithPrivateStaticField {
static #PRIVATE_STATIC_FIELD
static basePublicStaticMethod() {
@@ -77,7 +77,7 @@ console.assert(error instanceof TypeError)
캡슐화(encapsulation) 는 언어로부터 강제된다(enforced by the language). 즉, scope 밖에서 # 이름에 접근하는 것은 syntax error 이다.
-class ClassWithPrivateField {
+class ClassWithPrivateField {
#privateField
constructor() {
@@ -97,7 +97,7 @@ instance.#privateField === 42 // Syntax error
private static 메소드는 generator, async 그리고 async generator 함수가 될 수 있다.
-class ClassWithPrivateStaticMethod {
+class ClassWithPrivateStaticMethod {
static #privateStaticMethod() {
return 42
}
@@ -116,7 +116,7 @@ console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42);
이는 this 를 사용할 때 예상치 못한 동작을 발생시킬 수 있다. (이는 this binding rule 이 적용되기 때문이다.) 다음 예시에서 Derived.publicStaticMethod2() 를 호출할 때, this 는 class Derived (Base 가 아니라) 를 가리킨다.
-class Base {
+class Base {
static #privateStaticMethod() {
return 42;
}
@@ -137,7 +137,7 @@ console.log(Derived.publicStaticMethod2()); // TypeError
private 인스턴스 메소드는 private 인스턴스 필드와는 다르게 class 인스턴스로부터 접근 가능하다.
-class ClassWithPrivateMethod {
+class ClassWithPrivateMethod {
#privateMethod() {
return 'hello world'
}
@@ -153,7 +153,7 @@ console.log(instance.getPrivateMessage())
private 인스턴스 메소드는 generator, async 그리고 async generator 함수가 될 수 있다. private getter 와 setter 또한 가능하다:
-class ClassWithPrivateAccessor {
+class ClassWithPrivateAccessor {
#message
get #decoratedMessage() {
--
cgit v1.2.3-54-g00ecf