Destructuring a function/method breaks things in Firestore - How? - javascript

Was just playing with Firestore and got everything working. I had this snippet:
this.db.collection('settings').onSnapshot(snapshot => {
snapshot.forEach(doc => {
this.cachedSettings[doc.id] = doc.data();
});
});
But as soon as I destructing data, everything broke. Was a bit confused of what was happening. I assumed it had something to do with this binding.
this.db.collection('settings').onSnapshot(snapshot => {
snapshot.forEach(({ id, data }) => {
this.cachedSettings[id] = data();
});
});
If anyone has any reference, that's ok as well. I couldn't find one since I don't know the proper wording for this problem. Cheers

Ah, found the culprit. It's due to the nature of this in JavaScript. Consider this example:
class Hello {
constructor() {
this.hello = "Hello";
}
returnString() {
return this.hello;
}
}
const { returnString } = new Hello();
console.log(returnString());
This would log undefined. Why? - because this here refers to the function returnString itself when destructured, hence undefined.
However, this would work:
console.log(new Hello().returnString())
In order for the first snippet to work, we need to bind returnString to the class, like so:
class Hello {
constructor() {
this.hello = "Hello";
this.returnString = this.returnString.bind(this);
}
returnString() {
return this.hello;
}
}
const { returnString } = new Hello();
console.log(returnString());
Hope it helps future readers :)

Related

How to avoid doing inheritance

