Qual é a diferença entre typeof e instanceof e quando um deve ser usado em relação ao outro?

No meu caso particular:

callback instanceof Function

ou

typeof callback == "function"

isso importa, qual é a diferença?

Recurso adicional:

JavaScript-Garden typeof vs instanceof

Use instanceofpara tipos personalizados:

var ClassFirst = function () {};
var ClassSecond = function () {};
var instance = new ClassFirst();
typeof instance; // object
typeof instance == 'ClassFirst'; // false
instance instanceof Object; // true
instance instanceof ClassFirst; // true
instance instanceof ClassSecond; // false 

Use typeofpara tipos simples incorporados:

'example string' instanceof String; // false
typeof 'example string' == 'string'; // true

'example string' instanceof Object; // false
typeof 'example string' == 'object'; // false

true instanceof Boolean; // false
typeof true == 'boolean'; // true

99.99 instanceof Number; // false
typeof 99.99 == 'number'; // true

function() {} instanceof Function; // true
typeof function() {} == 'function'; // true

Use instanceofpara tipos integrados complexos:

/regularexpression/ instanceof RegExp; // true
typeof /regularexpression/; // object

[] instanceof Array; // true
typeof []; //object

{} instanceof Object; // true
typeof {}; // object

E o último é um pouco complicado:

typeof null; // object

Ambos são semelhantes em funcionalidade porque ambos retornam informações de tipo, no entanto, eu pessoalmente prefiro instanceofporque ele está comparando tipos reais em vez de strings. A comparação de tipos é menos propensa a erros humanos, e é tecnicamente mais rápida, pois está comparando ponteiros na memória, em vez de fazer comparações de cadeias inteiras.

Um bom motivo para usar typeof é se a variável pode ser indefinida.

alert(typeof undefinedVariable); // alerts the string "undefined"
alert(undefinedVariable instanceof Object); // throws an exception

Um bom motivo para usar instanceof é se a variável pode ser nula.

var myNullVar = null;
alert(typeof myNullVar ); // alerts the string "object"
alert(myNullVar  instanceof Object); // alerts "false"

Então, realmente, na minha opinião, isso dependeria de que tipo de dados possíveis você está verificando.

Para deixar as coisas claras, você precisa conhecer dois fatos:

1. O operador instanceof testa se a propriedade prototype de um construtor aparece em qualquer lugar da cadeia de protótipos de um objeto. Na maioria dos casos, isso significa que o objeto foi criado usando esse construtor ou um de seus descendentes. Mas também o protótipo pode ser definido explicitamente pelo Object.setPrototypeOf()método (ECMAScript 2015) ou pela __proto__propriedade (navegadores antigos, obsoletos). Não é recomendável alterar o protótipo de um objeto, devido a problemas de desempenho.

Assim, instanceof é aplicável apenas a objetos. Na maioria dos casos, você não está usando construtores para criar seqüências ou números. Você pode. Mas você quase nunca faz.

Também instanceof não pode verificar, exatamente qual construtor foi usado para criar o objeto, mas retornará true, mesmo se o objeto for derivado da classe que está sendo verificada. Na maioria dos casos, esse é o comportamento desejado, mas às vezes não é. Então você precisa manter essa mente.

Outro problema é que diferentes escopos têm diferentes ambientes de execução. Isso significa que eles têm diferentes recursos internos (objeto global diferente, diferentes construtores etc.). Isso pode resultar em resultados inesperados.

Por exemplo, [] instanceof window.frames[0].Arrayretornará false, porque Array.prototype !== window.frames[0].Arraye matrizes herdam da primeira.
Além disso, ele não pode ser usado com valor indefinido, porque não possui um protótipo.

2. O operador typeof testa se o valor pertence a um dos seis tipos básicos : " number ", " string ", " boolean ", " object ", " function " ou " undefined ". Onde a string "objeto" pertence a todos os objetos (exceto funções, que são objetos, mas têm seu próprio valor no tipo de operador), e também valor "nulo" e matrizes (para "nulo" é um bug, mas esse bug é tão antigo , tornou-se um padrão). Ele não depende de construtores e pode ser usado mesmo que o valor seja indefinido. Mas não fornece detalhes sobre objetos. Portanto, se você precisar, vá para instanceof.

Agora vamos falar sobre uma coisa complicada. E se você usar o construtor para criar um tipo primitivo?

let num = new Number(5);
console.log(num instanceof Number); // print true
console.log(typeof num); // print object
num++; //num is object right now but still can be handled as number
//and after that:
console.log(num instanceof Number); // print false
console.log(typeof num); // print number

Parece mágica. Mas não é. É o chamado boxe (agrupando o valor primitivo por objeto) e o unboxing (extraindo o valor primitivo agrupado do objeto). Esse tipo de código parece ser "um pouco" frágil. Obviamente, você pode evitar criar tipos primitivos com construtores. Mas há outra situação possível, quando o boxe pode atingir você. Quando você usa Function.call () ou Function.apply () em um tipo primitivo.

