【前端面经】JS-typeof与instanceof区别

typeof和instanceof的区别

JavaScript中的typeof和instanceof都用于判断变量的数据类型，但它们的作用有所不同。

typeof

typeof操作符用于返回变量的基本数据类型，其中包括undefined、boolean、number、string、symbol和bigint。对于复杂类型，如null和各种对象，typeof都会返回'object'。唯一的例外是函数类型，typeof function(){}会返回'function'。

需要注意的是，函数在ECMAScript中被认为是对象，并不代表一种数据类型。但是，函数也有自己特殊的属性。因此，为了区分函数和其他对象，可以使用typeof操作符。

例如：

console.log(typeof 123); // 'number'
console.log(typeof true); // 'boolean'
console.log(typeof 'hello'); // 'string'
console.log(typeof {}); // 'object'
console.log(typeof []); // 'object'
console.log(typeof null); // 'object'
console.log(typeof function(){}); // 'function'

instanceof

instanceof操作符用于准确地返回变量的复杂数据类型，返回值是Boolean类型。例如，[] instanceof Array返回true，因为[]是一个数组对象。

需要注意的是，instanceof只能用于判断复杂类型，不能判断简单类型。

例如：

console.log([] instanceof Array); // true
console.log('hello' instanceof String); // false
console.log(123 instanceof Number); // false
console.log(true instanceof Boolean); // false

通用的类型判断函数

// 
function getType(target) {
    const type = typeof target
    if (type !== 'object') {
        return type
    }
    return Object.prototype.toString.call(target).replace(/^\[object (\S+)\]$/, '$1')
}

console.log(getType(new Date())); // 'Date'

总结

虽然typeof和instanceof都用于判断变量的数据类型，但是它们的作用有所不同。typeof用于返回变量的基本数据类型，而instanceof用于准确地返回变量的复杂数据类型。在判断函数类型时，应使用typeof操作符。

在编写JavaScript代码时，我们需要根据实际情况选择合适的判断方式。这样可以避免因为数据类型判断不准确而导致的错误。