What is this? 🧐
🧵 Why must bind?

Questioning the meaning of life
Next

Self-referencing in object-oriented programming

Back Next

Dynamic binding…?

The process of determining the method to invoke at run-time rather than compile-time.

Back Next

Javascript is OOP??

  • Encapsulation
  • Message-passing
  • Behaviour sharing
  • Subclass polymorphism
“Programming using these kinds of objects does not make your code ‘object-oriented’ any more than programming with functions makes your code ‘functional’.”
—Eric Elliott
Back Next

this in Javascript

It's about where the function was invoked, not where it was declared

Back Next

Why var that = this?

function Animal() {
  this.age = 0

  setInterval(function growUp() {
    this.age++
  }, 1000)
}

var panda = new Animal()

setInterval(function() {
  console.log(panda);
}, 1000)
function Animal() {
  var that = this
  that.age = 0

  setInterval(function growUp() {
    that.age++
  }, 1000)
}

var panda = new Animal()

setInterval(function() {
  console.log(panda);
}, 1000)
Back Next

Implicit binding

const animal = {
  name: 'Panda',
  greet() {
    alert(`I am a ${ this.name }`)
  },
  family: {
    name: 'Ursidae',
    greet() {
      alert(`I belong to the ${ this.name } family`)
    }
  }
}

animal.greet()
animal.family.greet()
Back Next

Explicit binding (part 1)

function intro() {
  alert(`I am a ${ this.name } and I ${l1}, ${l2} and ${l3}`)
}

const animal = {
  name: 'Panda',
}

const life = ['eat', 'play', 'sleep']

greet.call(animal, life[0], life[1], life[2])
function intro() {
  alert(`I am a ${ this.name } and I ${l1}, ${l2} and ${l3}`)
}

const animal = {
  name: 'Panda',
}

const life = ['eat', 'play', 'sleep']

greet.apply(animal, life)
Back Next

new binding

function Animal (name) {
  this.name = name
}

const panda = new Animal('Panda')
Back Next

Lexical binding

function Animal() {
  this.age = 0

  setInterval(() => {
    this.age++
  }, 1000)
}

const panda = new Animal()

setInterval(function() {
  console.log(panda);
}, 1000)
Back Next

Window binding

function whatIsThis() {
  return this;
}

// In a browser:
whatIsThis() === window; // true 

// In Node:
whatIsThis() === global; // true
function whatIsStrictlyThis() {
  'use strict';
  return this;
}

whatIsStrictlyThis() === undefined; // true
Back Next

Explicit binding (part 2)

function Animal() {
  this.age = 0

  var boundGrowUp = (function growUp() {
    this.age++
  }).bind(this)

  setInterval(boundGrowUp, 1000)
}

var panda = new Animal()

setInterval(function() {
  console.log(panda);
}, 1000)
Back Next

This is React Knowledgeable, React di mana?

Let's talk about event handling…

// JSX passes event handler as function
<button onClick={handleClick}> Click me</button>

// HTML passes inline event handler as string
<button onclick="handleClick()">Click me</button>
Back Next

To make sure this works right

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      clicked: !state.clicked
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick} />
    );
  }
}
class Button extends React.Component {
  state = { clicked: false };

  handleClick = () => {
    this.setState(state => ({
      clicked: !state.clicked
    }));
  };

  render() {
    return (
      <button onClick={this.handleClick} />
    );
  }
}
Back Next

Use those Hook things everyone loves so much

function Button() {
  const [clicked, setClick] = useState(false);
  const handleClick = () => setClick(!clicked);

  return (
    <button onClick={handleClick} />
  );
}
Back Next

Bunch of articles on binding…

Back Next

In case Chia is late…

🦝

“To some zoologists, all animals are pandas, just vary by color…”
–My wise friend, Gao Wei

Back Next

Someone better call Chia at this point…

Hui Jing does more bo liao tings

Hui Jing's bo liao project

Github Repo: https://github.com/huijing/sgtechonline

Back Next

💩 kthxbye 💩

Back
Start