Prototype Chain

When you access a property on an object, JavaScript first checks the object itself. If not found, it walks up the prototype chain until it finds the property or reaches null.

How Lookup Works

const animal = {
  eats: true,
  walk() {
    return 'Walking...';
  }
};

const dog = Object.create(animal);
dog.barks = true;
dog.bark = function() {
  return 'Woof!';
};

const rex = Object.create(dog);
rex.name = 'Rex';

Lookup chain for rex.bark():

1. Check rex → not found
2. Check dog → found! (function)

Lookup chain for rex.eats:

1. Check rex → not found
2. Check dog → not found
3. Check animal → found! (true)

Lookup chain for rex.name:

1. Check rex → found! ('Rex')

console.log(rex.name);    // 'Rex' (own property)
console.log(rex.bark());  // 'Woof!' (from dog)
console.log(rex.eats);    // true (from animal)
console.log(rex.walk());  // 'Walking...' (from animal)

Property Shadowing

const parent = { value: 10 };
const child = Object.create(parent);

console.log(child.value); // 10 (from parent)

// Shadow the property
child.value = 20;
console.log(child.value); // 20 (own property)
console.log(parent.value); // 10 (unchanged)

// Delete own property
delete child.value;
console.log(child.value); // 10 (from parent again)

hasOwnProperty() checks if a property is defined directly on the object (not inherited).

Basic Usage

const person = {
  name: 'Alice',
  greet() {
    return `Hello, ${this.name}`;
  }
};

console.log(person.hasOwnProperty('name'));   // true (own)
console.log(person.hasOwnProperty('greet'));  // true (own)
console.log(person.hasOwnProperty('toString')); // false (inherited)

Checking Own vs Inherited

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.start = function() {
  return `${this.make} started`;
};

const myCar = new Car('Toyota', 'Camry');

console.log(myCar.hasOwnProperty('make'));   // true (own)
console.log(myCar.hasOwnProperty('start')); // false (prototype)
console.log('start' in myCar);             // true (own + prototype)

Safe hasOwnProperty Check

// What if object doesn't have hasOwnProperty?
const obj = Object.create(null);
// obj.hasOwnProperty is undefined!

// Safe version
const hasOwn = (obj, prop) => 
  Object.prototype.hasOwnProperty.call(obj, prop);

console.log(hasOwn(obj, 'toString')); // false
console.log(hasOwn({ a: 1 }, 'a'));  // true

Common Patterns

// Filter own properties
const ownProps = Object.keys(obj).filter(key => 
  obj.hasOwnProperty(key)
);

// Get all own properties with values
function getOwnProperties(obj) {
  return Object.getOwnPropertyNames(obj).reduce((acc, key) => {
    acc[key] = obj[key];
    return acc;
  }, {});
}

// Check if property exists (own or inherited)
function propertyExists(obj, prop) {
  return prop in obj;
}

instanceof checks if an object's prototype chain contains the prototype property of a constructor.

Basic Usage

function Animal() {}
function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const rex = new Dog();

console.log(rex instanceof Dog);    // true
console.log(rex instanceof Animal); // true
console.log(rex instanceof Object); // true

How instanceof Works

// instanceof checks the prototype chain
function instanceOf(obj, Constructor) {
  let proto = Object.getPrototypeOf(obj);
  while (proto !== null) {
    if (proto === Constructor.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

// Usage
console.log(instanceOf(rex, Dog));    // true
console.log(instanceOf(rex, Animal)); // true

instanceof with Built-ins

const arr = [1, 2, 3];
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object); // true

const date = new Date();
console.log(date instanceof Date);  // true
console.log(date instanceof Object); // true

const regex = /test/;
console.log(regex instanceof RegExp); // true

instanceof vs typeof vs Object.prototype.toString

const obj = {};
const arr = [1, 2, 3];
const fn = function() {};

// typeof - basic type checking
console.log(typeof obj);  // 'object'
console.log(typeof arr);  // 'object' (not helpful!)
console.log(typeof fn);   // 'function'

// instanceof - prototype chain checking
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

// Object.prototype.toString - detailed type
console.log(Object.prototype.toString.call(arr)); // '[object Array]'
console.log(Object.prototype.toString.call(fn));  // '[object Function]'

Limitations

// instanceof doesn't work across frames/iframes
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeArray = iframe.contentWindow.Array;
const arr = new iframeArray();

console.log(arr instanceof Array); // false (different Array)
console.log(Array.isArray(arr));  // true (recommended)