Function
extend (mixins, arguments) public
Module: | @ember/object |
---|
Defined in packages/ember-runtime/lib/system/core_object.js:560
- mixins
- Mixin
- One or more Mixin classes
- arguments
- Object
- Object containing values to use within the new class
Creates a new subclass.
const Person = Ember.Object.extend({ say(thing) { alert(thing); } });
This defines a new subclass of Ember.Object: Person
. It contains one method: say()
.
You can also create a subclass from any existing class by calling its extend()
method. For example, you might want to create a subclass of Ember's built-in Ember.Component
class:
const PersonComponent = Ember.Component.extend({ tagName: 'li', classNameBindings: ['isAdministrator'] });
When defining a subclass, you can override methods but still access the implementation of your parent class by calling the special _super()
method:
const Person = Ember.Object.extend({ say(thing) { let name = this.get('name'); alert(`${name} says: ${thing}`); } }); const Soldier = Person.extend({ say(thing) { this._super(`${thing}, sir!`); }, march(numberOfHours) { alert(`${this.get('name')} marches for ${numberOfHours} hours.`); } }); let yehuda = Soldier.create({ name: 'Yehuda Katz' }); yehuda.say('Yes'); // alerts "Yehuda Katz says: Yes, sir!"
The create()
on line #17 creates an instance of the Soldier
class. The extend()
on line #8 creates a subclass of Person
. Any instance of the Person
class will not have the march()
method.
You can also pass Mixin
classes to add additional properties to the subclass.
const Person = Ember.Object.extend({ say(thing) { alert(`${this.get('name')} says: ${thing}`); } }); const SingingMixin = Mixin.create({ sing(thing){ alert(`${this.get('name')} sings: la la la ${thing}`); } }); const BroadwayStar = Person.extend(SingingMixin, { dance() { alert(`${this.get('name')} dances: tap tap tap tap `); } });
The BroadwayStar
class contains three methods: say()
, sing()
, and dance()
.
© 2020 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://api.emberjs.com/ember/2.18/functions/@ember%2Fobject/extend