I'm starting the study with Vue.js and I came across a situation within one of the options and I imagine it will serve other options that is the use of the term function, for example:
var vm = new Vue({
methods : {
/* assim */
enviar() {
// code
},
/* ou assim */
enviar: function() {
// code
},
}
})
And with that, my question is whether there is a difference in each of the syntaxes and browsers?
According to the documentation in Mozilla , enviar although it is the contracted form of enviar: function() , the contracted form is a named function, while the second is an anonymous function.
Note: The shorthand syntax uses named function instead of anonymous functions (as in
…foo: function() {}…). Named functions can be called from the function body (this is impossible for anonymous function as there is no identifier to refer to). For more details, see function .
Source: Method definitions
But if you run the code below, you'll see that the collapsed form behaves like an anonymous function, at least it's this behavior I'm having when running in Opera.
var teste = {
nomeada: function nomeada(imprimir) {
return !imprimir ? nomeada(true) : console.log("nomeada");
},
curta(imprimir) {
return !imprimir ? curta(true) : console.log("curta");
},
anomina: function(imprimir) {
return !imprimir ? anomina(true) : console.log("anomina");
}
}
try {
teste.nomeada();
} catch (e) {
console.error(e.message);
}
try {
teste.curta();
} catch (e) {
console.error(e.message);
}
try {
teste.anomina();
} catch (e) {
console.error(e.message);
}Another curious point is that in the documentation in Mozilla says that the contracted form can not be used as.
Method definitions are not constructable
All method definitions are not constructors and will throw a TypeError if you try to instantiate them.
Source: Method definitions
But when I run the code below, I get a different behavior than the one pointed to. At least that's what happened when running in Opera.
var teste = {
nomeada: function nomeada() {
this.nome = "nomeada";
},
curta() {
this.nome = "curta";
},
anomina: function() {
this.nome = "anomina";
}
}
try {
console.log(new teste.nomeada);
} catch (e) {
console.error(e.message);
}
try {
console.log(new teste.curta);
} catch (e) {
console.error(e.message);
}
try {
console.log(new teste.anomina);
} catch (e) {
console.error(e.message);
} Another point, as for compatibility with browsers, short functions can only be used in newer / updated browsers. However, since you are using VueJS, you should be using vue-cli , gulp-babel or any solution that transpile your javaScript ES5 to something compatible with old browsers, so this is not a problem at all. / p>