Unable to access internal object after instantiation [duplicate] - javascript

This question already has answers here:
arrow function and this
(2 answers)
Closed 14 days ago.
I have a very simple code with instantiated objects and I'm exposing some methods via a prototype. Here's the code:
const MyClass = (function() {
function MyClass() {
this._obj = {
1: 'dfvdfvd'
};
}
function get() {
return this._obj[1];
}
MyClass.prototype.take = () => {
get.call(this);
}
return MyClass;
}());
let x = new MyClass();
console.log(x.take())
but I keep getting _obj as undefined. what am I missing here?

The issue is that MyClass.prototype.take is an arrow function, but arrow functions don't have their own this (see MDN), thus this is the default window and this._obj is undefined. You can either bind it yourself, or just make it a regular function like I did below.
Also, make sure to return a value from MyClass.prototype.take(), or else you'll get undefined.
const MyClass = (function() {
function MyClass() {
this._obj = {
1: 'dfvdfvd'
};
}
function get() {
return this._obj[1];
}
MyClass.prototype.take = function() {
return get.call(this);
}
return MyClass;
}());
let x = new MyClass();
console.log(x.take())

Related

Accessing static properties from prototype methods [duplicate]

This question already has answers here:
Defining a Javascript prototype
(5 answers)
What is the significance of the Javascript constructor property?
(6 answers)
Closed 2 years ago.
In class syntax, we can access the constructor easily:
class MyClass {
static get STATIC_PROP() {
return 500;
}
getStaticProp() {
return this.constructor.STATIC_PROP;
}
}
item = new MyClass();
console.log(item.getStaticProp()); // prints 500, so: cool!!
But in prototype syntax, it does not seem that easy:
MyClass = function() {};
MyClass.STATIC_PROPERTY = 500;
MyClass.prototype = {
getStaticProp() {
return this.constructor.STATIC_PROPERTY
}
}
item2 = new MyClass();
console.log(item2.getStaticProp()); // prints undefined, so: not cool... it should print: 500
Can anyone help me to find out how can I achieve what I am doing in the first code, within the paradigm of the second code (meaning prototype and not class).
Thank you in advance.
EDIT: I could solved this by adding:
MyClass.prototype.constructor = MyClass;
I guess this is the only way to remain functional while accessing static properties from prototype methods.
Instead of assigning a new object to MyClass.prototype, you should define a new property on the MyClass.prototype object.
change
MyClass.prototype = {
getStaticProp() {
return this.constructor.STATIC_PROPERTY
}
}
to
MyClass.prototype.getStaticProp = function() {
return this.constructor.STATIC_PROPERTY
}
const MyClass = function() {};
MyClass.STATIC_PROPERTY = 500;
MyClass.prototype.getStaticProp = function() {
return this.constructor.STATIC_PROPERTY
}
const item2 = new MyClass();
console.log(item2.getStaticProp());
You could use the name of the constructor function directly to access the static property
const MyClass = function() {};
MyClass.STATIC_PROPERTY = 500;
console.log(MyClass.STATIC_PROPERTY);

JS closure to return object instance as interface

