Just JavaScript - ES2015 Class
Written by Ian Elliot   
Monday, 12 February 2018
Article Index
Just JavaScript - ES2015 Class
Extends & Super

Private Methods and Data

What about private methods and variables?

Although there is no provision for private entities in the class syntax i.e. no private keyword, you can still declare variables in the constructor and rely on closure to make them available to instance methods. For example:

class Point {
             constructor(x, y) {
                 this.x = x;
                 this.y = y;
                 var z = 100;
                 this.display = function () {
                                  alert(z);
                 };
             }
}

The private variable z is available to the instance method display because of the closure. Notice that private variables are not available to prototype methods as these do not have access to the closure.

 

Summary

There are three types of method you can define using class:

  • an instance method is defined in the constructor and each instance gets its own Function object

  • a prototype method is defined in the body of the class and each instance uses the same Function object via the prototype

  • a static method is defined in the body of the class using the keyword static and this is a property of the class Function.

There is also a fourth type of method which is not supported by the class syntax but still works:

  • a private method is defined in the constructor as a local variable and shared between all of the instance methods it is not available to any prototype methods.

JustJavaScripticon

Extends – Inheritance The Class Way ES2015

There are a number of ways of implementing inheritance in JavaScript as well as simply using the prototype chain. The class syntax formalizes one particularly attractive way of inheriting methods and properties from existing objects in the extends keyword.

The idea is that you can use a class or a constructor as if it was a more traditional class and inherit it as the basis for building an extended class.

For example suppose we start off with a simple Point class:

class Point {
             constructor(x, y) {
               this.x = x;
               this.y = y;
             }
}

we could use this to create a 3D Point class by adding a z coordinate. To do this we can create the new class Point3D that extends Point:

class Point3D extends Point{
             constructor(x,y,z){
               super(x,y);
               this.z=z;
             }
}

There are two new keywords being used – extends and super.

The extends keyword makes Point the base for the new class.

The super keyword calls the base class constructor and sets this to reference the new instance. Obviously you cannot use this until after you have called super.

That is, the above is equivalent to:

function Point3D(x,y,z){
           this=new Point(x,y);
           this.z=z;
}

 

You can see that where normally this is set to {} which is then expanded by having properties added to it in this case this is set to an instance of Point which likewise has properties added to it. You could say that the null object {} is the default base class but by calling super you use an instance of an existing class.

Of course, you can make use of the prototype object of the base instance to define new prototype methods as well as static methods. Notice that static methods are not inherited by the constructor.

The point is that everything works in exactly the way described in the previous section. The only difference is that instead of starting from an empty object i.e. {} you start from an instance of the base class.

Overall this is a harmless addition to JavaScript, but it isn't a reason for not understanding the way it all works.

This is an extract from the book Just JavaScript by Ian Elliot.

Buy Now: from your local Amazon

Just JavaScript 
An Idiomatic Approach

JustJavaScriptSmall

A Radical Look At JavaScript

 

Most books on JavaScript either compare it to the better known class based languages such as Java or C++ and even go on to show you how to make it look like the one of these.

Just JavaScript is an experiment in telling JavaScript's story "just as it is" without trying to apologise for its lack of class or some other feature. The broad features of the story are very clear but some of the small details may need working out along the way - hence the use of the term "experiment". Read on, but don't assume that you are just reading an account of Java, C++ or C# translated to JavaScript - you need to think about things in a new way. 

Just JavaScript is a radical look at the language without apologies.

Contents

  1. JavaScript – Essentially Different
  2. In The Beginning Was The Object
  3. Real World Objects 
  4. The Function Object
          Extract - The Function Object
          Extract - Function Object Self Reference
  5. The Object Expression
  6. Function Scope, Lifetime & Closure
    Extract Scope, Lifetime & Closure
    Extract Execution Context ***NEW!
  7. Parameters, Returns and Destructuring
         Extract - Parameters, and Destructuring
  8. How Functions Become Methods
  9. Object Construction
         Extract: - Object Factories
  10. The Prototype
         Extract - ES2015 Class and Extends
  11. Inheritance and Type
  12. The Search For Type
  13. Property Checking

Buy Now: from your local Amazon

Also by Ian Elliot 
JavaScript Async: Events, Callbacks, Promises and Async Await
Just jQuery: The Core UI 
Just jQuery: Events, Async & AJAX  

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

espbook

 

Comments




or email your comment to: comments@i-programmer.info



Last Updated ( Tuesday, 27 February 2018 )