Tengo estos 2 objetos:
var Foo = function () { this.name = 'foo'; }; Foo.prototype.sayName = function () { console.log(this.name); }; var Bar = function () { this.cb = null; }; Bar.prototype.setCb = function (cb) { this.cb = cb; }; Bar.prototype.callCb = function () { this.cb(); };Y tengo este resultado:
var foo = new Foo(); var bar = new Bar(); foo.sayName(); // "foo" bar.setCb(foo.sayName); bar.callCb(); // undefined Esto sucede porque cuando llamamos a foo.sayName dentro de Bar , this apunta al objeto Bar . ¿Alguien puede explicar qué está pasando aquí?
También noté que puedo eludir esto pasando una función anónima bar.setCb(function() {foo.sayName();}); . ¿Hay otras/mejores formas de solucionar este problema?
Esta es la parte de Javascript que más echa a la gente que viene de otro idioma.
Básicamente, el puntero this se establece en el momento de la llamada. Cuando extraes una función de un objeto, solo obtienes la función, no el contexto del que procede (el objeto del que procede). Esto es diferente, por ejemplo, a Python con sus objetos de método enlazados.
De hecho, si hicieras algo como:
let sayName = foo.sayName sayName()eso también arrojaría una excepción "indefinida", ya que al llamarlo de esa manera pierde el objeto al que está llamando el método.
Entonces, ¿cómo trabajas alrededor de esto? Hay un par de opciones, las cuales implican capturar ese contexto.
Lo primero que puede hacer, como sugiere el comentario, sería usar una función de flecha:
bar.setCb(() => foo.sayName())Esto "captura" el objeto para llamar a la función.
Otra opción sería usar la función Function.bind :
bar.setCb(foo.sayName.bind(foo)) Esto crea una nueva instancia de función que tiene this puntero establecido en foo.