19

Tenho um método que recebe uma referência a uma função e utiliza essa referência para exibir um dado (código abaixo). O problema é que quando utilizo a função console.log pelo Google Chrome, ocorre uma exceção, que no caso é a seguinte:

Uncaught TypeError: Illegal invocation range_methods.foreach (anonymous function)

Já no Mozilla Firefox o script executa sem erros. Por que isso está acontecendo? E como posso modificar o script para executar nos dois navegadores?

JavaScript:

function Range(from, to) {
    'use strict';
    var range_obj, range_methods = {
        from: from,
        to: to,
        includes: function (x) {
            return this.from <= x && x <= this.to;
        },
        foreach: function (f) {
            var x;
            for (x = Math.ceil(this.from) ; x <= this.to; x += 1) {
                f(x);
            }
        },
        toString: function () {
            return "(" + this.from + "..." + this.to + ")";
        }
    };

    range_obj = Object.create(range_methods);

    return range_obj;
}

var r = new Range(1, 3); // Cria um objeto range
r.includes(2); // => true: 2 está no intervalo
r.foreach(console.log); // Exibe 1 2 3
console.log(r); // Exibe (1...3)

Código no JSFiddle (no Google Chrome aperte Ctrl + Shift + J para visualizar o erro no Console)

1 Resposta 1

15

O problema é que o console do Chrome quer que log seja chamada no contexto de console – ou seja, com console como this –, mas você está chamando a função sem valor definido para this.

Uma solução rápida:

var log = console.log.bind(console);
r.foreach(log);

http://jsfiddle.net/y5evq/1/


Como assim?

Em JavaScript, o valor de this dentro de uma função depende de como ela é chamada. Por exemplo:

var obj = {
   fn: function() { console.log(this) }
};
var f = obj.fn;
obj.fn();        // loga obj
f();             // loga null no strict mode, ou o objeto global
                 // este é o caso do seu exemplo

A linguagem oferece duas maneiras se forçar um valor de this:

  1. Invocando a função com call ou apply:

    f.call(obj);
    f.apply(obj);
    

    (Neste caso ambos os métodos são equivalentes, pois só diferem na maneira como os parâmetros devem ser passados – em sequência para call, ou como array para apply.)

  2. Criando uma função atrelada a um this específico, com o método bind que toda função tem (lembre-se de que funções são objetos em JavaScript):

    var g = f.bind(obj);
    g();
    

    (Nota: bind (Function.prototype.bind) não é suportada em browsers mais antigos. Tem um shim ["estepe"? "substituto"] disponível na MDN.)

O objeto console é um host object, ou seja, um objeto disponibilizado pelo browser, que não faz parte do núcleo duro da linguagem. Como tal, ele tem direito a certas regalias, incluindo peculiaridades em cada implementação. No caso do console do Chrome, existe essa exigência de que os métodos precisam ser invocados com console como this, ou a invocação é considerada ilegal.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .