Why wrong order execution system.js? - javascript

Why system.js first performs __extends and then initializes?
Although I see no initialization at all since the first thing is called the __extends and throw out errors. How to fix it?
var __extends = (this && this.__extends) || function (d, b) {
console.log('set:__extends', d, b); // set:__extends undefined undefined
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};System.register(['some.js'], function(exports_1) {
console.log('set:exports', exports_1); // #####
var some_js_1;
var Index;
return {
setters:[
function (_some_js_1) {
console.log('set:setters'); // #####
some_js_1 = _some_js_1;
}],
execute: function() {
console.log('set:execute'); // #####
Index = (function (_super) {
console.log('set:before __extends'); // #####
__extends(Index, _super);
function Index() {
_super.call(this);
//console.log('some', some_js_1.SomeSuperClass);
}
return Index;
})(some_js_1.SomeSuperClass);
console.log('set:before exports_1'); // #####
exports_1("default", Index);
}
}
});

Related

TypeScript classes into Javascript

I am learning about classes in Typescript and extend. Once I compiled .ts file and looked into .js. The code for class and extend in js is quite different. In .js class is made with function not with class.
My TS code
class User4 {
private city: string = "xyx";
protected number: number = 123123;
constructor(public name: string) {}
}
class additional extends User4 {
method1() {
console.log(this.number);
}
}
export {};
While the code in **.js ** is
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var User4 = /** #class */ (function () {
function User4(name) {
this.name = name;
this.city = "xyx";
this.number = 123123;
}
return User4;
}());
var additional = /** #class */ (function (_super) {
__extends(additional, _super);
function additional() {
return _super !== null && _super.apply(this, arguments) || this;
}
additional.prototype.method1 = function () {
console.log(this.number);
};
return additional;
}(User4));
I am wondering, if there is any issue with my system or its something else because the code in .js file is really crazy
JavaScript doesn't have real classes. Classes in JS are syntax sugar, take a look at this article: How Classes work in JavaScript
You're getting this "crazy" code, because the transpiler is by default set to handle old versions of JavaScript, before class was even added as part of the language.

JavaScript OOP - Function call inheritance not working

