isPrototypeOf Function in JavaScript

isPrototypeOf Function in JavaScript

Sometimes when you look at some framework source code, you will encounter isPrototypeOf() function. So what does this function do?

1. isPrototypeOf()

isPrototypeOf() is a method under the Object function (class) that is used to determine whether the current object is the prototype of another object. If so, it returns true , otherwise it returns false .

The key to understanding this function is on the prototype chain, which is said to be one of the three major mountains of JavaScript .

The principles are not described in detail here, but simply put, there are three points:

  • 1. Function objects are born with a prototype property.
  • 2. Every object is also born with a property __proto__ pointing to prototype of the function object that generates it.
  • 3. prototype of a function object also has __proto__ pointing to prototype of the function object that generated it.

Example 1, Object class instance:

let o = new Object();
console.log(Object.prototype.isPrototypeOf(o)); // true


Because the o object is an instance of Object , the prototype (__proto__) of the o object points to the prototype ( prototype ) of Object , and true will be output above.

Example 2: Define the Human class yourself:

function Human() {}
let human = new Human();
 
console.log(Human.prototype.isPrototypeOf(human)); // true


This example is similar to the previous one. Because the human object is an instance of Human , the prototype of the human object (__proto__) points to the prototype of Human ( prototype ), and the above will output true .

Example 3: Let’s see if Object’s prototype is the prototype of human:

console.log(Object.prototype.isPrototypeOf(human)); // true


Why? , which may be better explained with code, please see the following derivation:

// Because the prototype (__proto__) in Human's prototype (prototype) points to Object's prototype (prototype)
Human.prototype.__proto__ === Object.prototype
// And because the prototype of human (__proto__) points to the prototype of Human (prototype)
huamn.__proto__ === Human.prototype
// So the prototype of the human object (__proto__) points to the prototype of Object (prototype)
huamn.__proto__.__proto__ === Object.prototype


This is easy to understand if you look at the structure of human:

So is Object 's prototype the prototype of the human object? To be precise, Object 's prototype is on the human 's prototype chain.

Example 4, whether Object.prototype is the prototype of a built-in class:

The built-in classes Number , String , Boolean , Function , Array in JavaScript all inherit Object , so the following outputs are all true :

console.log(Object.prototype.isPrototypeOf(Number)); // true
console.log(Object.prototype.isPrototypeOf(String)); // true
console.log(Object.prototype.isPrototypeOf(Boolean)); // true
console.log(Object.prototype.isPrototypeOf(Array)); // true
console.log(Object.prototype.isPrototypeOf(Function)); // true


Naturally, Object.prototype is also the prototype of instances of Number , String , Boolean , Function , and Array .

Example 5, Object is also a function (class):

It is also worth mentioning that Function.prototype is also the prototype of Object , because Object is also a function (class), they generate each other.

Please see the following output:

console.log(Object.prototype.isPrototypeOf(Function)); // true
console.log(Function.prototype.isPrototypeOf(Object)); // true

2. Difference from instanceof

instanceof is used to determine whether an object is an instance of an object.

For example:

function Human() {}
let human = new Human();
 
// human is an instance of Human, so the output is true
console.log(human instanceof Human); // true
 
// Because all classes inherit Object, the result also outputs true
console.log(human instanceof Object); // true
 
// Because the human object is not an array, the result output is false
console.log(human instanceof Array); // false


Here are some more examples of built-in classes:

// [1,2,3] is an instance of Array, so the output is true
console.log([1, 2, 3] instanceof Array); // true
 
// The method function(){} is an instance of Function, so it outputs true
console.log(function(){} instanceof Function);


The principle of instanceof is to determine whether the prototype object (prototype) of the class can be found in the prototype chain of the instance, while isPrototypeOf determines whether the prototype object ( prototype ) of the class is on the prototype chain of the instance.

So my understanding is that the meaning of these two expressions is the same, but they are written differently. The following two outputs should be the same:

console.log(A instanceof B);
console.log(B.prototype.isPrototypeOf(A));


summary

In fact, to understand the isPrototypeOf function, the key is to understand the prototype chain.

This is the end of this article about the isPrototypeOf function in JavaScript . For more information about isPrototypeOf in JavaScript, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Javascript Prototype
  • JavaScript Prototype Details
  • A thorough understanding of js native syntax prototype, __proto__ and constructor
  • JavaScript uses the prototype property to implement inheritance operations example
  • Implementation of JS array dimensionality reduction Array.prototype.concat.apply([], arr)
  • Extension of js String.prototype.trim character to remove leading and trailing spaces
  • JavaScript __proto__ and prototype

<<:  TinyEditor is a simple and easy-to-use HTML WYSIWYG editor

>>:  A brief summary of basic web page performance optimization rules

Recommend

Introduction to the deletion process of B-tree

In the previous article https://www.jb51.net/arti...

Detailed explanation of MySQL cumulative calculation implementation method

Table of contents Preface Demand Analysis Mysql u...

MySQL select, insert, update batch operation statement code examples

In projects, batch operation statements are often...

Using react+redux to implement counter function and problems encountered

Redux is a simple state manager. We will not trac...

Detailed tutorial on deploying Jenkins based on docker

0. When I made this document, it was around Decem...

How to use docker to build redis master-slave

1. Build a Docker environment 1. Create a Dockerf...

js implements shopping cart addition and subtraction and price calculation

This article example shares the specific code of ...

Two practical ways to enable proxy in React

Two ways to enable proxy React does not have enca...

HTML Basics - Simple Example of Setting Hyperlink Style

*** Example of setting the style of a hyperlink a...

JavaScript event delegation principle

Table of contents 1. What is event delegation? 2....

Solution to css3 transform transition jitter problem

transform: scale(); Scaling will cause jitter in ...

Brief analysis of MySQL union and union all

In the database, both UNION and UNION ALL keyword...

Use viewport in meta tag to define screen css

<meta name="viewport" content="w...

How to install and configure Redis in CentOS7

Introduction There is no need to introduce Redis ...