The Classy Way to Create Objects

programming
1
This is the discussion topic where you can post all your questions (and complaints) about using the new-ish class syntax to create objects: https://www.kirupa.com/javascript/classy_way_to_create_objects.htm :slight_smile:
1 Like
2

I remember learning this stuff from senocular’s tutorial. It was a game changer once I understood what was going on. Ahh memories…

4 Likes
3

This is great thanks, Kirupa. I started here and worked my way back to your Intro to Objects article. I’ve been programming in JavaScript for 10+ years and I feel like I still have a lot to learn. Even refreshing with these fundamentals is so helpful.

1 Like
4

What do classes offer that functions cannot? I wrote the same piece of code from the article using functions. There is a planetMaker function and a potatoPlanet function which inherits from planetMaker. It seems cleaner and simpler this way, as it doesn’t require a lot of syntax (this, extends, super, constructor) and the code is reasonably well structured and readable. Why is this pattern not used more often?

var planetMaker = function (name, radius) {
	var gravity;
	return {
		getSurfaceArea: function () {
			return 4 * Math.PI * Math.pow(radius, 2);
		},
		setGravity: function (value) {
			gravity = value;
		},
		getGravity: function () {
			return gravity;
		}
	};
};

var potatoPlanet = function (name, width, potatoType) {
	var planet = planetMaker(name, width);
	
	planet.getPotatoType = function () {
		return potatoType;
	};
	return planet;
};

Everything works as expected:

var potatoe = potatoPlanet('spudnik', 12411, 'Russet');
potatoe.setGravity(9);
potatoe.getGravity();
9
potatoe.getPotatoType();
"Russet"
5
  1. Clear intent. When you see the class keyword, you know its intent is to make instances (with a few exceptions with abstract or static classes). As a structure, functions alone are capable of doing much more so in seeing a function in code, it’s not always clear that it’s designed to create new object instances.
  2. Implicit returns. In the constructor, you don’t need to return an object. It is automatically returned for you keeping the constructor (a little) simpler.
  3. Method sharing. When you create new instances of a class, new copies of methods aren’t created for each and every instance. Instead, only a single method exists that is shared among all instances of that class.
  4. Method overrides. You can easily override methods of the same name from a superclass while still being able to easily access the original implementation through super.
  5. Static inheritance. When extending another class, not only does inheritance come automatically for instances of the class, but static methods also get inherited. For example, ArraySubclass.from() will use the from() inherited from the Array superclass and create ArraySubclass instances when called.
  6. Identity. Instances of classes have an association with their constructor. You can tell if an object is an instance of the constructor using the instanceof operator.
  7. Fitting in. Classes are the canonical way for defining new custom object types in JavaScript. By using classes you can easily integrate with other systems such as Web Components (classes needed to extend HTMLElement, etc.) and have others easily integrate with your own code.
2 Likes
6

Thank you, that was fast and informative. I guess that when you’re working with Canvas, point number 3 really matters in terms of speed.

1 Like
7

This one is one of the more popular articles on the site that doesn’t have a video version. Well, just fixed that :adhesive_bandage:

:stuck_out_tongue: