عرض مصدر JavaScript/super

<noinclude>{{DISPLAYTITLE:الكلمة المحجوزة <code>super</code> في JavaScript}}</noinclude>
الكلمة المحجوزة <code>super</code> تُستخدَم للوصول إلى الكائنات في الكائن الأب واستدعائها. يمكن استخدام التعبيرين <code>super.prop</code> و <code>super[expr]</code>‎ في الأصناف والكائنات.
==البنية العامة==
<syntaxhighlight lang="javascript">
super([arguments]); // استدعاء الدالة البانية للكائن الأب
super.functionOnParent([arguments]);

</syntaxhighlight>

== الوصف ==
عند استخدام الكلمة المحجوزة <code>super</code> في الدالة البانية فيجب أن تُستخدَم قبل أيّ استخدام للكلمة المحجوزة <code>[[JavaScript/this|this]]</code>، ويمكن أن تُستخدَم الكلمة المحجوزة <code>super</code> لاستدعاء الدوال التابعة للكائن الأب أيضًا.

== أمثلة ==

=== استخدام <code>super</code> في الأصناف ===
عند استدعاء الدوال العادية (أي أنَّ الدالة ليست دالةً بانيةً)، فستكون قيمة <code>[[JavaScript/new.target|new.target]]</code> هي <code>[[JavaScript/undefined|undefined]]</code>، وهذا يسمح بمعرفة إن استدعيت هذه الدالة باستخدام المعامل <code>[[JavaScript/new|new]]</code> كدالة بانية:<syntaxhighlight lang="javascript">
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(length, length);
    
    // لاحظ أنَّك أصبحت تستطيع استخدام الكلمة المحجوزة this
    this.name = 'Square';
  }

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

  set area(value) {
    this.height = this.width = Math.sqrt(value);
  } 
}

</syntaxhighlight>

=== استدعاء الدوال الساكنة ===
يمكنك استخدام <code>super</code> لاستدعاء الدوال الساكنة:<syntaxhighlight lang="javascript">
class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

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

=== لا يمكن حذف خاصيات <code>super</code> ===
لا يمكنك استخدام معامل الحذف مع التعبيرين <code>super.prop</code> و <code>super[expr]</code>‎ لحذف خاصية من خاصيات الصنف الأب، إذ سيؤدي ذلك إلى رمي <code>[[JavaScript/ReferenceError|ReferenceError]]</code>:<syntaxhighlight lang="javascript">
class Base {
  constructor() {}
  foo() {}
}
class Derived extends Base {
  constructor() {}
  delete() {
    delete super.foo;
  }
}

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

</syntaxhighlight>

=== لا يمكن الكتابة على الخاصية غير القابلة للكتابة باستخدام <code>super</code> ===
عند تعريف خاصيات غير قابلة للكتابة (عبر الدالة <code>[[JavaScript/Object/defineProperty|Object.defineProperty()]]‎</code> مثلًا)، فلن تتمكن <code>super</code> من إعادة الكتابة فوق قيمة تلك الخاصية.<syntaxhighlight lang="javascript">
class X {
  constructor() {
    Object.defineProperty(this, 'prop', {
      configurable: true,
      writable: false, 
      value: 1
    });
  } 
  f() { 
    super.prop = 2;
  }
}

var x = new X();
x.f(); // TypeError: "prop" is read-only
console.log(x.prop); // 1

</syntaxhighlight>

=== استخدام <code>super</code> على الكائنات المُنشَأة بالصيغة المختصرة ===
يمكن أن تُستخدَم <code>super</code> ضمن [[JavaScript/Object Initializer|تعبير تهيئة الكائنات]]، ففي المثال الآتي لدينا كائنين لكلِ واحدٍ منها دالةٌ، وفي الكائن الثاني استدعينا دالة الكائن الأولى عبر <code>super</code>، وذلك بمساعدة الدالة <code>[[JavaScript/Object/setPrototypeOf|Object.setPrototypeOf()‎]]</code> التي ضبطت قيمة الخاصية <code>prototype</code> للكائن <code>obj2</code> إلى <code>obj1</code>، لذا تمكنت الكلمة المحجوزة <code>super</code> من العثور على الدالة <code>method1</code> في الكائن <code>obj1</code>:<syntaxhighlight lang="javascript">
var obj1 = {
  method1() {
    console.log('method 1');
  }
}

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

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

</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|42
|45
|غير مدعومة
|نعم
|نعم
|}
على النقيض من متصفح IE، يدعم متصفح Edge هذه الميزة.

== مصادر ومواصفات ==
* مسودة المعيار [https://tc39.github.io/ecma262/#sec-super-keyword ECMAScript Latest Draft].
* معيار [http://www.ecma-international.org/ecma-262/6.0/#sec-super-keyword ECMAScript 2015 (6th Edition)]‎. 
[[تصنيف:JavaScript]]
[[تصنيف:JavaScript Operator]]