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

By: Fun Fun Function

2721   33   81069

Uploaded on 08/01/2016

This video is the first in a video series about how to do Object Creation in JavaScript. I will NOT be teaching object orientation principles in general - this video series is for you if you’re already pretty familiar with object orientation, but confused around how it works in JavaScript specifically. At the end of this series, you’ll be a lot less confused about the prototype, classes, bind, Object.create, modules, factories, constructors and so on.

Object Creation in JavaScript
https://goo.gl/KFeTFN

Higher-order functions in JavaScript
https://goo.gl/3aTDR6

Comments (7):

By anonymous    2017-09-20

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 parameters).

If you haven't read up on bind, I'd recommend this video

Original Thread

By anonymous    2017-09-20

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: Home},
});

export default class ECart extends Component {
  render() {
    return (
      <App />
    );
  }
}

This way, Ecart is passed to AppRegistry, and it has App (navigation component), which will handle navigations. Because App is responsible for navigation, you should declare your 'routes' and corresponding components that navigation component, like i included Login Screen above. Because Login is first in your StackNavigator declaration, it will be first screen when app is loaded.

Now, every compononent that you passed through StackNavigator will have navigation prop, passed by react-navigation. With that prop, you can navigate to other screens in your app. So, because you in your code Login component is not passed to StackNavigator, this.props.navigation will be undefined. And when you try to access this.props.navigation.navigate, it will throw an error, where it says, that undefined is not an object.This explains your main error, but it is not only error in the code you paste here.

In your Login component, you have

onButtonPress= () => {
    navigate(Home, { name: 'Jane' });
};

which calls navigate function, but it is not declared anyware. So, when you will resolve first error, you will see another error when you press your button, Undefined is not a function. So, to solve this you have to do two things. First, declare navigate function, second bind onButtonPress method.

onButtonPress() {
    const { navigate } = this.props.navigation; 
    navigate('Home', { name: 'Jane' });
};

and bind this method like

constructor(props) {
    super(props);
    this.state = {};

    this.onButtonPress=this.onButtonPress.bind(this);
}

If you are thinking, what the hell is binding, take a look at this video

Original Thread

By anonymous    2018-01-14

for Javascript beginners with OOP background like me, I found this is easiest explanation to understand,

https://www.youtube.com/watch?v=GhbhD1HR5vk

You can jump to 5:00 but I would recommend watch it from beginning.

Original Thread

By anonymous    2018-01-22

Given the following code I am struggling to figure out how to set value of button back to original state, after it is clicked once ?

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

/**
 * links : https://www.youtube.com/watch?v=GhbhD1HR5vk&t=297s
 * https://reactjs.org/docs/handling-events.html
 * 
 * 
 * 
 */
class Input extends Component {

    constructor(props) {
        super(props);

        this.state = { 
            tagged: false,
            user: '', 
            tag: ''
        }

       this.handleUserChange = this.handleUserChange.bind(this);
    }

    handleClick(e) {
        this.setState({tagged: true});
        e.preventDefault();
        console.log('The link was clicked.');
    }

    handleUserChange(e) {
       console.log("e.target.value");
       this.setState({user: e.target.value});
    }

    handleTagChange(e) {
        console.log(e.target.value);
        this.setState({tag: e.target.value});
     }

    render() {                                                
        return (
            <div id="id" style={divStyle}>
                <p> hello </p>
                <input
                    style = {textStyle}
                    placeholder="user@email.com" 
                    type="text"
                    onChange={ this.handleUserChange.bind(this) } 
                >
                </input>

                <input
                    style = {textStyle}
                    placeholder="tag" 
                    type="text"
                    onChange={ (e) => this.handleTagChange(e) }
                >
                </input>
                <button
                    onClick={(e) => this.handleClick(e)}
                    style={buttonStyle}>
                    {this.state.tagged ? 'Tagged' : 'Tag ' } 
                </button>

                <p>
                    {this.state.tagged ? this.state.user + ' was tagged with ' + this.state.tag : ''}
                    {/* {this.setState({tagged: false})} */}
                </p>
            </div>    
        )
    }
}

var divStyle = {
    position: 'relative',
    top:'50%',
    left: '15%',
};

var textStyle = {
    margin: '20px 20px 20px 20px',
    height: '20px',
    width: '200px',
};

var buttonStyle = {
    margin: '20px 20px 20px 20px',
    background: '#7FFFD4',
    color: 'black',
    height: '25px',
    width: '250px'
};  

export default Input;

Original Thread

By anonymous    2018-02-12

The example that you gave didn't work but what you probably want to do is bind 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

Original Thread

Popular Videos 772

Submit Your Video

If you have some great dev videos to share, please fill out this form.