2

Hola tengo una pregunta que me intriga mucho y es Symbol.species.

Ok, entiendo que todo esto de los símbolos son parte de las características que trajo ES6 (Meta programación).

Existen dos tipos de estos símbolos los conocidos y no conocidos.

Segun todos los ejemplos de la red y libros muestran el clásico ejemplo implementado por MDN:

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
  static get [Symbol.species]() {
    return Array;
  }
}

Y lo implementan así:

let array = new MyArray(3, 5, 4);
array.isEmpty(); // => false
let odds = array.filter(item => item % 2 === 1);
odds instanceof Array;   // => true
odds instanceof MyArray; // => false
console.log(odds) // => [3, 5]

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
  static get [Symbol.species]() {
    return Array;
  }
}
let array = new MyArray(3, 5, 4);
array.isEmpty(); // => false
let odds = array.filter(item => item % 2 === 1);
odds instanceof Array;   // => true
odds instanceof MyArray; // => false
console.log(odds) // => [3, 5]

Lo que entiendo, es que Symbol.species, en esta implementación, se asegura que todos los objectos tengan su propio constructor Array. Si Symbol.species no está personalizada, array.filter() devolvería una instancia de MyArray.

Ok creo que todo esta claro para mi hasta ahora, pero cuando hago esto:

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
  static get [Symbol.species]() {
    return Object;
  }
}

Y pasa esto:

let array = new MyArray(3, 5, 4);
array.isEmpty(); // => false
let odds = array.filter(item => item % 2 === 1);
odds instanceof Array;   // => false
odds instanceof MyArray; // => false
odds instanceof Object; // => true
console.log(odds) // => Number {0, 0: 3, 1: 5}

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
  static get [Symbol.species]() {
    return Object;
  }
}

let array = new MyArray(3, 5, 4);
array.isEmpty(); // => false
let odds = array.filter(item => item % 2 === 1);
odds instanceof Array;   // => false
odds instanceof MyArray; // => false
odds instanceof Object; // => true
console.log(odds) // => Number {0, 0: 3, 1: 5}

Todo esto para mi hasta aquí esta entendible, lo interesante y me pregunto que esta pasando detrás de escena con el resultado del console.log() la ultima implementación.

Porque devuelve un objecto Number(), disculpen si es muy tonta la pregunta pero no entiendo porque pasa esto, aun me falta muchas cosas que no entiendo de JS.

1
  • la linea odds instanceof Object; // => true te lo esta diciendo al cambiar el tipo get ` static get [Symbol.species]() { return Object;` al metodo este te obliga a recorrerlo de otra forma Object.keys y Object. values y por ello tienes esa respuesta Commented el 2 dic. 2019 a las 17:23

1 respuesta 1

0

Bueno después de darle muchas vueltas al asunto, entendí como funciona todo esto:

¿Que esta pasando detrás de escena?

Para entenderlo implemente mi propio método de filter(), para la gente del futuro:

class MyArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
  myFilter (callback, context) {
    var arr = new this.__proto__.constructor[Symbol.species]();
    for (var i = 0; i < this.length; i++) {
        if (callback.call(context, this[i], i, this))
            arr[i] = this[i];
    }
    return arr;
  }
  static get [Symbol.species]() {
    return Array;
  }
}
let array = new MyArray(3, 5, 4);

let odds = array.myFilter(item => item % 2 === 1);
odds instanceof Array;   // => true
odds instanceof MyArray; // => false

Como verán filter(), esta devolviendo un Array creado basándose en el prototipo del padre, filter, map, etc, utilizan Symbol.species para construir una nueva instancia del Array devuelto, si no se encuentra implementado heredara el contructor Array por defecto.

Funciona igual, implementándole static get [Symbol.species]() { return Object;}.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.