If they are just semantic sugar how can I get the same result of the following es6 scripts in es5?
class MyFunc extends Function{}
new MyFunc('alert("hi guys")')()
and
class MyArr extends Array{}
var myarr = new MyArr(1,2,3,4)
myarr[2] = "a value"
myarr.push("an other value")
No, they are only mostly syntactic sugar. They can do all the things that the class pattern did in ES5, but also more than that.
The details of how objects are instantiated, especially in subclasses, was overhauled, and now allows to subclass the builtins like Function and Array as in your question. This was not possible in ES5. For details, have a look at What is "new.target"?, What does super() actually do in constructor function? and What do subclass constructor objects inherit from?.
I'm not sure about es5, but it is possible to simulate es6 classes without using the class syntax, using other es6 features instead.
For example, your example
class MyFunc extends Function{}
new MyFunc('alert("hi guys")')()
Can be simulated using old style classes and Reflect.construct as follows
function MyFunc(...args) {return Reflect.construct(Function, args, new.target);}
new MyFunc('alert("hi guys")')()
Reflect.construct does what the super() call in a real subclass constructor would do, which is all you need for the example posted. If you want to properly inherit all the properties and static methods, you need to additionally set the prototypes like this
function MyFunc(...args) {return Reflect.construct(Function, args, new.target);}
Object.setPrototypeOf(MyFunc, Function);
Object.setPrototypeOf(MyFunc.prototype, Function.prototype);
new MyFunc('alert("hi guys")')()
This also works for the array example
function MyArr(...args) {return Reflect.construct(Array, args, new.target);}
Object.setPrototypeOf(MyArr, Array);
Object.setPrototypeOf(MyArr.prototype, Array.prototype);
var myarr = new MyArr(1,2,3,4)
myarr[2] = "a value"
myarr.push("an other value")
The first set prototype call is only required to inherit static properties like Array.from. If you don't care about those, you can get away with only setting up the prototype of the prototype object, in which case you don't need Object.setPrototypeOf at all. You can instead use Object.create as follows:
function MyArr(...args) {return Reflect.construct(Array, args, new.target);}
MyArr.prototype = Object.create(Array.prototype);
MyArr.prototype.constructor = MyArr;
var myarr = new MyArr(1,2,3,4)
myarr[2] = "a value"
myarr.push("an other value")
For more details, see this post.
It's sugar because it does in background what you can do with prototype.
You have all the explanations here :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
ps: sugar does not mean bad for me, it's clearly easier to read, but some does not like.
For the array you can do :
let arr = new Array(1,2,3,4);
arr[2] = "a value";
arr.push("an other value");
No ?
& I had to say that people do not clearly understand JS. When you 'extend' in es6 you do not create an independent type .. that is the mistake the sugar do in your mind .
Just try this code:
class MyArr extends Array{}
let myarr = new MyArr(1,2,3,4);
myarr[2] = "a value";
myarr.push("an other value");
console.log("ah");
Array.prototype.push = function () {
console.log('NAH');
}
let a = [];
a.push("an other value");
myarr.push("an other value");
If you change Array prototype methode you will change it in extended Class too by reference.
