This question already has answers here:
What is the use of the JavaScript 'bind' method?
(23 answers)
Closed 6 years ago.
In some part of onInit function of a controller in a SAPUI5 application there is an auto generated code like this:
this.getView().addEventDelegate({
onBeforeFirstShow: function() {
// Some codes
}.bind(this)
});
Now my question is what does .bind(this) mean? What does it do? Is it a pure JavaScript code or it is related to SAPUI5?
Yes, it's pure JavaScript code, you can learn more about what bind is and does here
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
In this case what it does is basically binding the current this to that function, so when onBeforeFirstShow is called, the this inside that function will be the one passed to the bind function.
You may also want to look at the new arrow function syntax in ES6, it auto binds the current this so bind(this) is not necessary.
It binds the listener of the function to the current class, then when you use this pointer inside of the onBeforeFirstShow function, the this pointer refer to encapsulated class and you can access to its members.
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Syntax
fun.bind(thisArg[, arg1[, arg2[, ...]]])
Reference to Mozilla Developer Network
Related
This question already has answers here:
Can you rebind a rebound function using `bind`
(3 answers)
How to override 'this' parameter of a bound function in javascript
(3 answers)
Javascript function bind override (how to bind it to another object)
(2 answers)
Closed 4 months ago.
I have a question about Function.prototype.bind.
function f() {
return this;
}
const g=f.bind({foo:'foo'});
const h=g.bind({bar:'bar'});
console.log(h()); // expected {bar:'bar'} but get {foo:'foo'}
I was expecting the above snippet to produce either {foo,bar} or {bar} but instead I get {foo}.
Can you explain what is going on?
Using .bind() to create a function that "fixes" the value of this in the called function results in a function where this cannot be overridden.
What you get back from .bind() is a new function that will pass along arguments to the original target function, with a guarantee that in that called function the value of this will be what you ask for. Re-binding that function therefore does no good: you do get back a new function, but it calls a function (the first bound function) that explicitly ignores its own this value.
This question already has answers here:
React Function Calling Methods
(3 answers)
Closed 8 months ago.
I have noticed that (at least in React) there are different ways to call a function. I'd say:
onClick={myFunction}
onClick={myFunction()}
onClick={()=>myFunction}
onClick={()=>myFunction()} /*Not sure if I've seen this type*/
Being the case all are correct, what are the difference between them?
onClick={myFunction}
Assigns myFunction to onClick.
onClick={myFunction()}
Calls myFunction immediately and assigns the return value (which needs to be another function) to onClick.
This is often an error caused by people not understanding how () works and wanting the previous syntax.
onClick={()=>myFunction}
Creates a new function and assigns it to onClick.
The new function mentions myFunction but doesn't do anything with it. It is a noop.
It is always a mistake.
onClick={()=>myFunction()}
Creates a new function, which calls myFunction, and assigns it to onClick.
This is usually a waste of resources. It is useful only if myFunction would do something with the event object that onClick passes to the event handler when called and you want to prevent that.
If you were to pass arguments to myFunction (which this example does not) then it would be more generally useful.
This question already has an answer here:
Mystery of "this" in ReactJS
(1 answer)
Closed 3 years ago.
We all know that this will be undefined according to the given code of React. We have many solutions for this problem, like binding, arrow function, etc. I want to know the reason behind this behavior. Please, explain the reason for the behavior of this reference, instead of solutions.
class Foo extends Component {
clickHandler() {
console.log(this);
}
render() {
return <button onClick = {this.clickHandler}> Click Me </button>;
}
}
1)this.clickHandler=this.clickHandler.bind(this) is returns a new function,in which reference to 'this' will refer to the function this is the way of saving the current value of this which is scope during the call to the constructor so that it can be called later the function is called.
if our function dont require access to the state at your component then sure you dont need to bind this.
2)arrow functions automatically bind this, that’s why we don’t need to use .bind() method.
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
jQuery - trigger not produce the expected result
(1 answer)
Closed 7 years ago.
I have declared a JavaScript object:
function A(name){
this.name=name
}
A.prototype.test=function(){
console.log(this.name);
};
as a simple example I have set up a button that if it's clicked should output a variable to the local console log:
<button id='test'>test</button>
the script:
var t=new A('hello');
$('#test').click(t.test);
when I click the button I want this.name to show (in this case 'hello'), but instead this refers to the clicked button, and not to the object I created.
this is a debugging script of course. In real life I'm binding a function to the window.resize event which will re-build a window on resizing.
There is a JSFiddle that shows the problem.
I have one solution for this, that is declaring the resize (or click function) in the constructor of the object and using an alternative name for this, like so (Here's the JSFiddle):
function A(name){
this.name=name
var self=this;
$("#test").click(function(){
console.log(self.name);
});
}
but I'd rather use a prototype and bind the function in the object's constructor. How can I do this using prototypes?
You can use bind, which will set the value of this ahead of time:
var t=new A('hello');
$('#test').click(t.test.bind(t));
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 6 years ago.
I have a listener like this one :
this.frame.on('touchend', self.findClosestSlide);
I need to have it like this, instead of inside an anonymous function in order to be able to unbind it later, using the function name.
My problem is that, once I am in the findClosestSlide function, my this object logically becomes this.frame.
How can I access the original this, or how can I have control on the context I'm sending to my callback function? (without using an anonymous function)
You can use Function.bind() or $.proxy() to pass a custom context to a callback like
Cross Browser, use $.proxy()
this.frame.on('touchend', $.proxy(self.findClosestSlide, self));
or IE9+, use function.bind()
this.frame.on('touchend', self.findClosestSlide.bind(self));
Why? because by default this inside the event handler will refer to the element that was targeted by the event
You can store this inside another variable such as that or $this than using it inside your findClosestSlide function.