path: root/files/vi/web/javascript/reference/operators/super/index.html

---
title: super
slug: Web/JavaScript/Reference/Operators/super
translation_of: Web/JavaScript/Reference/Operators/super
---
<div>{{jsSidebar("Operators")}}</div>

<p>Từ khóa <strong>super </strong>được sử dụng để gọi các hàm trên đối tượng cha.</p>

<p>Các biểu thức super.prop và super[expr] là hợp lệ trong mọi <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">định nghĩa phương thức</a> ở cả <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a> và <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object literals</a>.</p>

<h2 id="Cú_pháp">Cú pháp</h2>

<pre class="syntaxbox">super([arguments]); // gọi hàm khởi tạo cha.
super.functionOnParent([arguments]);
</pre>

<h2 id="Mô_tả">Mô tả</h2>

<p>Khi được sử dụng trong một hàm khởi tạo, từ khóa super xuất hiện một mình và phải được sử dụng trước khi từ khóa this có thể sử dụng. Từ khóa này cũng có thể được sử dụng để gọi các hàm trên đối tượng cha.</p>

<h2 id="Ví_dụ">Ví dụ</h2>

<h3 id="Sử_dụng_super_trong_classes">Sử dụng super trong classes</h3>

<p>Đoạn code này lấy từ <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">ví dụ về class</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).  <code>super()</code>  ở đây được gọi để tránh việc lặp lại các phần giống nhau của <code>Rectangle</code> và <code>Square</code>.</p>

<pre class="brush: js">class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError, super needs to be called first!

    // Here, it calls the parent class' constructor with lengths
    // provided for the Polygon's width and height
    super(length, length);

    // Note: In derived classes, super() must be called before you
    // can use 'this'. Leaving this out will cause a reference error.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}</pre>

<h3 id="Gọi_super_trên_các_phương_thức_tĩnh">Gọi super trên các phương thức tĩnh</h3>

<p>Bạn cũng có thể gọi <code>super()</code> trên các phương thức <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static">tĩnh</a>.</p>

<pre class="brush: js">class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'
</pre>

<h3 id="Xóa_các_thuộc_tính_của_super_sẽ_gây_ra_lỗi">Xóa các thuộc tính của super sẽ gây ra lỗi</h3>

<p>Bạn không thể sử dụng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">thao tác delete</a> và <code>super.prop</code> hoặc <code>super[expr]</code> để xóa một thuộc tính của lớp cha, nó sẽ ném lỗi {{jsxref("ReferenceError")}}.</p>

<pre class="brush: js">class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo;
  }
}

new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre>

<h3 id="Super.prop_không_thể_ghi_đè_các_thuộc_tính_non-writable">Super.prop không thể ghi đè các thuộc tính non-writable</h3>

<p>Khi định nghĩa các thuộc tính non-writable ví dụ {{jsxref("Object.defineProperty")}},  <code>super</code> không thể ghi đè giá trị của thuộc tính này.</p>

<pre class="brush: js">class X {
  constructor() {
    Object.defineProperty(this, "prop", {
      configurable: true,
      writable: false,
      value: 1
    });
  }
  f() {
    super.prop = 2;
  }
}

var x = new X();
x.f();
console.log(x.prop); // 1
</pre>

<h3 id="Sử_dụng_super.prop_trong_object_literals">Sử dụng super.prop trong object literals</h3>

<p>Super cũng có thể được sử dụng trong <a href="/en-US/docs/">khởi tạo đối tượng hoặc literal</a>. Trong ví dụ này, 2 đối tượng định nghĩa một phương thức. Trong đối tượng thứ hai,  <code>super</code> gọi phương thức của đối tượng thứ nhất. Điều này làm được với sự trợ giúp của {{jsxref("Object.setPrototypeOf()")}} cái giúp chúng ta có thể thiết lập prototype của <code>obj2</code> thành <code>obj1</code>, vì thế <code>super</code> có thể tìm <code>method1</code> trên <code>obj1</code>.</p>

<pre class="brush: js">var obj1 = {
  method1() {
    console.log("method 1");
  }
}

var obj2 = {
  method2() {
   super.method1();
  }
}

Object.setPrototypeOf(obj2, obj1);
obj2.method2(); // logs "method 1"
</pre>

<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-super-keyword', 'super')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Khả_năng_tương_thích_của_các_trình_duyệt">Khả năng tương thích của các trình duyệt</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Tính năng</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Hỗ trợ cơ bản</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatGeckoDesktop(45)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Tính năng</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Hỗ trợ cơ bản</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatGeckoMobile(45)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Lưu_ý_cho_Gecko">Lưu ý cho Gecko</h2>

<ul>
 <li>super() chưa làm việc như mong đợi cho việc xây dựng trong các nguyên mẫu</li>
</ul>

<h2 id="Xem_thêm">Xem thêm</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
</ul>