Object.observe()

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

Sumário

O método Object.observe() é usado para observar mudanças em um objeto de forma assíncrona. Ele fornece um fluxo de mudanças conforme elas ocorrem.

Sintaxe

Object.observe(obj, callback)

Parâmetros

obj
O objeto a ser observado.
callback
A função chamada cada vez que as alterações são feitas, com o seguinte argumento:
changes
Um array de objetos onde cada item representa uma mudança. As propriedades destes objetos de mudança são:
  • name: O nome da propriedade que foi alterada.
  • object: O objeto alterado depois que a mudança foi feita.
  • type: Uma string indicando o tipo de mudança. Pode ser "add", "update", ou "delete".
  • oldValue: Apenas para os tipos "update" e "delete". O valor antes da alteração.

Descrição

O callback é chamado à cada vez que uma mudança ocorre no obj, com um array contendo todas as mudanças na ordem em que elas ocorreram.

Exemplos

Exemplo: Registrando todos os três tipos diferentes

var obj = {
  foo: 0,
  bar: 1
};

Object.observe(obj, function(changes) {
  console.log(changes);
});

obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]

obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]

delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]

Exemplo: Data Binding

// Um modelo chamado "user"
var user = {
  id: 0,
  name: 'Brendan Eich',
  title: 'Mr.'
};

// Criando uma saudação para o user
function updateGreeting() {
  user.greeting = 'Olá, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();

Object.observe(user, function(changes) {
  changes.forEach(function(change) {
    // Sempre que o name e o title mudarem, o updateGreeting será executado
    if (change.name === 'name' || change.name === 'title') {
      updateGreeting();
    }
  });
});

Especificações

Strawman proposal for ECMAScript 7.

Compatibilidade com Navegadores

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte Básico 36 Não suportado Não suportado 23 Não suportado
Recurso Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte Básico Não suportado 36 Não suportado Não suportado 23 Não suportado

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: lvendrame, AlanCezarAraujo
 Última atualização por: lvendrame,