Es6 Concise Methods And Non-concise Methods In Object Literals
Solution 1:
One notable difference is that concise methods can utilize the super
keyword and the non-concise (aka: traditional) methods cannot. This becomes pertinent when changing an object(s) prototype to aid inheritance.
To demonstrate this, consider the following gist:
Example:
const frenchPerson = {
speak() {
return'Bonjour';
}
};
const englishPerson = {
speak() {
return'Hello';
}
};
const multilinguist = {
speak() {
return`${super.speak()}, Hola`
}
};
console.log(frenchPerson.speak()) // -> "Bonjour"console.log(englishPerson.speak()) // -> "Hello"Object.setPrototypeOf(multilinguist, frenchPerson);
console.log(Object.getPrototypeOf(multilinguist) === frenchPerson); // trueconsole.log(multilinguist.speak()); // -> "Bonjour, Hola"Object.setPrototypeOf(multilinguist, englishPerson);
console.log(Object.getPrototypeOf(multilinguist) === englishPerson); // trueconsole.log(multilinguist.speak()); // -> "Hello, Hola"
Explanation:
Firstly note all objects;
frenchPerson
,englishPerson
, andmultilinguist
, utilize the concise method syntax.As you can see, the concise method named
speak
of themultilinguist
object utilizessuper.speak()
to point to the it's object prototype (whichever that may be).After setting the prototype of
multilinguist
tofrenchPerson
we invokemultilinguist
'sspeak()
method - which replies/logs:Bonjour, Hola
Then we set the prototype of
multilinguist
toenglishPerson
and askmultilinguist
tospeak()
again - this time it replies/logs:Hello, Hola
What happens when multilinguist
's speak()
method is non-concise?
When using a non-concisespeak()
method in the multilinguist
object in addition to the super
reference it returns:
Syntax Error
As shown in the following example:
const englishPerson = {
speak() {
return'Hello';
}
};
const multilinguist = {
speak: function() { // <--- non-concise methodreturn`${super.speak()}, Hola`
}
};
Object.setPrototypeOf(multilinguist, englishPerson);
console.log(multilinguist.speak()); // -> Syntax Error
Additional Note:
To achieve the above with a non-concise method; call()
can be utilized as a replacement for super
as demonstrated in the following:
const englishPerson = {
speak() {
return'Hello';
}
};
// Non-concise method utilizing `call` instead of `super`const multilinguist = {
speak: function() {
return`${Object.getPrototypeOf(this).speak.call(this)}, Hola!`
}
};
Object.setPrototypeOf(multilinguist, englishPerson);
console.log(multilinguist.speak()); // -> "Hello, Hola!"
Post a Comment for "Es6 Concise Methods And Non-concise Methods In Object Literals"