Self-referencing in object-oriented programming

• First object-oriented programming language was Simula 67
• Introduced classes, class inheritance, subclasses and virtual methods
• Term “object-oriented” was coined by Alan Kay
• Considered essential ingredients of OOP to be:
  • Message passing
  • Encapsulation
  • Dynamic binding
• Simula also introduced the ability of an object to reference itself using the keyword this

Dynamic binding…?

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

Javascript is OOP??

this in Javascript

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

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)

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()

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']

intro.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']

intro.apply(animal, life)

new binding

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

const panda = new Animal('Panda')

Lexical binding

function Animal() {
  this.age = 0

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

const panda = new Animal()

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

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

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)

This is React Knowledgeable, React di mana?

// 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>

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} />
    );
  }
}

Use those Hook things everyone loves so much

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

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

Bunch of articles on binding…

• What is `this`? The Inner Workings of JavaScript Objects
• MDN: Function.prototype.bind()
• How to Eyeball Your ‘This’ Context in Javascript
• Function binding
• Understanding the "this" keyword, call, apply, and bind in JavaScript
• Understanding JavaScript Bind ()
• Private Members in JavaScript
• Getting Out of Binding Situations in JavaScript
• SO: How does the “this” keyword work?
• Don't Use Bind When Passing Props

In case Chia is late…

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

Someone better call Chia at this point…

Hui Jing does more bo liao tings

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

💩 kthxbye 💩