function test(){
  console.log(typeof this);
} 
test.apply(5);

Para evitar isso, você pode usar o modo estrito:

function test(){
  'use strict';
  console.log(typeof this);
} 
test.apply(5);

upd: Desde o ECMAScript 2015, há mais um tipo chamado Symbol, que possui seu próprio typeof == "symbol" .

console.log(typeof Symbol());
// expected output: "symbol"

Você pode ler sobre isso no MDN: ( Símbolo , tipo de ).

Eu descobri um comportamento realmente interessante (lido como "horrível") no Safari 5 e no Internet Explorer 9. Eu estava usando isso com muito sucesso no Chrome e Firefox.

if (typeof this === 'string') {
    doStuffWith(this);
}

Então eu testo no IE9, e não funciona. Grande surpresa. Mas no Safari, é intermitente! Então, inicio a depuração e acho que o Internet Explorer é sempre retornando false. Mas o mais estranho é que o Safari parece estar fazendo algum tipo de otimização em sua VM JavaScript, onde é truea primeira vez, mas false toda vez que você clica em recarregar!

Meu cérebro quase explodiu.

Então agora eu decidi sobre isso:

if (this instanceof String || typeof this === 'string')
    doStuffWith(this.toString());
}

E agora tudo funciona muito bem. Observe que você pode chamar "a string".toString()e ele apenas retorna uma cópia da string, ou seja,

"a string".toString() === new String("a string").toString(); // true

Então, eu vou usar os dois a partir de agora.

Outras diferenças práticas significativas:

// Boolean

var str3 = true ;

alert(str3);

alert(str3 instanceof Boolean);  // false: expect true  

alert(typeof str3 == "boolean" ); // true

// Number

var str4 = 100 ;

alert(str4);

alert(str4 instanceof Number);  // false: expect true   

alert(typeof str4 == "number" ); // true

instanceoftambém funciona quando callbacké um subtipo Function, acho

instanceofem Javascript pode ser esquisito - acredito que grandes estruturas tentam evitar seu uso. Janelas diferentes é uma das maneiras pelas quais ele pode quebrar - acredito que as hierarquias de classe também podem confundi-lo.

Existem maneiras melhores de testar se um objeto é um determinado tipo interno (que geralmente é o que você deseja). Crie funções utilitárias e use-as:

function isFunction(obj) {
  return typeof(obj) == "function";
}
function isArray(obj) {
  return typeof(obj) == "object" 
      && typeof(obj.length) == "number" 
      && isFunction(obj.push);
}

E assim por diante.

instanceofnão funcionará para primitivos, por exemplo "foo" instanceof String, retornará falseenquanto typeof "foo" == "string"retornará true.

Por outro lado typeof, provavelmente não fará o que você quer quando se trata de objetos personalizados (ou classes, como você quiser chamá-los). Por exemplo:

function Dog() {}
var obj = new Dog;
typeof obj == 'Dog' // false, typeof obj is actually "object"
obj instanceof Dog  // true, what we want in this case

Acontece que as funções são primitivas da 'função' e instâncias da 'Função', o que é um pouco estranho, uma vez que não funciona assim para outros tipos primitivos, por exemplo.

(typeof function(){} == 'function') == (function(){} instanceof Function)

mas

(typeof 'foo' == 'string') != ('foo' instanceof String)

Eu recomendaria o uso de protótipos callback.isFunction().

Eles descobriram a diferença e você pode contar com a razão deles.

Eu acho que outras estruturas JS também têm essas coisas.

instanceOfnão funcionaria em funções definidas em outras janelas, acredito. A função deles é diferente da sua window.Function.

Ao verificar uma função, é preciso sempre usar typeof.

Aqui está a diferença:

var f = Object.create(Function);

console.log(f instanceof Function); //=> true
console.log(typeof f === 'function'); //=> false

f(); // throws TypeError: f is not a function

É por isso que nunca se deve usar instanceofpara verificar uma função.

Diferença prática significativa:

var str = 'hello word';

str instanceof String   // false

typeof str === 'string' // true

Não me pergunte o porquê.

atuação

typeofé mais rápido do que instanceofnas situações em que ambos são aplicáveis.

Dependendo do seu mecanismo, a diferença de desempenho a favor typeofpode ser de cerca de 20% . ( Sua milhagem pode variar )

Aqui está um teste de benchmark para Array:

var subject = new Array();
var iterations = 10000000;

var goBenchmark = function(callback, iterations) {
    var start = Date.now();
    for (i=0; i < iterations; i++) { var foo = callback(); }
    var end = Date.now();
    var seconds = parseFloat((end-start)/1000).toFixed(2);
    console.log(callback.name+" took: "+ seconds +" seconds.");
    return seconds;
}

