Implement Instanceof and explain how it works

March 13, 2020 “daily question series 🚀” author: Wang Ergou original text link: implement instanceof and explain its working principle blog: Dig gold, think not, zhihu, Jane book, CSDN like again, form a habit, daily question series will be updated all the time, your support is the biggest power I continue to share 😘

Implement instanceof

//Obj detects object Constructor
 function instance_of(Obj, Constructor){
    let implicitPrototype = Obj.__proto__;// Implicit prototype
    let displayPrototype = Constructor.prototype;// Explicit prototype
    while(true) {if(implicitPrototype === null) {return false
        }else if(implicitPrototype === displayPrototype){
             return true
        }
        implicitPrototype = implicitPrototype.__proto__
    }
}
console.log(instance_of([], Array)) // true
console.log(instance_of([], String)) // false
Copy the code

The working principle of

Instanceof works by testing whether the constructor’s prototype appears on the prototype chain of the object being tested, obJ.

[] instanceof Array            // true
({}) instanceof Object         // true
((a)= >{}) instanceof Function   // true
Copy the code

Note: Instanceof isn’t a panacea.

Here’s an example:

let arr = []
let obj = {}
arr instanceof Array    // true
arr instanceof Object   // true
obj instanceof Object   // true
obj instanceof Array   // false
Copy the code

In this case, the arR Array is an instance of new Array(), so arr.__proto__ === array. prototype. Array is an Object subtype. Array.prototype.__proto__ === Object.prototype, so the Object constructor is on the prototype chain of arR. So instanceof still can’t elegantly determine whether a value is an array or an ordinary object.

Object.prototype.toString()

Can say Object. The prototype. The toString () is the best solution to determine the JS data types, specific usage, please see the following code:

Object.prototype.toString.call({})              
// '[object Object]'
Object.prototype.toString.call([])              
// '[object Array]'
Object.prototype.toString.call((a)= > {})        
// '[object Function]'
Object.prototype.toString.call('wangergou')        
// '[object String]'
Object.prototype.toString.call(null)            
// '[object Null]'
Object.prototype.toString.call(undefined)       
// '[object Undefined]'

Copy the code

As you can see from the above code, any value we pass in returns the exact object type.

But there are some things that need to be noted:

The method is essentially a dependencyObject.prototype.toString()Method to get the internal properties of the object[[Class]]
Passing in the primitive type makes it possible to determine the result because the value is wrapped
null 和 undefinedThe ability to output results is handled by the internal implementation

In order to more convenient to use the Object. The prototype. The toString (), we can to be a simple packaging:

var type = function(data) {
      var toString = Object.prototype.toString;
      var dataType = toString
              .call(data)
              .replace(/\[object\s(.+)\]/."$1")
              .toLowerCase()
      return dataType
};
Copy the code

type({})              
// '[object Object]'
type([])              
// '[object Array]'
type((a)= > {})        
// '[object Function]'
type('wangergou')        
// '[object String]'
type(null)            
// '[object Null]'
type(undefined)       
// '[object Undefined]'

Copy the code

Tell yourself that even if you are tired, don’t forget to learn. There is no shortcut to success, only step by step. ‘!

If there is something wrong in the article, you are welcome to correct it.

Thank you ~ 💘

Implement Instanceof and explain how it works