Как создать реализацию событий?

Question

[M L]

function f() {
 this.n = 'name';
 this.onn = null;
if ( this.onn ) {
 this.onn();
}
};
var of  = new f();
of.onn = function() {
 console.log( 1 );
};

Код должен вывести 1 в консоль.
Как к примеру сокеты.

var socket = new WebSocket( "example.com:8081" );

socket.onopen = function() {
    console.log( 1 );
}

Или же нужно как-то создавать событие.
Чтобы код выше работал?

Answer 1

[Алексей Уколов]

Из вашего вопроса не до конца ясно, чего конкретно вы хотите добиться, но давайте рассмотрим пример с WebSocket.

Используя современные возможности javascript, реализовать такое поведение довольно просто:

1. Создаём новый экземпляр "класса" MyWebSocket.
   
2. Сразу же запускаем подключение по указанному адресу.
   
3. Подключение - асинхронная операция, поэтому возвращаем Promise.
   
4. Объявляем свойство onopen так, чтобы при задании ему значения вызывалась функция-сеттер.
   
5. Внутри сеттера говорим, что callback (та функция, которую пользователь записал в onopen) должен вызваться после того, как promise, возвращаемый методом connect, выполнится (обработку ошибок для упрощения не рассматриваем). Так как промисы состоят в равных пропорциях из радуги, пыльцы фей и слёз единорогов, callback мы можем установить в любой момент - если соединение ещё не установлено, наша функция дождётся, если соединение уже установлено в прошлом, функция будет выполнена сразу же.
   
6. В данном случае мы делаем двухсекундную задержку соединения. Попробуйте убрать setTimeout - код будет работать как ни в чём не бывало.
   
7. Наконец, вызывается наша функция-callback.
   

var MyWebSocket = function(url) {
  this.url = url;

  this.connection = this.connect();  // 2

  Object.defineProperty(this, 'onopen', { // 4
    set: function(cb) {
      this.connection.then(cb.bind(this)); // 5
    }
  });
}

MyWebSocket.prototype.connect = function() {
  console.log('connecting to %s', this.url);

  return new Promise(function(resolve, reject) {  // 3
    setTimeout(resolve, 2000); // 6
  });
}

var socket = new MyWebSocket('example.com:8081'); // 1

socket.onopen = function() {
  console.log('connection to %s established', this.url); // 7
}

https://jsfiddle.net/koceg/p2utcp9j/

Comments

[M L]

Точно промисы

[M L]

Один вопрос почему: this.connection.then( cb.bind( this ) ), а не this.connection.then( cb.call( this ) )?

[Алексей Уколов]

Потому что bind вернёт ссылку на функцию, а call - результат её выполнения. То есть callback будет выполнен в момент установки свойства, а после резолва промиса вывалится ошибка, что undefined (то, что сейчас возвращает callback) не является функцией.

Но это уже к вопросу не относится напрямую - можно просто cb привязать к промису, если контекст не нужен (хотя, обычно его сохраняют, конечно).

[M L]

Алексей Уколов: да, но результат уже будет с this указанном this. чем это плохо. Так или иначе я протестировал и результат всего MyWebSocket не поменялся. Почему лучше привязать, чем вернуть сразу?

[M L]

Алексей Уколов: А все я понял. call с явным указанием ее использует, а bind переопределяет.

[Алексей Уколов]

Забудьте на секунду про this. Bind и call делают разные вещи - bind привязывает контекст для последующего вызова, а call сразу вызывает функцию с указанным контекстом.
Результат совершенно разный. Попробуйте поэкспериментировать с этим вариантом, там понятнее различия - https://jsfiddle.net/koceg/p2utcp9j/1/

[M L]

Алексей Уколов: да я выводил в консоль cb.bind( this ) и cb.call( this ) Результат их действительно разный. call возвращает результат функции а this, только переопределяет this. И подготавливает функцию для дальнейшего использования, я понял о чем Вы. И почему все так.

Answer 2

[Дмитрий Беляев]

Судя по примеру в вопросе, Вам нужно получить функцию извне и вызвать ее в Вашей функции, для это не обязательно нужны события, достаточно использовать колбэк:

function F(cb) {
  this.n = 'name';
  if(typeof cb === 'function') {
    cb.call(this);
  }
}

var of  = new f(function() {
  console.log(1);
});

Если все же нужны события, воспользуйтесь любой реализацией EventEmitter'а коих полно на npm

Comments

[M L]

Мне интересна реализация как с Объектом socket. Там я кидаю только нативы функции. А они уже вызываются внутри при успешном open соединении.

[Дмитрий Беляев]

staffID: не одна функция не вызовется сама по себе, в случае с вебсокетами Вашу функцию вызывает сам браузер.
У собственного объекта Вам так или иначе придется вызывать обработчик, когда событие произошло.

Если более подробно напишите, что хотите реализовать, возможно смогу подсказать как это реализовать

[M L]

Дмитрий Беляев: Могу вызвать асинхронно с помощью тайма. Конечно сокет вызывается. так бы были просто нативы в объекте onopen. Но вопрос когда он вызывается. Как понимает, что соединение true? Дело не в реализации дело в подходе.

[Алексей Ярков]

staffID:

Как понимает, что соединение true?

А как браузер понимает, что window.onload? Браузер видит, что сокет-соединение установлено и вызывает функцию-обработчик, если она определена.