1 files changed, 112 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/classes/extends/index.html b/files/ko/web/javascript/reference/classes/extends/index.html
new file mode 100644
index 0000000000..e1ae2eac31
--- /dev/null
+++ b/files/ko/web/javascript/reference/classes/extends/index.html
@@ -0,0 +1,112 @@
+---
+title: extends
+slug: Web/JavaScript/Reference/Classes/extends
+tags:
+  - Classes
+  - ECMAScript6
+  - JavaScript
+translation_of: Web/JavaScript/Reference/Classes/extends
+---
+<div>{{jsSidebar("Classes")}}</div>
+
+<p><strong><code>extends</code></strong> 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 <a href="/ko/docs/Web/JavaScript/Reference/Statements/class" title="class declarations">class 선언</a> 또는 <a href="/ko/docs/Web/JavaScript/Reference/Operators/class" title="class expressions">class 식</a>에 사용됩니다.</p>
+
+<p>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre>
+
+<h2 id="설명">설명</h2>
+
+<p><code>extends</code> 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있습니다.</p>
+
+<p>확장( 클래스)의 <code>.prototype</code>은 {{jsxref("Object")}} 또는 {{jsxref("null")}}이어야 합니다.</p>
+
+<h2 id="예">예</h2>
+
+<h3 id="extends_사용하기"><code>extends</code> 사용하기</h3>
+
+<p>첫 번째 예는 <code>Polygon</code> 클래스로부터 <code>Square</code> 클래스를 만듭니다. 이 예는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">class Square extends Polygon {
+  constructor(length) {
+    // 여기서, length와 함께 부모 클래스의 생성자를 호출
+    // Polygon의 너비 및 높이가 제공됨
+    super(length, length);
+    // 주의: 파생 클래스에서, super()가 먼저 호출되어야 'this'를
+    // 사용할 수 있습니다. 이를 빼먹으면 참조 오류가 발생합니다.
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+
+  set area(value) {
+    this.area = value;
+  }
+}</pre>
+
+<h3 id="내장_객체에_extends_사용하기">내장 객체에 <code>extends</code> 사용하기</h3>
+
+<p>이 예제는 내장 객체 {{jsxref("Date")}}를 확장합니다. 이 예제는 <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(source)</a>에서 발췌했습니다.</p>
+
+<pre class="brush: js">class myDate extends Date {
+  constructor() {
+    super();
+  }
+
+  getFormattedDate() {
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear();
+  }
+}</pre>
+
+<h3 id="null_확장"><code>null</code> 확장</h3>
+
+<p>{{jsxref("null")}}에서 확장은 prototype 객체가 {{jsxref("Object.prototype")}}으로부터 상속받지 않은 것을 제외하면 보통 클래스처럼 동작합니다.</p>
+
+<pre class="brush: js">class nullExtends extends null {
+  constructor() {}
+}
+
+Object.getPrototypeOf(nullExtends); // Function.prototype
+Object.getPrototypeOf(nullExtends.prototype) // null</pre>
+
+<h2 id="스펙">스펙</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">스펙</th>
+   <th scope="col">상태</th>
+   <th scope="col">설명</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ES2015')}}</td>
+   <td>초기 정의.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("javascript.classes.extends")}}</p>
+
+<h2 id="참조">참조</h2>
+
+<ul>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
+ <li><a href="/ko/docs/Web/JavaScript/Reference/Operators/super">super</a></li>
+</ul>