You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/09-classes/07-mixins/article.md
+5-13Lines changed: 5 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -69,11 +69,7 @@ let sayMixin = {
69
69
};
70
70
71
71
let sayHiMixin = {
72
-
<<<<<<<HEAD
73
-
__proto__: sayMixin, // (Object.create를 사용해 프로토타입을 설정할 수도 있습니다.)
74
-
=======
75
-
__proto__: sayMixin, // (or we could use Object.setPrototypeOf to set the prototype here)
76
-
>>>>>>> upstream/master
72
+
__proto__: sayMixin, // (Object.setPrototypeOf를 사용해 여기서 프로토타입을 설정할 수도 있습니다.)
77
73
78
74
sayHi() {
79
75
*!*
@@ -107,17 +103,13 @@ new User("Dude").sayHi(); // Hello Dude!
107
103
108
104
이는 `sayHi`와 `sayBye`가 생성된 곳이 `sayHiMixin`이기 때문입니다. 따라서 메서드를 복사했더라도, 이 메서드들의 내부 프로퍼티인 `[[HomeObject]]`는 위 그림처럼 `sayHiMixin`을 참조합니다.
109
105
110
-
<<<<<<< HEAD
111
-
메서드의 `super`가 `[[HomeObject]].[[Prototype]]`내에서 부모 메서드를 찾기 때문에, 메서드는 `User.[[Prototype]]`이 아닌 `sayHiMixin.[[Prototype]]`을 검색합니다.
112
-
=======
113
-
As `super` looks for parent methods in `[[HomeObject]].[[Prototype]]`, that means it searches `sayHiMixin.[[Prototype]]`.
114
-
>>>>>>> upstream/master
106
+
메서드의 `super`가 `[[HomeObject]].[[Prototype]]` 내에서 부모 메서드를 찾기 때문에, 메서드는 `User.[[Prototype]]`이 아닌 `sayHiMixin.[[Prototype]]`을 검색합니다.
115
107
116
108
## 이벤트 믹스인
117
109
118
110
실제로 사용할 수 있는 믹스인을 만들어봅시다.
119
111
120
-
상당수 브라우저 객체는 이벤트를 생성이라는 중요한 기능을 가지고 있습니다. 이벤트는 정보를 필요로 하는 곳에 '정보를 널리 알리는(broadcast)' 훌륭한 수단입니다. 아래 예시에선 클래스나 객체에 이벤트 관련 함수를 쉽게 추가할 수 있도록 해주는 믹스인을 만들어 보겠습니다.
112
+
상당수 브라우저 객체는 이벤트를 생성하는 중요한 기능을 가지고 있습니다. 이벤트는 정보를 필요로 하는 곳에 '정보를 널리 알리는(broadcast)' 훌륭한 수단입니다. 아래 예시에선 클래스나 객체에 이벤트 관련 함수를 쉽게 추가할 수 있도록 해주는 믹스인을 만들어 보겠습니다.
121
113
122
114
- 믹스인은 뭔가 중요한 일이 발생했을 때 '이벤트를 생성하는' 메서드, `.trigger(name, [...data])`를 제공합니다. 인수 `name`은 이벤트 이름이고, 뒤따르는 선택 인수는 이벤트 데이터 정보를 담습니다.
123
115
- 메서드 `.on(name, handler)`은 `name`에 해당하는 이벤트에 리스너로 `handler` 함수를 추가합니다. `.on()`은 이벤트(`name`)가 트리거 될 때 호출되고, `.trigger` 호출에서 인수를 얻습니다.
@@ -203,7 +195,7 @@ menu.choose("123");
203
195
204
196
이제 `menu.on(...)`을 사용해 메뉴 선택이라는 정보를 들을 수 있게 되었고, 이에 반응하는 코드를 추가할 수 있게 되었습니다.
205
197
206
-
그리고 믹스인 `eventMixin`을 사용하면 이런 동작을 상속 체이닝에 끼어들지 않고도 원하는 클래스에 모두에 추가할 수 있습니다.
198
+
그리고 믹스인 `eventMixin`을 사용하면 이런 동작을 상속 체이닝에 끼어들지 않고도 원하는 클래스 모두에 추가할 수 있습니다.
207
199
208
200
## 요약
209
201
@@ -213,4 +205,4 @@ menu.choose("123");
213
205
214
206
이벤트 믹스인 예시에서 본 것처럼, 믹스인은 이벤트 핸들링 등의 행동을 추가하여 클래스를 확장하는 용도로 사용할 수 있습니다.
215
207
216
-
mixin이 실수로 기존 클래스 메서드를 덮어쓰면 충돌이 발생할 수 있습니다. 따라서 mixin을 만들 땐 충돌이 발생하지 않도록 메서드 이름을 신중하게 정하셔야 합니다.
208
+
믹스인이 실수로 기존 클래스 메서드를 덮어쓰면 충돌이 발생할 수 있습니다. 따라서 믹스인을 만들 땐 충돌이 발생하지 않도록 메서드 이름을 신중하게 정하셔야 합니다.
0 commit comments