instanceof和typeof的区别【JavaScript常见面试题】

typeof （一元操作符）：

用于判断一个变量的类型。它可以用于任何数据类型，并返回一个表示该类型的字符串。

console.log(typeof 42);         // "number"
console.log(typeof 'Hello');    // "string"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof null);       // "object" (这是一个历史遗留的bug)
console.log(typeof { a: 1 });   // "object"
console.log(typeof [1, 2, 3]);  // "object" (数组在JavaScript中也是对象)
console.log(typeof function(){}); // "function"

数字类型：typeof 返回的值是 number。
字符串类型：typeof 返回的值是 string。
布尔类型：typeof 返回的值是 boolean。
对象、数组、null 返回的值是 object：如 typeof(window)，typeof(document)，typeof(null)
函数类型，返回的值是 function：如：typeof(eval)，typeof(Date)返回的值都是 function。
不存在的变量、函数或者 undefined，将返回 undefined：比如：typeof(abc)、typeof(undefined)
都返回 undefined

instanceof （二元操作符）：

用于检测某个对象是否是另一个对象的实例，或者说某个对象是否存在于另一个对象的原型链上。

class Animal {}
class Dog extends Animal {}

const dog = new Dog();

console.log(dog instanceof Dog);    // true
console.log(dog instanceof Animal); // true
console.log(dog instanceof Object); // true (所有对象都是Object的实例)

console.log([] instanceof Array);   // true
console.log({} instanceof Object);  // true

instanceof 用于检测对象类型，不适用于基本数据类型（会报错）。
它通过原型链来判断，如果对象的原型链上包含某个构造函数的 prototype 属性，则返回 true。
可以用于区分对象和数组，因为 Array 是一个构造函数，而 [] instanceof Array 返回 true。

instanceof 和 typeof 进行类型判断的对比示例：

示例 1：基本数据类型:

let num = 42;
console.log(typeof num); // "number"
// console.log(num instanceof Number); // 错误，基本数据类型不能用instanceof

let str = "Hello";
console.log(typeof str); // "string"
// console.log(str instanceof String); // 错误，基本数据类型不能用instanceof

let bool = true;
console.log(typeof bool); // "boolean"
// console.log(bool instanceof Boolean); // 错误，基本数据类型不能用instanceof

typeof 可以正确地判断基本数据类型（number、string、boolean），而 instanceof 不适用于基本数据类型，尝试使用会导致错误。

示例 2：对象和数组:

let obj = { a: 1 };
console.log(typeof obj); // "object"
console.log(obj instanceof Object); // true

let arr = [1, 2, 3];
console.log(typeof arr); // "object" (数组在JavaScript中也是对象)
console.log(arr instanceof Array); // true

在这个示例中，typeof 对于对象和数组都返回 “object”，无法区分它们。而 instanceof 可以准确地判断 obj 是 Object 的实例，arr 是 Array 的实例。

示例 3：函数:

function myFunc() {}
let func = myFunc;

console.log(typeof func); // "function"
// console.log(func instanceof Function); // 在某些环境中可能返回true，但这不是标准用法

对于函数类型，typeof 可以准确地返回 “function”。而 instanceof 对于函数类型的判断并不是标准用法，虽然在某些JavaScript环境中 func instanceof Function 可能会返回 true，但这并不是普遍推荐的做法。

示例 4：自定义类和实例:

class Person {}
let person = new Person();

console.log(typeof person); // "object"
console.log(person instanceof Person); // true
console.log(person instanceof Object); // true (因为所有类都继承自Object)