I have an object called a that I use nearly all the time.
Then 'b' comes along being awkward and I need to do some other things before calling notify.
What is the best functional/prototypical approach to take get the same thing has called the parent in object-oriented (Which I understand to not be possible without using Javascript classes - correct me if I'm wrong)
let a = {};
a.notify = () => {
doSomethingCool();
}
var b = Object.create(a);
b.notify = () => {
doCoolStuffFirst();
doSomethingCool();
}
As you say, it is easy with classes:
class A {
notify() {
doSomethingCool();
}
}
class B {
notify() {
doCoolStuffFirst();
super.notify();
}
}
Without ES6 classes, you're in for a rough ride. ES6 compiler translates super.notify() into something like
_get(
B.prototype.__proto__ ||
Object.getPrototypeOf(B.prototype),
"notify", this
).call(this);
(with _get being a kind-of-huge utility method to smooth the rough edges about different kinds of values and inheritance and stuff). It's not impossible, it's just complicated enough that you probably don't want to do it by yourself.
It's not quite clear what you're asking. Are you simply looking for
const notify_orig = b.notify;
b.notify = () => {
doCoolStuffFirst();
notify_orig.call(b);
}
?
Without using __proto__ or class (which is syntactic sugar in ES6).
function doSomethingCool() {
console.log("something cool");
}
function doCoolStuffFirst() {
console.log("cool stuff first");
}
let a = {};
a.notify = () => {
doSomethingCool();
}
a.notify();
let b = Object.create(a)
b.notify = (() => {
let notifySuper = b.notify; // reference to the 'super' method
return () => {
doCoolStuffFirst();
notifySuper();
}
})();
b.notify();

Frida hook final native

I have this Java code:
final String b() throws Exception {}
.....
return v0;
public final void b(Application arg6) {}
How I can get the return value of the first function?
This is my javascript code, I hooked it with frida but it not work.
testfunction: function () {
Java.perform(function () {
var encrypter = Java.use("es");
return encrypter.b();
});
},
Anyone can tell my how i can solve this. Thanks so much.
When you define an export, you don't have to overload the method. For example, in your situation:
rpc.exports = {
testfunction: function () {
Java.perform(function() {
var es_class = Java.use("es");
return es_class.b();
});
}
}
Additionally, check if your function (testfunction) is inside the rpc.export section.
Let me know if this solve your problem.
Currently your code is not hooking anything. To hook a function, you need to override its implementation as follows:
Java.perform(function () {
var encrypter = Java.use("es");
// Overload needed because two 'b' functions exist:
var b = encrypter.b.overload();
b.implementation = function() {
const retVal = b.call(this);
console.log("hook succeeded! Return value: " + retVal);
return retVal;
};
});
Checkout the documentation and this cheat sheet for more common examples.

How do I call a function inside a struct from that function in node.js?

Okay, this is a basic outline of my code
exports.entity = {
name:"Foo",
//Etc...
start:function() {
this.attack();
},
attack:function() {
setTimeout(attack, 1000); //Doesn't work
setTimeout(this.attack, 1000); //Doesn't work
setTimeout(this, 1000); //Doesn't work
}
}
As you can probably see, I would like to call attack() from inside that function using a setTimeout. Unfortunately, everything I've tried doesn't work, and I'm running dry on ideas. I couldn't find anything on the internet. Does anyone know how I can achieve this?
Note:
When I say doesn't work, I mean that it gives me an error saying something like (insert what I tried here, e.g. 'this.attack') is not a function
What I usually do to avoid problems of scope is to split the functions. And then export the object.
const attack = () => {
console.log('attacking');
setTimeout(() => {
stop();
}, 1000)
};
const stop = () => {
console.log('stopping');
}
const start = () => {
attack();
}
module.exports = { start, stop, attack }
Otherwise you can bind(this) as it was suggested in the comments.
setTimeout has own scope that is why It is overriding this
You can use bind or take variable outside setTimeout
//using bind
setTimeout((function() {
this.attack();
}).bind(this));
//using variable
var context = this;
setTimeout(context.attack, 1000);
It can look like this:
let entity = {};
entity.name = "Foo";
// Etc...
entity.start = function() {
this.attack();
}.bind(entity);
entity.attack = function() {
console.log('attack');
setTimeout(this.attack, 1000); //Doesn't work
}.bind(entity);
exports = { entity };

Unknown Meaning of ES6 Syntax

Currently I am working on Learning React and Redux. I have found a boilerplate, and I am working on looking through all of the example code. My problem is I don't completely understand what a lot of this ES6 syntax means.
What I have learned so far is that hello = () => "Hello"; would be equivalent to:
hello = function hello() {
return "Hello";
};
Then changing the above to hello = name => "Hello " + name; would convert it to:
hello = function hello(name) {
return "Hello " + name;
};
That all makes perfect sense, basically it is just shortening it down so you don't have to write the function and its return statement. Yet, I have come across some syntax that I cannot rap my head around. It is as follows:
const mapActionCreators = {
increment: () => increment(1),
doubleAsync
}
The above code is converted to:
var mapActionCreators = {
increment: function (_increment) {
function increment() {
return _increment.apply(this, arguments);
}
increment.toString = function () {
return _increment.toString();
};
return increment;
}(function () {
return increment(1);
}),
doubleAsync: doubleAsync
};
I understand that () => increment(1) in this case is being turned in to:
(function () {
return increment(1);
}),
Overall I guess my question is, how does increment: get converted in to:
increment: function (_increment) {
function increment() {
return _increment.apply(this, arguments);
}
increment.toString = function () {
return _increment.toString();
};
return increment;
}
What is the meaning of the code?
Arrow functions capture the value of this from the scope they are created in.
apply lets you call a function and explicitly the value of this in it.
The rest of the code is just feeding the correct this to the function.
(And toString is making sure that the right function gets stringified if you try to stringify the generated function).

How to implement chained method calls like jQuery?

So I am (still) completely in love with the almighty jQuery, and I have my own growing library of utilities that I want to codify in a java-script object. And I would like to keep syntax similar to that of jquery for the sake of simplicity for my other front end devs. So I want something like this:
foo(argument).method(argument);
I have been trying something like this:
var foo = function(str){
this.str = str;
}
foo.prototype = {
alertTest : function(additional){
alert(this.str + ' ' + additional);
}
}
So that foo('hello').alertTest('world); with alert 'hello world'
I know this is possible, but I am not an OO guy and need help getting this simple thing right. Please help. I also intend on having many foo().bar(); type functions, like foo().somethingelse(); and foo().anotherthing(); . I have made several attempts, but am struggling hard here. Also there must be an awesome tight way of doing it.
Thanks folks!
You are almost there:
new foo('hello').alertTest('world');
or if you don't like the new:
var bar = function bar(str) {
this.str = str;
};
bar.prototype = {
alertTest : function(additional){
alert(this.str + ' ' + additional);
return this;
}
};
function foo(str) {
return new bar(str);
}
foo('hello').alertTest('world');
Live Demo.
I did something like this a while ago and it was a ton of fun to create!
If i remember correctly, To be able to use dot-operators, I had to return the object as part of the original function call. This way I could chain lots of stuff together like $(id).value('asdf').color('#ff0000')
function $(id){
this.e = document.getelementbyid(id)
me = this
this.val = function (newval) {
this.e.value = newval;
return me; // <- Important
};
return this; // <- Important
}
$("textbox1").val("New Value") // changes textbox1's value to "New Value"
If it helps for reference: http://www.mikedoesweb.com/vis/
Something I did really quick but you can relate to the essence of what we are trying to achieve here -
function ChainingObj() {
if (!(this instanceof ChainingObj)) {
return new ChainingObj();
}
}
ChainingObj.prototype.first = function() {
console.log("foo");
return this; //important to return this.
}
ChainingObj.prototype.second = function() {
console.log("bar");
return this;
}
var a = ChainingObj().first().second();

Resources