I have 2 files (FPDevice.js and FPComponent.js). Each file with an object. I need to call a function from one file (Object) to the other file (Object).
It is working but not as expected using FPComponent.prototype.onSysexEvent.call(FPComponent); on file FPDevice.js file. I was expecting that by using FPComponent, instead of this in the context argument, that the function would inherit the properties of the FPComponent object and be able to use this.channels.
When FPComponent.prototype.onSysexEvent.call(FPComponent); function is called from the FPMidiDevice.prototype.onSysexEvent function, the call works but the inheritance is not working.
I get an error - this.channels is undefined
Since this.channels is a property of the FPComponent object, I need the inheritance of call FPComponent.prototype.onSysexEvent.call(FPComponent) to be from the FPComponent object so I can use the this.channels property within the FPComponent.prototype.onSysexEvent.
The outcome I am looking for is to have Function FPComponent.prototype.onSysexEvent inherit the properties from FPComponent object once it is called from the FPMidiDevice.prototype.onSysexEvent function.
FPDevice.js
//FPDevice.js
var __extends = (this && this.__extends) || (function ()
{
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
include_file("resource://com.presonus.musicdevices/sdk/controlsurfacecomponent.js");
include_file("resource://com.presonus.musicdevices/sdk/controlsurfacedevice.js");
include_file("FPComponent.js");
var FPMidiDevice = (function (_super)
{
__extends(FPMidiDevice, _super);
function FPMidiDevice(faderCount, sysexHeader)
{
var _this = _super.call(this) || this;
_this.faderCount = faderCount;
_this.sysexHeader = sysexHeader;
_this.lastActiveSensing = 0;
_this.activeSensingInterval = 2500;
return _this;
}
FPMidiDevice.prototype.onInit = function (hostDevice)
{
_super.prototype.onInit.call(this, hostDevice);
this.meters = [];
};
FPMidiDevice.prototype.onSysexEvent = function (data, length)
{
//########################################################################################################## //##########################################################################################################
// I am trying to use call but using FPComponent object so the call can inherit the properties from FPComponent
FPComponent.prototype.onSysexEvent.call(FPComponent);
};
return FPMidiDevice;
}(PreSonus.ControlSurfaceDevice));
function createFP16DeviceInstance()
{
return new FPMidiDevice(16, FP.Support.kSysexHeaderFP16);
}
FPComponent.js
//FPComponent.js
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
include_file("resource://com.presonus.musicdevices/sdk/controlsurfacecomponent.js");
include_file("resource://com.presonus.musicdevices/sdk/controlsurfacedevice.js");
var FPComponent = (function (_super)
{
__extends(FPComponent, _super);
function FPComponent(faderCount)
{
var _this = _super.call(this) || this;
_this.faderCount = faderCount;
_this.pagingStatusIndex = faderCount - 1;
_this.channels = [];
return _this;
}
FPComponent.prototype.onInit = function (hostComponent)
{
PreSonus.ControlSurfaceComponent.prototype.onInit.call(this, hostComponent);
this.model = hostComponent.model;
this.root = this.model.root;
this.mixerMapping = this.root.find("MixerMapping");
this.channelBankElement = this.mixerMapping.find("ChannelBankElement");
var paramList = hostComponent.paramList;
for (var i = 0; i < this.faderCount; i++)
{
var channel = new ChannelStrip;
channel.channelElement = this.channelBankElement.getElement(i);
channel.textValue = paramList.addAlias("textValue" + i);
channel.panValue = paramList.addAlias("panValue" + i);
channel.muteValue = paramList.addAlias("muteValue" + i);
channel.soloValue = paramList.addAlias("soloValue" + i);
channel.recordValue = paramList.addAlias("recordValue" + i);
channel.monitorValue = paramList.addAlias("monitorValue" + i);
channel.colorValue = paramList.addAlias("colorValue" + i);
this.channels.push(channel);
}
};
//########################################################################################################
// it is not working properly when called from FPMidiDevice.prototype.onSysexEvent on file FPMidiDevice.js
// error = this.channels is undefined
FPComponent.prototype.onSysexEvent = function ()
{
var channelIndex = 0;
var channel = this.channels[channelIndex];
channel.faderValue.value = 1;
};
return FPComponent;
}(PreSonus.ControlSurfaceComponent));

How to get the Caller name in node Js

I am using arguments.callee.caller.name to get the name of the function where this function is called.
for example:
class B {
a = 0;
called_from = false;
setA = (asume)=>{
this.a = assume;
this.called_from = arguments.callee.caller.name;
console.log(this.called_from);
};
callA = ()=>{
this.setA();
};
}
Now I want to get the callA name in the logs.
Using info from Accessing line number in V8 JavaScript (Chrome & Node.js)
you can add some prototypes to provide access to this info from V8;
Object.defineProperty(global, '__stack', {
get: function() {
var orig = Error.prepareStackTrace;
Error.prepareStackTrace = function(_, stack) {
return stack;
};
var err = new Error;
Error.captureStackTrace(err, arguments.callee);
var stack = err.stack;
Error.prepareStackTrace = orig;
return stack;
}
});
Object.defineProperty(global, '__line', {
get: function() {
return __stack[1].getLineNumber();
}
});
Object.defineProperty(global, '__function', {
get: function() {
return __stack[1].getFunctionName();
}
});
function foo() {
console.log(__line);
console.log(__function);
}
foo()

What is the meaning of e.fn in this code

I am looking at this javascript code from the quojs library:
(function() {
var e;
e = function() {
var e, t, n;
t = [];
e = function(t, r) {
var i;
if (!t) {
return n()
} else if (e.toType(t) === "function") {
return e(document).ready(t)
} else {
i = e.getDOMObject(t, r);
return n(i, t)
}
};
n = function(e, r) {
e = e || t;
e.__proto__ = n.prototype;
e.selector = r || "";
return e
};
e.extend = function(e) {
Array.prototype.slice.call(arguments, 1).forEach(function(t) {
var n, r;
r = [];
for (n in t) {
r.push(e[n] = t[n])
}
return r
});
return e
};
n.prototype = e.fn = {};
return e
}();
which comes before this:
(function () {
(function (e) {
var t, n, r, i, u, a;
r = "parentNode";
t = /^\.([\w-]+)$/;
n = /^#[\w\d-]+$/;
i = /^[\w-]+$/;
e.query = function (e, r) {
var u;
r = r.trim();
if (t.test(r)) {
u = e.getElementsByClassName(r.replace(".", ""))
} else if (i.test(r)) {
u = e.getElementsByTagName(r)
} else if (n.test(r) && e === document) {
u = e.getElementById(r.replace("#", ""));
if (!u) {
u = []
}
} else {
u = e.querySelectorAll(r)
}
if (u.nodeType) {
return [u]
} else {
return Array.prototype.slice.call(u)
}
};
e.fn.find = function (t) {
I am trying to understand the meaning of e.fn.
I see that fn is not a reserved word. I think that e is just the name given to the event object passed as a parameter. So what is the meaning of e.fn? Is the code assuming that whatever is passed as e has a property called fn? Or is fn some kind of abbreviation that references the function?
Whatever is passed as e should have a property called fn. I would search the rest of the code for "fn" and see what you come up with.

What is the best practice to make an object in JS like this: T('isArray')([]) == T.run('isArray')([]) == T().run('isArray')?

What is the best practice to make an object in JavaScript like this, knowing T is the main object:
T('isArray')([])
T.run('isArray')([])
T().run('isArray')([])
T('isArray', [])
T.run('isArray', [])
T().run('isArray', [])
They all must use the same function.
Since the main object can be called it must be a function. The function should decide what to return based on the arguments:
var T = (function() {
var functions = { // define functions that can be run like isArray
isArray: function(a) {
return Array.isArray(a);
},
log: function(a, b) {
console.log(a + b);
}
};
var noop = function() {}; // function doing nothing (no operation)
var T = function(f) {
if(arguments.length >= 2) { // function + args provided
return (functions[f] || noop) // call it
.apply(this, [].slice.call(arguments, 1));
} else if(arguments.length === 1) { // only function provided
return function() { // return function that can be called with args
return (functions[f] || noop)
.apply(this, arguments);
}
} else { // nothing provided, return T itself (so that e.g. T.run === T().run)
return T;
}
}
T.run = function() { // run function
return T.apply(this, arguments);
};
T.getState = function() { // another function
console.log("Not implemented");
};
return T; // actually return T so that it gets stored in 'var T'
})();
// tests
console.log(
T('isArray')([]),
T.run('isArray')([]),
T().run('isArray')([]),
T('isArray', []),
T.run('isArray', []),
T().run('isArray', [])
);
T('log')(1, 2);
T.getState();

Categories

Resources