bind and this - Object Creation in JavaScript P1 - FunFunFunction #43

Fun Fun Function · 263K views · 2016 · 15:39

Open on YouTube

Web developmentPython, Ruby & scripting languagestutorial

Why Stack Overflow recommends it

Stack Overflow users link it when an answer or comment involves losing `this` context and the asker needs a clear explanation of `.bind`.

Recommended by 5 people across 5 different months, 2016 to 2024.

What it is

A 15-minute episode of Fun Fun Function (mpj) that opens a series on object creation in JavaScript. It focuses on how `this` works and how `bind` fixes it, for viewers who already know object orientation but are confused by how JavaScript does it.

What people said

Recommends Nebula · 2016-11 · Stack Overflow · on “How to call your own method using "this" on a DOM node”

As another alternative, you could also pass the element right to alertHTML : function alertHTML(el) { alert(el.innerHTML) } function myFunc(id) { var elArg = document.getElementById(id) alertHTML(elArg) // You could also write it like this: /* alertHTML(document.getElementById('h1')) */ } <h1 id='h1'>Hello, world</h1> <button onclick="myFunc('h1')">Button</button> There's a plethora of reasons to do that, but the gist of it is to avoid having issues if somebody else creates a alertHTML method on the Element prototype. EDIT: If you really want to use this , you might also like to learn about binding functions - funfunfunction made a good video on this here [this video] . Here's how that would work

Recommends Sean Newell · 2017-03 · Stack Overflow · on “Storing functions and their parameters in an array to call later”

Storing the parameters is the problem. Here is how to store the function references: getTableAssignments([func1, func2, func3]); Here is how to bind the parameters to the functions prior to execution. This returns a new function. There are other ways to do it, but I think this would be the simplest. var boundFunc1 = func1.bind(null, param1, param2); var boundFunc3 = func3.bind(null, param3); getTableAssignments([boundFunc2, func2, boundFunc3]); You can also store your parameters in an object as arrays, and lookup those stored parameters with the function name, but that seems messy, so I won't expound on that method (and it would require you to change the calling to code the lookup the parame

Recommends nloomans · 2018-02 · Stack Overflow · on “How do I get a proper "this" when a class method is called by an external class with arrow functions?”

The example that you gave didn't work but what you probably want to do is bind [LINK] the this of the function to the this of the class: class A { constructor() { this.text = 'A'; this.b = new B(this); // bind the this of handleEvent permanently to the this of the class. this.handleEvent = this.handleEvent.bind(this); } handleEvent = () => { console.log(this.text); // outputs 'A' } } class B { constructor(a) { this.text = 'B'; this.a = a; setTimeout(() => { this.handleEvent(); }, 1000); } handleEvent = () => { this.a.handleEvent(); } } BTW, here is a great youtube tutorial on bind [this video]

Recommends Bytech · 2018-11 · Stack Overflow · on “Losing context when passing function from parent to child component's Input() property”

While it sounds like maybe structurally you're doing things in a way that goes against the Angular design pattern, what you're experiencing here is scope issues. MPJ has an excellent video tutorial on how .bind 'can re-point where .this' refers to. You'll find it at [this video]

Recommends Michael Guild · 2024-03 · Stack Overflow · on “Displaying JSON data with Vue3”

@Takuhii you're dealing with an object that has a nested array of objects. So what Moritz is saying is that you need to brush up on how to access properties within an object. This isn't entirely relevant and kind of old but I recommend you watch fun fun functions: [this video]

Cites magneticz · 2017-06 · Stack Overflow · on “react native navigator:Undefined is not an object(evaluating this.props.navigation.navigate)”

It seems that you have copy-pasted code from different sources(maybe tutorials) and hope it will work, but usually it doesn't. In your code you have several mistakes. First of all, in index.android.js file you have ECart component, which is passed to AppRegistry.registerComponent() function. So, this component is a starting point for you application. You also have App variable, which is actually also a component, but you never use it. So now, your app doesn't use react-navigation, as it is not included anyhow. In order to use navigation library, you have to pass it to the app registry on some level. For example like this const App = StackNavigator({ Login: {screen: Login}, Home: {screen: Hom