I have the following code.
function Test() {
this.funct_1 = function() {
alert('funct_1');
}
this.funct_2 = function() {
alert('funct_2');
}
return this;}
function getTestObj() {
var testObj;
if (!testObj) {
testObj = new Test();
}
return function() {
return testObj;
}}
What I'm trying to accomplish is the following. I want to have a class Test which is not singleton. Then in some other places in my application I need to have a function which could return the same instance per script execution. I figured that I could use closure for that getTestObj.
However, when I try to use it
getTestObj().funct_1();
I'm getting the following error, saying the funct_1() is not found.
Cannot find function funct_1 in object function () {...}.
Clearly, I'm making some kind of mistake here, but I'm not able to find any solution over the net which could help me. Would appreciate any comments.
NOTE: I'm forced to use ECMA5
testObj is wrapped inside a function
So, either call it
getTestObj()().funct_1(); //notice two ()()
Save the value of getTestObj() in a variable
var singleTon = getTestObj();
var testObj = singleTon();
testObj.funct_1();
Or, simply return testObj (in case singleTon isn't required)
function getTestObj()
{
var testObj;
if (!testObj) {
testObj = new Test();
}
return testObj;
}
And invoke it as
getTestObj().funct_1(); //notice single ()
getTestObj() is returning a function i.e. :
function() {
return testObj;
}
So you have to call it again getTestObj()(), this will return the Test's object and now you can access it's properties.
getTestObj()().funct_1();
OR
You can change your getTestObj function as :
function getTestObj() {
var testObj;
if (!testObj) {
testObj = new Test();
}
return (function() {
return testObj;
}());
}

Determine if a JavaScript function is a bound function

Is there a way to determine if a JavaScript function is a bound function?
Example:
var obj = {
x:1
};
function printX() {
document.write(this.x);
}
function takesACallback(cb) {
// how can one determine if this is a bounded function
// not just a function?
if (typeof cb === 'function') {
cb();
}
}
takesACallback(printX.bind(obj)); // 1
takesACallback(printX); // undefined
Perhaps this is an important point. I am not asking why the second call prints undefined.
Both bound functions and arrow functions do not have a prototype property:
typeof (function() {}).prototype // 'object' as usual
typeof (function() {}).bind(null).prototype // 'undefined'!
typeof (() => {}).prototype // 'undefined'!
This is not 100% safe since you could still manually assign this property (although that'd be weird).
As such, a simple way to check for bindability would be the following:
// ES5
function isBindable(func) {
return func.hasOwnProperty('prototype');
}
// ES6
const isBindable = func => func.hasOwnProperty('prototype');
Usage:
isBindable(function () {}); // true
isBindable(() => {}); // false
isBindable(
(function () {}).bind(null)
); // false
This way you can make sure that the function that has been passed can deal with a dynamic this.
Here is an example usage for which the above fails:
const arrowFunc = () => {};
arrowFunc.prototype = 42;
isBindable(arrowFunc); // true :(
Interestingly, while bound functions do not have a prototype property they can still be used as constructors (with new):
var Animal = function(name) {
this.name = name;
};
Animal.prototype.getName = function() {
return this.name;
};
var squirrel = new Animal('squirrel');
console.log(squirrel.getName()); // prints "squirrel"
var MutatedAnimal = Animal.bind({}); // Radiation :)
console.log(MutatedAnimal.hasOwnProperty('prototype')); // prints "false"
var mutatedSquirrel = new MutatedAnimal('squirrel with two heads');
console.log(mutatedSquirrel.getName()); // prints "squirrel with two heads"
In that case, the original function prototype (Animal) is used instead.
See JS Bin, code and link courtesy of Dmitri Pavlutin.
This of course won't work with arrow functions since they can't be used as constructors.
Unfortunately, I don't know if there is a way to distinguish a bound function (usable as constructor) from an arrow function (not usable as constructor) without trying them out with new and checking if it throws (new (() => {}) throws a "is not a constructor" error).
In environments that support ES6, you can check whether the name of the function starts with "bound " (the word "bound" followed by a space).
From the spec:
19.2.3.2 Function.prototype.bind ( thisArg , ...args)
[...]
15. Perform SetFunctionName(F, targetName, "bound").
Of course that could result in false positives if the name of the function was manually changed.
One could override the existing prototype bind, tagging functions that have been bound.
A simple solution. This will likely kill certain optimizations in V8 (and possibly other runtimes) because of hidden classes, though.
(function (bind) {
Object.defineProperties(Function.prototype, {
'bind': {
value: function (context) {
var newf = bind.apply(this, arguments);
newf.context = context;
return newf;
}
},
'isBound': {
value: function () {
return this.hasOwnProperty('context');
}
}
});
}(Function.prototype.bind));
In motion:
(function (bind) {
Object.defineProperties(Function.prototype, {
'bind': {
value: function (context) {
var newf = bind.apply(this, arguments);
newf.context = context;
return newf;
}
},
'isBound': {
value: function () {
return this.hasOwnProperty('context');
}
}
});
}(Function.prototype.bind));
var a = function () {
console.log(this);
};
var b = {
b: true
};
var c = a.bind(b);
console.log(a.isBound())
console.log(c.isBound())
console.log(c.context === b);
a();
c();
You would need to write your own bind function on the prototype. That function would build an index of what has been bound.
You could then have another function to perform a lookup against the object where that index is stored.
Based on previous answers, I create a function to determine:
function isBoundFunction(func) {
if(typeof func.prototype === 'object') return false
try {
new func()
}
catch(e) {
return false
}
return true
}
This function determine three type of functions: 1. original function, whose prototype is object, 2. arrow function, which can not be used as constructor, 3. bound function.
There is a module that can help you solve this problem : bind2.
Here's a use case :
const bind2 = require('bind2');
function testFunc() {
return this.hello;
}
const context = { hello: 'world' };
const boundFunc = bind2(testFunc, context);
console.log(boundFunc.bound); // true
Full disclosure : I wrote this module.

Returning an object but not using the new keyword, Javascript?

I am trying to create an object that gets returned without the new keyword in javascript?
My code structure so far;
myLib.func = (function() {
"use strict";
function func() {
this._init();
};
func.prototype._init = function() {
this.someVar = 5;
};
Return func;
})();
This obviously only works when using the new keyword;
new myLib.func();
How can I make it so that I can just do;
var func = myLib.func();
But it would still return an object that is exactly the same as the first example?
What I have tried
myLib.func = (function() {
"use strict";
function func() {
if (window === this) {
return new myLib.func();
} else {
this._init();
}
};
func.prototype._init = function() {
this.someVar = 5;
};
Return func;
})();
This does not work I learned from an example on slide 25 of John Resig's tips on building a library, http://ejohn.org/blog/building-a-javascript-library/
I know there are already existing frameworks, but rolling my own will make me learn alot, and as you can see that isn't alot at the moment!
In strict mode, the this will be undefined by default. You can account for this feature by adding it to your condition:
if (window === this || undefined === this) {
return new myLib.func();
} else {
this._init();
}
or by checking whether the current object is an instance of the constructor (using instanceof):
if (this instanceof func) {
this._init();
} else {
return new func();
}
(PS. You've got a typo in your code; JavaScript is case-sensitive, so you should use return instead of Return at the end)
If myLib.func is your class name, you cannot call it like var func = myLib.func();.
However, you could wrap this latter into another function, such that you get
var factory = function(){
var func = myLib.func();
return func;
}
If you don't really need public / private methods, you can use object literal
var myLib = {};
myLib.func = {
_init: function() {
this.someVar = 5;
},
doSomething: function(a, b) {
return a + b;
}
};
This will be a singleton object, usually it's enough for javascript applciation. If you need many instances of an object, you'll be forced to put a "new" keyword somewhere.

set attribute with javascript super method [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why are my JS object properties being overwritten by other instances
Why isn't the attribute "t" changed after setT was called? I would expect "4" as output, but it prints "default".
function Car(i) {
var id = i;
var t = "default";
this.getT = function() { return t; }
this.setT = function(p) {
t = p; // attribute t isn't changed ..
}
}
function ECar(id) {
Car.call(this, id); // super constructor call
this.setT = function(p) { // override
ECar.prototype.setT.call(this, p); // super call
}
}
ECar.prototype = new Car();
ecar = new ECar(3);
ecar.setT(4);
alert(ecar.getT()); // prints default, not 4
ECar.prototype = new Car();
At this line ECar's prototype get a context, in which all ECar's instance will be shared.
ECar.prototype.setT.call(this, p);
This line will call at that context, not what has been created while calling super at Car.call(this, id);.
You can fix your code with
function ECar(id) {
Car.call(this, id); // super constructor call
var carSetT = this.setT;
this.setT = function(p) {
carSetT.call(this, p);
}
}
but it would be better (and more readable) to use real prototypes, such as
function Car() {}
Car.prototype.getT = function () { /* ... */ };
Car.prototype.setT = function () { /* ... */ };
function ECar() {}
ECar.prototype = new Car();
ECar.prototype.setT = function () { /* ... */ };
Edit: note (as #Bergi suggested)
You should only use Child.prototype = new Parent() as inheritance if you must support legacy browsers & then you should only use empty constructors.
The most (other-language) compatible way in JavaScript for inheritance is
Child.prototype = Object.create(Parent.prototype)
(MDN says it is supprted from IE 9)
// attribute t isn't changed ..
Please notice that t is not an "attribute", but a variable local to the constructors scope ("private").
ECar.prototype.setT.call(this, p); // super call
does not work how you expect it. You seem to want to change the variable created with the call to your super constructor (it's still local to that variable environment, and exposed by the getT and setT functions that were created in the constructor. So now, you are calling the function that was created in the line ECar.prototype = new Car(); - which changes the variable t that was created there. That you call the function on the current object does not matter, as it does not use the this keyword inside.
So, you don't want to a) use the method of that prototype Car, but your own and b) don't want to create an instance of Car for the prototype at all. See also What is the reason [not] to use the 'new' keyword here?. To apply the super constructor on your current instance is enough. If you want to extend the methods while still using the old ones, you need to preserve them (and exactly them) in a variable.
function Car(id) {
var t = "default";
this.getT = function () {
return t;
};
this.setT = function (p) {
t = p;
};
}
function ECar(id) {
Car.call(this, id); // super constructor call
var oldSetter = this.setT;
this.setT = function (p) { // override
oldSetter(p); // call the function which access this instance's "t"
}
}
ECar.prototype = Object.create(Car.prototype, {constructor: {value: ECar}});
var ecar = new ECar(3);
ecar.setT(4);
console.log(ecar.getT()); // prints 4
function Car(i) {
var id = i;
var t = "default";
this.getT = function() { return t; }
this.setT = function(p) {
t = p; // attribute t isn't changed ..
}
}
function ECar(id) {
Car.call(this, id); // super constructor call
}
ECar.prototype = new Car();
ECar.prototype.constructor = ECar; //Never forget doing this
ecar = new ECar(3);
ecar.setT(4);
alert(ecar.getT());
You don't need to override setT function. ​

Categories

Resources