Is it possible to create property getter/setter as a function?
Standard getter/setter work like following:
class Test {
something: any;
get prop() {
return something;
}
set prop(value) {
something = value;
}
}
let instance = new Test();
instance.prop = 'Foo';
console.log(instance.prop); // = Foo
I would need following:
let instance = new Test();
instance.prop('Bar') = 'Foo'; // access setter as a function of prop
console.log(instance.prop('Bar')); // = Foo
Yes, I know it's unorthodox usage and yes, I know that I could implement this functionality bit differently. I'm just interested if this is possible in JS/TS/ES6.
Update
This is the closest I got:
class Test {
something: any;
prop(area /* my custom symbol type */) {
const obj: any = {};
Object.defineProperty(obj, 'value', {
// get child object of my complex object
get: () => this.something[area];
// replace part of my complex object
set: (value) => {
this.something = {...this.something, [area]: value}
}
});
}
}
let instance = new Test();
instance.prop('Bar').value = 'Foo';
console.log(instance.prop('Bar').value); // = Foo
So in short, I'd like to get rid of value suffix if possible.
As #deceze mentioned in the first comment, it is not possible to assign to function call, so solution in the update is as best as it gets.
Related
I have a CameraBuilder class that looks like this:
class CameraBuilder {
constructor() {
if (arguments.length) {
throw new Error('[CameraBuilder constructor ERROR] class constructor does not accept parameters.');
}
this.camera = {};
}
withFarmLabel(farmLabel) {
this.camera.farm_label = farmLabel;
return this;
}
// more methods here
build() {
const missingProps = [];
if (!this.camera.farm_label) {
missingProps.push('\nMissing farm_label property. Use the withFarmLabel method in order to assign it.');
}
// more validations like the one above here
if (missingProps.length) {
const errorMsg = missingProps.join('');
throw new Error(`[CameraBuilder build ERROR] ${errorMsg}`);
}
return this.camera;
}
}
Since most of my validations are on the build() method and there are some business logic on some of these methods associated with how the user is building an instance of CameraBuilder, I wouldn't want anyone assigning cameraBuilderObj.camera directly. Is there any way I can enforce the use of the Class methods in order to assign properties to the Camera object?
You could make the camera property private by putting # in front of it, ensuring that only CameraBuilder's internals can reference it:
class CameraBuilder {
#camera = {};
constructor() {
if (arguments.length) {
throw new Error('[CameraBuilder constructor ERROR] class constructor does not accept parameters.');
}
}
withFarmLabel(farmLabel) {
this.#camera.farm_label = farmLabel;
return this;
}
// more methods here
build() {
const missingProps = [];
if (!this.#camera.farm_label) {
missingProps.push('\nMissing farm_label property. Use the withFarmLabel method in order to assign it.');
}
// more validations like the one above here
if (missingProps.length) {
const errorMsg = missingProps.join('');
throw new Error(`[CameraBuilder build ERROR] ${errorMsg}`);
}
return this.#camera;
}
}
const c = new CameraBuilder();
c.withFarmLabel('label');
console.log(c.camera);
console.log(c.build().farm_label);
CertainPerformance's answer probably makes more sense--don't expose it in the first place--but if for some reason you didn't want to go that route (or if you're in an environment where private fields aren't supported) you could define setters on it, so that direct assignments go through your function.
class Foo {
constructor () {
this._bar = 'baz';
}
set bar (value) {
this._bar = value;
console.log('do whatever you want to do here.');
}
}
const f = new Foo();
f.bar = 'hey'; // direct assignment invokes the setter
Example:
let foo = {bar: 'baz', method() { this.bar = 'baz2' }}
let fooProxy = new Proxy(foo, {set(target, key, val) { console.log('set trap triggered!') }})
fooProxy.bar = 'any value' // as expected: set trap triggered!
foo.method() // trap not triggered
Why does this happen? How can triggering trap be enforced even from inside target object?
Edit, mainly in order to explain this to #Bergi:
My main goal is to intercept any changes to foo object, so i can set property e.g. foo.changed to true. Also, I want intercept changes to foo's properties which have array/object type. You know, if I am setting foo's property, everything is ok, but when I e.g. push to one that is array, then proxy cannot intercept that. So I need to convert array/object properties to proxies too (I called them ArrayProxy and ObjectProxy).
Here's my code (typescript):
// Category.ts
class Category extends Model {
title: string = ''
products: Product[] = []
}
// Model.ts
abstract class Model extends BaseModel {
constructor() {
return new Proxy(this, {
set (target, key, val) {
if (Array.isArray(val) {
target[key] = new ArrayProxy(val) // I WANT all array properties to be ArrayProxy but the problem (see below) not let me do that
}
}
})
}
}
// BaseModel.ts
abstract class BaseModel {
constructor(attributes) {
this.setAttributes(attributes)
}
setAttributes(attributes) {
Object.keys(attributes).forEach((key) => {
this[key] = attributes[key] // THE PROBLEM
})
}
}
I've removed code, that does not matter (e.g. similar case for object properties and ObjectProxy).
I will appreciate very much, if there is more elegant way to do what I've done.
The trap doesn't exist on the original object. If it could, you wouldn't need a separate proxied object. The idea is to use the proxy instead of the original.
One possibility is to have your original object inherit from a proxied object. This could work, depending on what you actually need to accomplish.
let fooProxy = new Proxy({}, {
set(target, key, val) { console.log('set trap triggered!') }
})
let foo = Object.create(fooProxy, {
method: {value: function() { this.bar = 'baz2' }}
})
fooProxy.bar = 'any value'
foo.method()
The set trap is not triggered because the this that you are accessing within method() is not the proxy but the original object foo. A proxy does not change the original object. You can see this by checking what this is inside method():
let foo = {
method () {
return this === fooProxy
}
}
let fooProxy = new Proxy(foo, {})
document.write(foo.method()) //=> false
You could instead explicitly set the context of method() on invocation by using Function#call:
let foo = {bar: 'baz', method() { this.bar = 'baz2' }}
let fooProxy = new Proxy(foo, {set(target, key, val) { console.log('set trap triggered!') }})
fooProxy.bar = 'any value' //=> set trap triggered!
foo.method.call(fooProxy) //=> set trap triggered!
You can also add the proxy to the object prototype.
SomeObject.prototype = new Proxy(
SomeObject.prototype,
SomeObjectHandlerProxy
);
instance = new SomeObject();
something like should work
In foo.method you're not setting a propery through the proxy object, so obviously no trap is triggered. A Proxy does not modify the original object.
I am fumbling for a way to avoid creating a new Proxy for each new object instance. I have 1 prototype, and I want to use just 1 Proxy. That's the goal. If I use a Proxy per instance, I could have thousands and thousands of Proxy objects which hurts performance a lot.
Ultimately what I am doing is setting properties on a prototype method, like this:
const v = {
foo: function () {
assert.notEqual(this, v);
}
};
v.foo.bar = function(){
// I need `this` to be a certain value here
};
v.foo.zam = function(){
// I need `this` to be a certain value here
};
but I need those properties to still have the same context (this value), as the prototype method itself would.
const assert = require('assert');
const v = {
foo: function () {
assert.notEqual(this, v);
}
};
new Proxy(v.foo, {
get: function(target, prop){
console.log(this); // I am looking to get access to `x` here
}
});
const x = Object.create(v);
x.foo();
const z = x.foo.bar; // I would have guessed this would have fired the Proxy `get` method.
I am trying to do some black magic, where I can access the this value of the v prototype methods from the Proxy. In this case, that would mean accessing the value of x from the Proxy. Is this possible somehow? Also, I can't figure out why the get method of the Proxy is not called when I read the bar property from x.foo, as in x.foo.bar.
this Github gist I just created is a little bit closer:
https://gist.github.com/ORESoftware/757dd6285d554f4f52ae415fd39141a5
however, I still don't think it's possible to do what I want to do. The rationale is so that I can reuse the same Proxy object in the prototype, without having to create a new Proxy for each instance.
You're not looking for a proxy, all you need is a simple getter:
const v = {
get foo() {
console.log(this); // will log x
return Object.assign(() => "hi", {bar: 42});
}
};
const x = Object.create(v);
console.log(x.foo());
console.log(x.foo.bar);
The rationale is so that I can reuse the same Proxy object in the prototype, without having to create a new Proxy for each instance.
For that you would need to use the proxy as the prototype. Your current code is just creating a proxy object and then throwing it away, which will not affect the original code in any way. You'd rather need to do something like
const p = new Proxy({}, {
get(target, prop) {
console.log(target); // will log x
if (prop == "foo")
return Object.assign(() => "hi", {bar: 42});
}
});
const x = Object.create(p);
// ^ use the proxy here!
console.log(x.foo());
console.log(x.foo.bar);
You can also add the proxy to the object prototype.
SomeObject.prototype = new Proxy(
SomeObject.prototype,
SomeObjectHandlerProxy
);
instance = new SomeObject();
something like should work
Some black magic here, but it works, you can use an Object.defineProperty getter to set the context for the proxied prototype method, (note this methodology will only work for synchronous parts of your code).
const proto = {}; // the prototype object
const ctx = {
val: null
};
const foo = function () {
// the prototype method
// do something with ctx.val which gets set dynamically
};
foo.bar = function(){
// doing important stuff here
// do something with ctx.val which gets set dynamically
};
const p = new Proxy(foo, {
get: function (target, prop) {
if (typeof prop === 'symbol') {
return Reflect.get.apply(Reflect, arguments);
}
// do something with ctx.val
// => ctx.val
}
});
Object.defineProperty(proto, 'foo', {
get: function() {
ctx.val = this; // set the context here!!
return p;
}
});
now we can use it like so:
proto.foo.bar()
when foo is accessed, it then dynamically sets the ctx for bar()
I end up using it like so:
const o = Object.create(proto);
o.foo.bar();
And we can also call o.foo() if we want to.
The following code will throw an error only for the name property.
It could be fixed by specifying name property as writable in Object.create arguments but I'm trying to understand why is this happening(and maybe there is a more elegant way to fix it).
var BaseClass = function (data) {
Object.assign(this, data);
}
var ExtendedClass = function () {
BaseClass.apply(this, arguments);
}
ExtendedClass.prototype = Object.create(BaseClass);
console.log(new ExtendedClass({ type: 'foo' }));
new ExtendedClass({ name: 'foo' });
If you get this error in Angular+Typescript+NgRX:
You can use the spread operator to take a shallow copy of a readonly object to make it readable, however you may not want this depending on your situation.
let x = [...y];
If you're using Redux / NgRX, there's a chance your selector could be returning a readonly object with a reference to the store, which can throw exceptions when trying to alter that object property via template binding. Depending on your situation, you can take a deep copy to remove the store reference.
let x = JSON.parse(JSON.stringify(y));
You cannot modify the name property of a function. The descriptor says it is not writable...
var BaseClass = function (data) {
Object.assign(this, data);
};
console.log(Object.getOwnPropertyDescriptor(BaseClass, 'name'));
But since it is configurable, you could use Object.defineProperty().
var BaseClass = function (data) {
Object.assign(this, data);
};
Object.defineProperty(BaseClass, 'name', {
writable: true,
value: 'Foo'
});
console.log(BaseClass.name);
EDIT
I'm back! So... As I said previously in comments, I think I have identified your problem. I answered a bit too fast and did not see that your ES5 inheritance is wrong.
ExtendedClass.prototype = Object.create(BaseClass); is not what you want to do. Doing so means the prototype of ExtendedClass becomes a constructor function. This obviously generates an unexpected behavior.
function BaseClass(data) {
console.log(this instanceof BaseClass); // "this" is not an instance of "BaseClass"
console.log(this instanceof Function); // "this" is a function
console.log(this.name); // "this" is "BaseClass"
Object.assign(this, data);
}
function ExtendedClass() {
BaseClass.apply(this, arguments);
}
ExtendedClass.prototype = Object.create(BaseClass);
new ExtendedClass({ type: 'foo' });
In your code, this is a function and refers to BaseClass. That is why you are not allowed to modify its name...
In fact, when working with inheritance in JavaScript, you generally need these two lines:
ExtendedClass.prototype = Object.create(BaseClass.prototype);
ExtendedClass.prototype.constructor = ExtendedClass;
Here is a valid implementation:
function BaseClass(data) {
console.log(this instanceof BaseClass); // "this" is an instance of "BaseClass"
console.log(this instanceof Function); // "this" is not a function
console.log(this.name); // "this" has no name yet
Object.assign(this, data);
}
function ExtendedClass() {
BaseClass.apply(this, arguments);
}
ExtendedClass.prototype = Object.create(BaseClass.prototype);
ExtendedClass.prototype.constructor = ExtendedClass;
var instance = new ExtendedClass({ name: 'foo' });
console.log(instance.name); // foo
console.log(BaseClass.name); // BaseClass
console.log(ExtendedClass.name); // ExtendedClass
The name is reserved property of Function object to which you are trying to set it in. You cannot set it.
documentation for name property is at MDN.
Used ES7+ or TypeScript spread operator feature to overcome this
obj = { ...obj, name: { first: 'hey', last: 'there'} }
If you get this error in Angular+TypeScript:
WRONG / INVALID:
#Output whatever_var = new EventEmitter();
GOOD / CORRECT:
#Output() whatever_var = new EventEmitter();
Most likely you're using readonly object that can't be edited.
Use cloneDeep from lodash.
const x = cloneDeep(y);
where y is readonly object & use x instead of y in your code.
I ran into this issue in Angular, while setting a local variable from ActivatedRoute's queryParams, and attempting to conditionally either override or merge... Duplicating beforehand did the trick:
updateQp(qp = {}, force = false) {
let qpLoc = Object.assign({}, this.queryParamsLocal)
this.queryParamsLocal = force ? qp : Object.assign(qpLoc, qp)
}
In my case, I was trying to swop 2 elements in an array in redux. Here's a simple way of how I altered the redux state while avoiding the readonly issue:
let newData = []
let data = store.getState().events.value
for(let i = 0; i < data.length; i++) {
if(i === fromIndex) {
newData.push(data[toIndex])
}else if(i === toIndex) {
newData.push(data[fromIndex])
}else {
newData.push(data[i])
}
}
this.setEventsData(newData)
The above code creates a new empty array. It then iterates through the readonly array and pushes each item into the new array. This effectively creates a new array with the items of the readonly array positioned in a different order. If you are having trouble editing the values, you could alter the above code and create a new object with the altered values and insert that into the position where you'd like to make the change.
I bumped into this error once with Nestjs, and I fixed it by turning the property type to 'any'
type Product = {
readonly owner: string;
};
const obj: Product = {
owner: 'John',
};
(obj.owner as any) = 'James';
I'm using JavaScript objects like this:
var obj = new Foob;
should I pretend like there is a private way and do:
obj.get('foo');
or should I just try to access directly as :
obj.foo
You can actually have variables which can only be accessed through setters and getters in Javascript:
function Foob(){
var foo = 5;
this.getFoo = function(){
return foo;
}
this.setFoo = function(newFoo){
foo = newFoo;
return this;
}
}
var obj = new Foob;
obj.getFoo(); // 5
obj.foo; // undefined
Or if you want a generic getter/setter:
function Foob(){
// You can set default values in the data object
var data = {};
this.get = function(key){
return data[key];
}
this.set = function(key, value){
data[key] = value;
return this;
}
}
One least known feature of Javascript is that it supports getters and setters natively.
When defining a property, you can either define it simply by :
someObj.prop = 12;
OR you can define getters and setters , using Object.defineProperty and the reserved words get and set :
Object.defineProperty ( someObj, "prop" ,
{ get : function () { return ??; } ,
set : function (val) { /* store val */ } } ;
A way of using such getters/setters inside a 'class' to get a private variable would be :
var MyClass = function() {
var _private = 5;
Object.defineProperty(this, "public", {
get : function() { return _private; },
set : function(val) { _private=val; }
});
return this;
};
var anInstance = new MyClass();
anInstance.public = 12 ;
console.log(anInstance.public) ; // writes 12
console.log(anInstance._private) ; // writes undefined.
so you have a truly private variable, armed with a getter and a setter.
Obviously, there is not much interest to use getters/setters code , unless you want to make bound-checking/type-checking or have a another specific reason.
I used to like the idea of getters and setters when I started using object-oriented JavaScript heavily, but that is because I was coming from a Java background.
ES5 supports getters and setters through a special syntax
See John Resig's explanation:
http://ejohn.org/blog/javascript-getters-and-setters/
My take is to think about why getters/setters are useful. It's so one has a way to encapsulate a variable's access so that it can be intercepted / controlled. If calling code directly mutates another object's instances variables, then you can't change it transparently. Needing to catch all of these mutations requires changing variable scope, adding a getter and setter and altering all calling code.
However, this syntax is transparent to calling code. Therefore, you can simply allow a property to be directly controlled and then if you need to intercept it, to say add a console.log for debugging, you can ADD a getter and setter and it will just work.
function Foob() {
}
Foob.prototype = {
get foo() {
return this._foo;
},
set foo(foo) {
this._foo = foo;
}
};
var o = new Foob();
console.log(o.foo);
The downside to the getter/setter syntax is that it doesn't actually make your variable private, it only "hides" it so that you can use some secret internal name, unless you define it within the constructor as Vincent indicated.
To get truly private:
function Foob() {
var foo;
this.__defineGetter__('foo', function () {
return foo;
});
this.__defineSetter__('foo', function (_foo) {
foo = _foo;
});
}
var o = new Foob();
console.log(o.foo);