// Testing instanceof
var iot = goBenchmark(function instanceofTest(){
     (subject instanceof Array);
}, iterations);

// Testing typeof
var tot = goBenchmark(function typeofTest(){
     (typeof subject == "object");
}, iterations);

var r = new Array(iot,tot).sort();
console.log("Performance ratio is: "+ parseFloat(r[1]/r[0]).toFixed(3));

Resultado

instanceofTest took: 9.98 seconds.
typeofTest took: 8.33 seconds.
Performance ratio is: 1.198

Este é apenas conhecimentos complementares a todas as outras explicações aqui - estou não sugerindo a utilizar .constructorem todos os lugares.

TL; DR: Em situações em que typeofnão é uma opção e quando você sabe que não se importa com a cadeia de protótipos , Object.prototype.constructorpode ser uma alternativa viável ou até melhor do que instanceof:

x instanceof Y
x.constructor === Y

Ele está no padrão desde a versão 1.1, então não se preocupe com a compatibilidade com versões anteriores.

Muhammad Umer mencionou brevemente isso em um comentário em algum lugar aqui também. Funciona em tudo com um protótipo - portanto, tudo não nullou undefined:

// (null).constructor;      // TypeError: null has no properties
// (undefined).constructor; // TypeError: undefined has no properties

(1).constructor;                 // function Number
''.constructor;                  // function String
([]).constructor;                // function Array
(new Uint8Array(0)).constructor; // function Uint8Array
false.constructor;               // function Boolean()
true.constructor;                // function Boolean()

(Symbol('foo')).constructor;     // function Symbol()
// Symbols work, just remember that this is not an actual constructor:
// new Symbol('foo'); //TypeError: Symbol is not a constructor

Array.prototype === window.frames.Array;               // false
Array.constructor === window.frames.Array.constructor; // true

Além disso, dependendo do seu caso de uso, pode ser muito mais rápido do que instanceof(o motivo provavelmente é que ele não precisa verificar toda a cadeia de protótipos). No meu caso, eu precisava de uma maneira rápida de verificar se um valor é uma matriz digitada:

function isTypedArrayConstructor(obj) {
  switch (obj && obj.constructor){
    case Uint8Array:
    case Float32Array:
    case Uint16Array:
    case Uint32Array:
    case Int32Array:
    case Float64Array:
    case Int8Array:
    case Uint8ClampedArray:
    case Int16Array:
      return true;
    default:
      return false;
  }
}

function isTypedArrayInstanceOf(obj) {
  return obj instanceof Uint8Array ||
    obj instanceof Float32Array ||
    obj instanceof Uint16Array ||
    obj instanceof Uint32Array ||
    obj instanceof Int32Array ||
    obj instanceof Float64Array ||
    obj instanceof Int8Array ||
    obj instanceof Uint8ClampedArray ||
    obj instanceof Int16Array;
}

https://run.perf.zone/view/isTypedArray-constructor-vs-instanceof-1519140393812

E os resultados:

Chrome 64.0.3282.167 (64 bits, Windows)

Firefox 59.0b10 (64 bits, Windows)

Por curiosidade, fiz uma referência rápida de brinquedo contra typeof; surpreendentemente, ele não apresenta um desempenho muito pior e parece ainda mais rápido no Chrome:

let s = 0,
    n = 0;

function typeofSwitch(t) {
    switch (typeof t) {
        case "string":
            return ++s;
        case "number":
            return ++n;
        default:
            return 0;
    }
}

// note: no test for null or undefined here
function constructorSwitch(t) {
    switch (t.constructor) {
        case String:
            return ++s;
        case Number:
            return ++n;
        default:
            return 0;
    }
}

let vals = [];
for (let i = 0; i < 1000000; i++) {
    vals.push(Math.random() <= 0.5 ? 0 : 'A');
}

https://run.perf.zone/view/typeof-vs-constructor-string-or-number-1519142623570

NOTA: A ordem na qual as funções estão listadas alterna entre imagens!

Chrome 64.0.3282.167 (64 bits, Windows)

Firefox 59.0b10 (64 bits, Windows)

NOTA: A ordem na qual as funções estão listadas alterna entre imagens!

Use instanceof porque se você alterar o nome da classe, receberá um erro do compilador.

Vindo de uma educação estrita OO eu iria para

callback instanceof Function

Cordas são propensas a minha ortografia terrível ou outros erros de digitação. Além disso, sinto que lê melhor.

Apesar de instanceof poder ser um pouco mais rápido que o typeof , prefiro o segundo por causa de uma mágica possível:

function Class() {};
Class.prototype = Function;

var funcWannaBe = new Class;

