Tanto Object.prototype.__defineSetter__
quanto Object.prototype.__defineGetter__
são métodos obsoletos (e também não eram padronizados), em seus lugares pode usar o método:
O uso deles, seja dos métodos obsoletos tanto quanto da API nova/padronizada, é "detectar/executar" quando ocorre de setar um valor a uma propriedade do objeto (set
) e quando tenta obter o valor de uma propriedade (get
).
Mas claro que não é apenas pegar um valor ou setar um, na verdade neste ponto você como programador irá decidir se realmente irá setar algo ou se irá devolver algo, semelhante aos métodos mágicos __set
e __get
do PHP.
Detectando quando define um valor a um objeto
Se deseja que uma função seja disparada quando setar um valor então faria isto na sintaxe antiga:
var o = {};
o.__defineSetter__('foo', function(val) {
console.log("foo:", val);
});
o.__defineSetter__('bar', function(val) {
console.log("bar:", val);
});
document.getElementById("to-foo").onclick = function () {
o.foo = new Date().toString();
};
document.getElementById("to-bar").onclick = function () {
o.bar = new Date().toString();
};
document.getElementById("get-foo").onclick = function () {
console.log(o.set);
};
document.getElementById("get-bar").onclick = function () {
console.log(o.bar);
};
<button id="to-foo">Setar valor para o.foo</button>
<button id="to-bar">Setar valor para o.bar</button><br>
<button id="get-foo">Exibir valor de o.foo</button>
<button id="get-bar">Exibir valor de o.bar</button>
Sintaxe padronizada:
var o = {};
Object.defineProperty(o, 'foo', {
set: function(val) {
console.log("foo:", val);
}
});
Object.defineProperty(o, 'bar', {
set: function(val) {
console.log("bar:", val);
}
});
document.getElementById("to-foo").onclick = function () {
o.foo = new Date().toString();
};
document.getElementById("to-bar").onclick = function () {
o.bar = new Date().toString();
};
document.getElementById("get-foo").onclick = function () {
console.log(o.set);
};
document.getElementById("get-bar").onclick = function () {
console.log(o.bar);
};
<button id="to-foo">Setar valor para o.foo</button>
<button id="to-bar">Setar valor para o.bar</button><br>
<button id="get-foo">Exibir valor de o.foo</button>
<button id="get-bar">Exibir valor de o.bar</button>
Note que não setou valor algum, nos botões exibir o console.log
apenas exibe undefined
, isso significa que apenas interceptamos a execução/ação de setar, mas dentro da function
definida nada é feito, então é neste ponto que você decide se algo irá ocorrer e como deve ocorrer.
Detectando quando tenta pegar um valor de um objeto
Se deseja develver um valor customizado conforme a necessidade do seu negócio/comportamento então faria isto com sintaxe antiga:
var o = {};
o.__defineGetter__('foo', function(val) {
return +new Date;
});
o.__defineGetter__('bar', function() {
return +new Date;
});
document.getElementById("get-foo").onclick = function () {
console.log("valor de foo:", o.foo);
};
document.getElementById("get-bar").onclick = function () {
console.log("valor de bar:", o.bar);
};
<button id="get-foo">Pegar valor de o.foo</button>
<button id="get-bar">Pegar valor de o.bar</button>
Sintaxe padronizada:
var o = {};
Object.defineProperty(o, 'foo', {
get: function () {
return +new Date;
}
});
Object.defineProperty(o, 'bar', {
get: function () {
return +new Date;
}
});
document.getElementById("get-foo").onclick = function () {
console.log("valor de foo:", o.foo);
};
document.getElementById("get-bar").onclick = function () {
console.log("valor de bar:", o.bar);
};
<button id="get-foo">Pegar valor de o.foo</button>
<button id="get-bar">Pegar valor de o.bar</button>
Usando Object.defineProperty
com get
e set
Um detalhe é que na sintaxe padronizada você não precisa fazer:
var o = {};
Object.defineProperty(o, 'bar', {
get: function () {
/* retorna valor */
}
});
Object.defineProperty(o, 'foo', {
set: function (val) {
/* seta valor */
}
});
o.foo = 'test'; //Executa set:
console.log(o.foo); //Executa get:
Você pode fazer assim para o o.foo
:
var o = {};
Object.defineProperty(o, 'foo', {
get: function () {
/* retorna valor */
},
set: function (val) {
/* seta valor */
}
});
o.foo = 'test'; //Executa set:
console.log(o.foo); //Executa get:
Operadores set
e get
Alternativamente ao Object.defineProperty
você pode usar os operadores:
var o = {
set foo(val) {
console.log("Seta valor para o.foo:", val);
},
set bar(val) {
console.log("Seta valor para o.bar:", val);
},
set baz(val) {
console.log("Seta valor para o.baz:", val);
},
get foo() {
return +new Date;
},
get bar() {
return +new Date;
},
get baz() {
return +new Date;
}
};
o.foo = 100;
o.bar = 220;
o.baz = 333;
console.log("Pega o valor de o.foo:", o.foo);
console.log("Pega o valor de o.bar:", o.bar);
console.log("Pega o valor de o.baz:", o.baz);
Object.defineProperty
vs get
/set
Apesar de alguns lugares afirmarem que são idênticos em seus objetivos, o uso de Object.defineProperty
no terceiro parâmetro (aonde definimos o get
e set
) possui algumas configurações especificas:
configurable
enumerable
value
(opcional)
writable
(opcional)
Estarei editando esta parte em breve com detalhes, realmente nunca usei essas configurações para enteder bem o funcionamento.