This referencing html instead of class

JavaScript
1 

class Dropzone
{
	constructor(x)
	{
		this.hoverState=0;
		x.addEventListener("drop", this.drop);
		x.addEventListener("dragover", this.over);
		x.addEventListener("dragleave", this.leaveOver);
	}
	
	over(ev)
	{
		ev.preventDefault();
		if(!this.hoverState)
		{
			let cl=document.getElementById("tempDrag").cloneNode();
			cl.id="vvv";
			ev.target.appendChild(cl);			

		}
		this.hoverState=1;
	}
	
	leaveOver(ev)
	{
		ev.preventDefault();
		document.getElementById("vvv").remove();
		this.hoverState=0;
	}

	drop(ev)
	{
		ev.target.appendChild(document.getElementById("tempDrag"));
		document.getElementById("tempDrag").removeAttribute("id");
		this.leaveOver(ev); //?
	}
}

When using this class you get the error: this.leaveOver is not a function.
When I put up a watch on this, I get a refence to the DIV that I bound my dropzone with.
How can I reference my class-object?

2

You can .bind() it to the handler function like

x.addEventListener("drop", this.drop.bind(this))

Note that this will create a new function with the bound this for every class instance though, so it kind of defeats the purpose of having the function in the prototype.

1 Like
3

there are a couple functions that change the this in their callbacks. for instance

  • addEventListener
  • ‘DOM 0’ event handlers
  • setTimeout
  • setInverval
  • all array methods (that is, pretty much every method of a built-in object that accepts a callback)
1 Like
4

If you’re implicitly losing that context, what’s the use of writing OO-ecmascript?

5

Why would you want to use OO-ecmascript, when you can use FP-ecmascript?

6

For the moment it’s just for the fun of it.
But I can imagine using it for larger projects too.
FP is harder to maintain and less clean.

7

Why do you think that functional programming is harder to maintain and less clean than object oriented programming?

For the sake of comparison, underscore uses the following as examples of oo and fp style:

_([1, 2, 3]).map(function(n){ return n * 2; }); // object oriented
_.map([1, 2, 3], function(n){ return n * 2; }); // functional programming
1 Like
8

Polymorfism and inheritance.
Currently for my testcases, I’m combining them BTW.
But I think it would be nice to bind a HTML-element to a class to give it behavior, and than a class could contain this behavior nicely.
for example:

es:

d= new Dropzone("#mydropzone");

html

<div id="mydropzone"></div>
9

class-based thinking … and JavaScript doesn’t have classes.

PS. as the GoF stated over 20 years ago: Favor ‘object composition’ over ‘class inheritance’ ( https://en.wikipedia.org/wiki/Composition_over_inheritance )

10

Hey, it’s a theoretical exercise.
They just introduced classes in ES, who know’s what options we’ll have in a few year time…

11

in a few years time, probably no one talks about JS classes any more.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.