Front end hundred questions cut [001]-typeof and instanceof

After thinking about it for a long time, I finally started to write "Front End Hundred Topics". Although it is a Hundred Topics, currently only the " js, browser and network " section has identified 100 high-energy knowledge points to share with friends. The original intention of writing this series of articles is " let every front-end engineer master high-frequency knowledge points, and help work ". I hope that friends who love to learn will pay attention to the public kite holder ", and arm their minds with knowledge.

1.1 typeof

1.1.1 Basic introduction

typeof is an operator, which can be used in two ways: (1) typeof (expression); (2) typeof variable name; the return value is a string to describe the data type of the variable; so you can use this To determine the number , string , object , boolean , function , undefined , symbol , the content returned in each case is shown in the following table:

Types of	result
String	'string'
Number	'number'
Boolean	'boolean'
Undefined	'undefined'
Object	'object'
function function	'function'
Symbol	'symbol'

1.1.2 Advanced principles

typeof method is very useful, it has certain limitations: For objects, arrays, and null , the value returned is object . For example, typeof(window) , typeof(document) , typeof(null) return values are object , why is this? This should start from the bottom. When js stores variables in the bottom layer, it will store its type information in the lower 1-3 bits of the machine code of the variable:

1. 000 : object;
2. 010 : floating point number;
3. 100 : string;
4. 110 : Boolean value;
5. 1 : integer;
6. special case:

   (1) null all machine code are 0

   (2) undefined : expressed by −2^30 integer

typeof is to judge the type by the machine code. Since all machine codes of null are 0, the machine code is the same as the object, so it is directly regarded as the object, so through typeof , it is not possible to judge the distinguishing object and null .

1.1.3 Experiment

Having said so much, it has not been verified yet, here are the verifications one by one:

// 字符串
console.log(typeof('lili')); // string
// 数字
console.log(typeof(1)); // number
// 布尔值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 对象
console.log(typeof({})); // object
// 数组
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函数
console.log(typeof(() => {})); // function
// Symbol值
console.log(typeof(Symbol())); // symbol

1.2 instanceof

1.2.1 Basic introduction

instanceof operator is used to detect prototype attribute of the constructor appears on the prototype chain of an instance object, and the return value is a Boolean value, which is used to indicate whether a variable belongs to an instance of an object. The syntax is as follows:

object instanceof constructor

1.2.2 Advanced Principles

instanceof main realization principle of prototype the variable on the right is on the prototype chain of the variable on the left. Therefore, instanceof will traverse the prototype chain of the left variable during the search process until it finds the prototype right variable. If the search fails, it will return false . The steps are as follows:

1. Get the implicit prototype of the left variable (that is: __proto__, which can be obtained through Object.getPrototypeOf());
2. Get the display prototype of the variable on the right (ie: prototype);
3. To judge, compare leftVal. proto . proto …… === rightVal.prototype, return true if they are equal, otherwise return false.

1.2.3 Experiment

The simple use and principle of instanceof are described above, the following is a simple use and verification of the principle:

const arr = [1, 2];
// 判断Object的prototype有没有在数组的原型链上
console.log(arr instanceof Object); // true
// 数组arr的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 数组arr的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object的prototype
console.log(Object.prototype);
// 判断arr的原型是否与Object的prototype相等
console.log(proto1 === Object.prototype); // false
// 判断arr的原型的原型是否与Object的prototype相等
console.log(proto2 === Object.prototype); // true

1. If you think this article is good, share it, like it, and let more people see it

2. Follow the official account holders, and kill the front-end 100 questions with the account owner.