onreadystatechange is it property or method?

0

A question, like button is an object and onclick its method to be carried out when I do click , why onreadystatechange is a property and not a method? since a xmlhttp (object) I give onreadystatechange as property, but to equal it to the function is no longer property, is it method ?. Why does it say in Internet that it is a property?

  boton.onclick = function(){

    //1. new objeto ajax =>
    let xmlhttp = new XMLHttpRequest();
    // console.log(xmlhttp); // mi objeto

    //2. METHOD => A mi objeto le doy un property onreadystatechange(0-4)
    xmlhttp.onreadystatechange = function() {
      // console.log(xmlhttp);
      console.log(xmlhttp.onreadystatechange);
      // Retorna el codigo puro (responseText = La respuesta al pedido como texto, o null si el pedido no fue exitoso o todavía no se envió.)
      let codigoPuro = xmlhttp.responseText;
      document.getElementById("resultado1").innerHTML = codigoPuro;

      //recibe codigo parseado, retorna [object Object] =>
      let codigoParseado = JSON.parse(codigoPuro);
      document.getElementById("resultado2").innerHTML = codigoParseado;


      let detalles = "Nombre de la pandilla: <b>" + codigoParseado.nombrePandilla + "</b><br>";
      detalles += "Son " + codigoParseado.miembros.length + " superhéroes de " + codigoParseado.cuidad + "<br>";
      detalles += "La más fuerte es " + codigoParseado.miembros[1].nombre + ", con " + codigoParseado.miembros[1].superpoderes.length +  " superpoderes:<br>";
      for (let i in codigoParseado.miembros[1].superpoderes) {
        detalles += " - " + codigoParseado.miembros[1].superpoderes[i] + "<br>";
      }

      document.getElementById("resultado3").innerHTML = detalles;
    }

    // abrir una llamada una solicitud(request) / (url donde quiero hacer la solicitud) / true es asincrono =>
    xmlhttp.open("GET", "archivos/superheroes.json", true);
    xmlhttp.send();




  }
<html>
<head>
  <title>JSON</title>
  <meta charset="utf-8">


</head>
<body>
  <button id="boton">¡Procesar JSON!</button>
  <h4>JSON puro:</h4>
  <p id="resultado1"></p>

  <h4>JSON parseado:</h4>
  <p id="resultado2"></p>

  <h4>Objeto literal resultante:</h4>
  <p id="resultado3"></p>
  
  </body>
</html>
    
asked by francisco dwq 20.12.2017 в 13:01
source

3 answers

1

According to Mozilla :

  

The property XMLHttpRequest.onreadystatechange contains the   event handler that will be invoked when the event is triggered    readystatechange , that is, each time the property changes    readyState of XMLHttpRequest .

So yes, it is a property that contains the reference of a callback (event) to be executed later.

For example:

var carro = {
   correrEvent : null,
   correr:function(){
    if(this.correrEvent!= null){
      this.correrEvent();
    }
   }
}

carro.correrEvent = function(){ alert("el carro esta corriendo") }
carro.correr();

The example shows how the correrEvent property is used where the user subscribes and when it runs, if assigned, it is executed.

It is similar to the event of C # that can be referenced as properties but executed as methods:

public class Ejemplo{
  public event EventHandler MyEvent;

  public void EjecutarEvento()
  {
       MyEvent(this, EventArgs.Empty); // se ejecuta como metodo
  }
}

new Ejemplo().MyEvent += (a,b)=>{ } // asignos el evento
    
answered by 20.12.2017 в 13:13
0

In Javascript a function is an object :

var suma= new Function('param1','param2','return param1 + param2');
console.log(suma(3,5));

Therefore distinguishing between property / attribute and method does not make much sense. In addition, it may be that a property supports more than one type.

    
answered by 20.12.2017 в 13:13
0

We talk about methods when they are functions that already come in the prototype of the object, therefore, when you get an instance of that object, that function is already defined.

When you get the reference to the object (HTMLElement) of the button, it is an instance of HTMLElement that already has the function click then it is a method of the instance of the button.

var boton=document.getElementById('boton');
console.log(boton.click); // ya es una función
<button id="boton">hola</button>

In the other case, when instances XMLHttpRequest this does not have a function onreadystatechange . It is simply a propiedad whose initial value type null . Until you overwrite it, it does not become a feature.

let xmlhttp = new XMLHttpRequest();
console.log(xmlhttp.onreadystatechange) // es una propiedad con valor null

However, re-declaring xmlhttp.onreadystatechange as a function if you are converting it into a method of the instance.

    
answered by 20.12.2017 в 13:54