console.log(funcWannaBe instanceof Function); //true
console.log(typeof funcWannaBe === "function"); //false
funcWannaBe(); //Uncaught TypeError: funcWannaBe is not a function

Mais um caso é que você só pode comparar instanceof- ele retorna verdadeiro ou falso. Com typeofvocê pode obter o tipo de algo fornecido

com o desempenho em mente, é melhor usar typeof com um hardware típico, se você criar um script com um loop de 10 milhões de iterações, a instrução: typeof str == 'string' levará 9ms, enquanto 'string' instanceof String levará 19ms

Claro que importa ........!

Vamos seguir com exemplos. No nosso exemplo, declararemos a função de duas maneiras diferentes.

Nós estaremos usando ambos function declaratione Function Constructor . Vamos ver como typeofe instanceofse comportar nesses dois cenários diferentes.

Crie uma função usando a declaração de função:

function MyFunc(){  }

typeof Myfunc == 'function' // true

MyFunc instanceof Function // false

A explicação possível para um resultado tão diferente é que, como fizemos uma declaração de função, typeofpodemos entender que é uma função. typeofPorque verifica se a expressão em que typeof está operando, no nosso caso, implementou o método de chamada ou não . Se ele implementa método é uma function.Otherwise não .Para verificação esclarecimentos especificação ECMAScript para typeof .MyFunc Call

Crie uma função usando o construtor de funções:

var MyFunc2 = new Function('a','b','return a+b') // A function constructor is used 

typeof MyFunc2 == 'function' // true

MyFunc2 instanceof Function // true

Aqui typeofafirma que MyFunc2é uma função bem como a instanceofoperator.We já sabe typeofseleção se MyFunc2implementado Callmétodo ou not.As MyFunc2é uma função e ele implementa callmétodo, é assim que typeofsabe que é um function.On outro lado, foi utilizado function constructorpara criar MyFunc2, ele torna-se uma instância de Function constructor. É por isso que instanceoftambém resolve true.

O que é mais seguro de usar?

Como podemos ver nos dois casos, o typeofoperador pode afirmar com êxito que estamos lidando com uma função aqui, é mais seguro que instanceof. instanceoffalhará no caso de function declarationporque function declarationsnão é uma instância de Function constructor.

Melhor prática :

Como Gary Rafferty sugeriu, a melhor maneira deve ser usar o tipo e a instância de juntos.

  function isFunction(functionItem) {

        return typeof(functionItem) == 'function' || functionItem instanceof Function;

  }

  isFunction(MyFunc) // invoke it by passing our test function as parameter

Para ser muito preciso, deve-se usar instanceof em que o valor é criado através do construtor (geralmente tipos personalizados), por exemplo

var d = new String("abc")

enquanto typeof para verificar valores criados apenas por atribuições para, por exemplo

var d = "abc"

não há necessidade de sobrecarregar-se com vários exemplos acima, mas lembre-se de dois pontos de vista:

1. typeof var;é um operador unário retornará o tipo original ou o tipo raiz de var. de modo que ela retorne tipos de primitivas ( string, number, bigint, boolean, undefined, e symbol) ou objectdo tipo.

2. no caso de objetos de nível superior, como objetos internos (String, Number, Boolean, Array ..) ou objetos complexos ou personalizados, todos eles são do objecttipo raiz, mas o tipo de instância construído com base neles é variável (como a classe OOP conceito de herança), aqui a instanceof A- um operador binário - irá ajudá-lo, ele percorrerá a cadeia de protótipos para verificar se o construtor do operando certo (A) aparece ou não.

portanto, sempre que desejar verificar "tipo raiz" ou trabalhar com variável primitiva - use "typeof", caso contrário, use "instanceof".

nullé um caso especial, aparentemente primitivo, mas de fato é um caso especial para objeto. Usando a === nullpara verificar nulo.

por outro lado, functiontambém é um caso especial, que é um objeto embutido, mas typeofretornafunction

como você pode ver, instanceofdeve passar pela cadeia de protótipos enquanto isso, typeofbasta verificar o tipo de raiz uma vez, para que seja fácil entender por que typeofé mais rápido do queinstanceof

De acordo com a documentação do MDN sobre typeof , os objetos instanciados com a palavra-chave "new" são do tipo 'object':

typeof 'bla' === 'string';

// The following are confusing, dangerous, and wasteful. Avoid them.
typeof new Boolean(true) === 'object'; 
typeof new Number(1) === 'object'; 
typeof new String('abc') === 'object';

Enquanto a documentação sobre instanceof aponta que:

const objectString = new String('String created with constructor');
objectString instanceOf String; // returns true
objectString instanceOf Object; // returns true

Portanto, se alguém quiser verificar, por exemplo, se algo é uma string, não importa como ela foi criada, a abordagem mais segura seria usar instanceof.