[ Web Proxy ]
URL:
Viewing: https://www.javascripttutorial.net/javascript-instanceof/ [Back]  [Original]

JavaScript instanceof
Skip to content

JavaScript instanceof

Summary: in this tutorial, you’ll learn how to use the JavaScript instanceof operator to determine if a constructor’s prototype appears in the prototype chain of an object.

Introduction to the JavaScript instanceof operator

The instanceof operator returns true if a prototype of a constructor (constructor.prototype) appears in the prototype chain of an object.

The following shows the syntax of the instanceof operator:

object instanceof contructorCode language: JavaScript (javascript)

In this syntax:

JavaScript instanceof operator example

The following example defines the Person type and uses the instanceof operator to check if an object is an instance of that type:

function Person(name) {
  this.name = name;
}

let p1 = new Person('John');

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

How it works.

First, define a Person type using the constructor function pattern:

function Person(name) {
  this.name = name;
}Code language: JavaScript (javascript)

Second, create a new object of the Person type:

let p1 = new Person('John Doe');Code language: JavaScript (javascript)

Third, check if the person is an instance of the Person type:

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

It returns true because the Person.prototype appears on the prototype chain of the p1 object. The prototype chain of the p1 is the link between p1, Person.prototype, and Object.prototype:

The following also returns true because the Object.prototype appears on the prototype chain of the p1 object:

console.log(p1 instanceof Object); // trueCode language: JavaScript (javascript)

ES6 class and instanceof operator

The following example defines the Person class and uses the instanceof operator to check if an object is an instance of the class:

class Person {
  constructor(name) {
    this.name = name;
  }
}

let p1 = new Person('John');

console.log(p1 instanceof Person); // true
Code language: JavaScript (javascript)

How it works.

First, define the Person class:

class Person {
  constructor(name) {
    this.name = name;
  }
}Code language: JavaScript (javascript)

Second, create a new instance of the Person class:

let p1 = new Person('John');Code language: JavaScript (javascript)

Third, check if p1 is an instance of the Person class:

console.log(p1 instanceof Person); // trueCode language: JavaScript (javascript)

The instanceof operator and inheritance

The following example defines the Employee class that extends the Person class:

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Employee extends Person {
  constructor(name, title) {
    super(name);
    this.title = title;
  }
}

let e1 = new Employee();

console.log(e1 instanceof Employee); // true
console.log(e1 instanceof Person); // true
console.log(e1 instanceof Object); // trueCode language: JavaScript (javascript)

Since e1 is an instance of the Employee class, it’s also an instance of the Person and Object classes (base classes).

Symbol.hasInstance

In ES6, the instanceof operator uses the Symbol.hasInstance function to check the relationship. The Symbol.hasInstance() accepts an object and returns true if a type has that object as an instance. For example:

class Person {
  constructor(name) {
    this.name = name;
  }
}

let p1 = new Person('John');

console.log(Person[Symbol.hasInstance](p1)); // trueCode language: JavaScript (javascript)

Since the Symbol.hasInstance is defined on the Function prototype, it’s automatically available by default in all functions and classes

You can redefine the Symbol.hasInstance on a subclass as a static method. For example:

class Person {
  constructor(name) {
    this.name = name;
  }
}

class Android extends Person {
  static [Symbol.hasInstance]() {
    return false;
  }
}

let a1 = new Android('Sonny');

console.log(a1 instanceof Android); // false
console.log(a1 instanceof Person); // falseCode language: JavaScript (javascript)

Summary

Was this tutorial helpful ?
Yes No
Search …:

Getting Started

JavaScript Fundamentals

JavaScript Operators

Control Flow

JavaScript Functions

JavaScript Objects

Classes

Advanced Functions

Promises & Async/Await

JavaScript Modules

Javascript Error Handling

JavaScript Runtime

Primitive Wrapper Types

More JavaScript Operators

Copyright © 2009 - Present by JavaScript Tutorial Website. All Right Reserved.


Web Proxy Viewer  |  New URL  |  Original Page