Coding Recipes
  • Introduction
  • Welcome
    • Introduction
  • SEO Recipes
    • How can I add more metadata to my page to improve SEO?
  • Console Recipes
    • How to colour text in the browser and server console
  • Array Recipes
    • How can I filter out falsey values?
  • Object Recipes
    • How can I clone an object?
    • How can I destructure an object?
    • How can I pretty-print an object?
    • How can I conditionally add a key-value into an object?
    • How can I pull keys, values and entries off an object?
    • How can I build an object with computed property names?
    • What does 'this' mean?
    • How does inheritance work between objects?
    • How can I build a query string from an object?
    • How to instantiate a class using an object of that class?
    • Nested Ternaries vs Switch Statements
  • String Recipes
    • How can I tokenise a string of values into an array?
    • How can I parse a template string into its constant and variable parts?
  • Function Recipes
    • How to find out where your function is being called from
    • How can I simplify argument validation in a function?
    • How would I handle errors?
    • What types of functions can I rebind 'this' on?
    • How can I find out the length of a function's parameter list?
  • Asynchronous Recipes
    • How do I use fetch?
    • How do I use Promises?
    • How do I use async and await?
    • How do I use jQuery to make async calls?
    • How can I use Axios to make async calls?
    • How can I use Web Workers to achieve parallelism?
  • React Recipes
    • How can I DRY-up passing props to a React component?
    • How can I conditionally render JSX?
    • What are the different types of PropTypes I can use?
    • How can I handle a component throwing an uncaught exception?
    • How can I use context to selectively pass data down a component hierarchy? (2 approaches)
    • How to define a Higher Order Component (HOC) in React
    • What are the different lifecycle methods in React?
    • HOCs vs. RenderProps - How To Share State
    • How to use refs in React (3 Approaches)
  • React Router Recipes
    • How do I install react router 4 as an application dependency
    • What are the different types of routes that I can create?
    • How can I navigate between different types of routes?
    • How can I style the link for the route that is currently active?
    • How can I pass parameters to my routes?
    • How can I match routes by making sure parameters match a specific format?
    • How can I parse query parameters from a route?
    • How can I define a default catch-all route?
    • How can I render multiple components for a single route?
    • How can I create nested routes?
    • How can I redirect from one route to another route?
    • How can I intercept transitioning from one route to another route?
  • Conditional Logic Recipes
    • How can I avoid using multiple if..else if...else if style code?
    • How can I check which of several booleans is true?
  • RxJS Recipes
    • How can I subscribe to a series of numbers?
    • How can I subscribe to an array of numbers?
    • How can I transform an array of numbers?
    • How can I listen to double-click events?
    • How can I create an Observable from something else?
  • Redux Recipes
    • Redux - Architecture
    • React-Redux - Architecture
    • How to define custom middleware for Redux
    • How to enable Hot Module Reloading for a React-Redux-Webpack application
  • GraphQL
    • How can I create a simple GraphQL client and server?
    • Stuff
Powered by GitBook
On this page

Was this helpful?

  1. Object Recipes

How does inheritance work between objects?

// Define a constructor function
function Person(name) {
  this.name = name
}
// A constructor function has a `prototype` property
console.log(Person.prototype)
// Instances of the constructor function are given a property of `__proto__`
const ben = new Person('Ben')
console.log(ben.__proto__)
// The `__proto__` property aliases the constructor function's prototype
const errorMessage = 'Error: __proto__ should alias prototype'
console.assert(ben.__proto__ === Person.prototype, errorMessage)
// Methods added to the constructor function's `prototype` property are shared between instances
Person.prototype.setName = function(name) {
  this.name = name
}
const alexis = new Person('Alexis')
const roger = new Person('Roger')
roger.setName('Roget')
const errorMessage = 'Error: setName should be the same'
console.assert(alexis.setName === roger.setName, errorMessage)
// Properties and methods added to `this` in the constructor function are not shared between instances
function Person(name) {
  this.name = name
  this.setName = function(name) {
    this.name = name
  }
}
const robin = new Person('Robin')
const mladen = new Person('Mladen')
const errorMessage = 'Error: setName should be different'
console.assert(robin.setName !== mladen.setName,errorMessage )
// Define properties and methods defined on the prototype property
Person.prototype.age = 10
Person.prototype.setAge = function(age) {
  this.age = age
}

// Notice how you can access them via instances (Rather than explicitly via `prototype`)
const asad = new Person('asad')
asad.setAge(42)
console.log(asad.age)

// This is because when you access a property/method on an instance, 
// (1) it looks on itself for that property/method and returns it if found; else...
// (2) it looks on its `__proto__` property which aliases the constructor function's `prototype` property
// (3) it keeps looking up the `__proto__` chain until it find its property/method
// (4) it stops when it reaches Object.prototype.__proto__ because that is null
function Rabbit() {
  this.getName = function() { return 'rabbit' }
}
Rabbit.prototype.getAge = function() { return 10; }
const robbie = new Rabbit()
console.log('Access method on instance directly: ', robbie.getName())
console.log('Access method on instance via prototype: ', robbie.getAge())
// How can I make one class inherit from another class?

// Approach 1
function Person(name) { this.name = name }
function Student(name) { Person.call(this, name) }
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student

// Approach 2
class Person { constructor(name){ this.name = name }}
class Student extends Person { constructor(name){super(name)}}
PreviousWhat does 'this' mean?NextHow can I build a query string from an object?

Last updated 5 years ago

Was this helpful?