How to create an event?

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


The code should print 1 to the console.
As for example sockets.
var socket = new WebSocket( "example.com:8081" );

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


Or need to create an event.
To make the code above work?
July 9th 19 at 13:58
3 answers
July 9th 19 at 14:00
Solution
From your question it is not clear what exactly you want to achieve, but let's look at an example with WebSocket.

Using modern capabilities of javascript to implement this behavior is quite simple:
  1. Create a new instance of class MyWebSocket.
  2. Immediately run a connection to the specified address.
  3. The connection is an asynchronous operation, so the returned Promise.
  4. Declare a property onopen so that when you set the values of called function-setter.
  5. Inside the setter to say that callback (the function that the user wrote in onopen) must be called after the promise returned by connectwill be executed (error handling for simplicity is not considered). As promises are equal proportions of rainbows, pixie dust and the tears of unicorns, callback, we can set at any time - if the connection is not yet installed, this function will wait if the connection is already established in the past, the function will be executed immediately.
  6. In this case we do a two-second delay of the connection. Try removing the setTimeout code will work as if nothing had happened.
  7. Finally, we call our function-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/
Exactly promises - jerald_Buckridge30 commented on July 9th 19 at 14:03
One question is why: this.connection.then( cb.bind( this ) ), not this.connection.then( cb.call( this ) )? - jerald_Buckridge30 commented on July 9th 19 at 14:06
Because bind returns a function reference, and call the result of its execution. That is, the callback will be executed at the time of installation properties, and after resolve of promis thrown out an error that undefined (that now returns a callback) is not a function.

But it already the question does not apply directly - you can just cb to link to promis, if the context is not necessary (although usually retain it, of course). - aniya commented on July 9th 19 at 14:09
Yes, but the result is going to be with this the this. what's wrong with it. Anyway I tested and the result of all MyWebSocket not changed. Why is it better to bind than to return immediately? - jerald_Buckridge30 commented on July 9th 19 at 14:12
All I understood. call with a clear indication of its uses, and bind overrides. - jerald_Buckridge30 commented on July 9th 19 at 14:15
Forget for a second about this. Bind and call are doing different things - bind binds a context for the subsequent call and the call immediately calls the function with the specified context.
The result is completely different. Try experimenting with this option, there are clear differences - https://jsfiddle.net/koceg/p2utcp9j/1/ - aniya commented on July 9th 19 at 14:18
: Yes, I deduced in the console cb.bind( this ) and cb.call( this ) Result them really different. call returns the result of the function and this only overrides this. And prepares the function for further use, I understand what You mean. And why is everyone so. - jerald_Buckridge30 commented on July 9th 19 at 14:21
July 9th 19 at 14:02
If primitive, then so:
function f() {
 this.n = 'name';
 this.oncreate = function() {
console.log("oncreate");
};
 this.create = function() {
 /* your code */
this.oncreate();
};
};

var of = new f();
of.oncreate = function() {
 console.log("Some message");
};
of.create();
This fool is clear. Here the logic is to not cause you have just created the function below. Well, not setTimeout to use. - jerald_Buckridge30 commented on July 9th 19 at 14:05
: what function you want to call what's setTimeout? - jerald_Buckridge30 commented on July 9th 19 at 14:08
: of.create();
Using half cause inside the object f() property oncreate.
After 1 second it is already, just there in the prototype.
In other words, rather code:
function f() {
than var = this;
than.n = 'name';
than.oncreate = null
setTimeout( function() {
if ( limit.oncreate ) {
than.oncreate();
}
} , 1000 );
};

var of = new f();
of.oncreate = function() {
console.log("Some message");
};
In a second will appear in the console - "Some message" - aniya commented on July 9th 19 at 14:11
July 9th 19 at 14:04
Judging by the example in the question, You need to get the function outside and call it in Your functions, it does not necessarily need an event, simply use colbeck:
function F(cb) {
 this.n = 'name';
 if(typeof cb === 'function') {
cb.call(this);
}
}

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


If you still need the event, you can use any implementation EventEmitter'and which fully on npm
I'm interested in the implementation as with the socket Object. There I throw only alternative functions. And they have already called in with a successful open connection. - jerald_Buckridge30 commented on July 9th 19 at 14:07
: no one function will not get called by itself, in the case of websockets Your function causes the browser itself.
Have your own object You will have to call the handler when the event happened.

If more, write what you want to implement, you may be able to suggest how to implement it - jerald_Buckridge30 commented on July 9th 19 at 14:10
: You can call asynchronously using half. Of course the socket is invoked. there was just an alternative to the object in onopen. But the question is when it is invoked. He understands that the connection is true? It is not in the implementation of the case approach. - aniya commented on July 9th 19 at 14:13
:
He understands that the connection is true?

How the browser understands that window.onload? The browser sees that a socket connection is established and calls the handler function if defined. - jerald_Buckridge30 commented on July 9th 19 at 14:16

Find more questions by tags JavaScript