3

Sempre que abro o Console do Google Chrome, fico de olho no autocomplete de propriedades, pra vê se surge alguma novidade, alguma coisa que ainda não aprendi. E me chamou atenção ver que os objetos têm a propriedade chamada __defineSetter__ e __defineGetter__.

Notei que essa propriedade existe no objeto window, bem como em objetos literais que criamos.

Eu gostaria de saber exatamente como funciona isso.

Essas propriedade afetam a maneira que os valores são definidos em um objeto Qual é a finalidade desses valores?

Eu gostaria de saber detalhes sobre compatibilidade com navegadores (estou fazendo essa pergunta em 2018) e se tem relação com Object.defineProperty

2 Respostas 2

4

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.

1
0

Eles servem para definir um método que será chamado quando algo estiver tentando atribuir um novo valor ao objeto atual, ou quando algo tentar ler o valor do objeto atual.

Exemplo.

var obj = "";
obj.__defineSetter__('value', function(val) { alert('x'); });

No caso acima, se algum método tentar mudar o valor da variavel obj, será emitido um alerta com o texto "x".

A mesma coisa para o defineGetter, porém para a leitura do valor.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .