Javascript OOP- write your first object and class
By: Dusing Chang
Tags: Beginner, JavaScript, Object Oriented, Coding, Frontend

Photo by Michael Dziedzic on Unsplash

*This series of articles won’t introduce the basic ideas of object-orientation programming(OOP). For more OOP introduction please see W3school or other resources.

This article shows how to create a class and object structure in JavaScript.

1.1 What is an object?

An object is a structure with key and value. Primitive value and special objects(such as array and function) can all be put into the object itself.

You can create an object like this:

NewObject = {

one: undefined,

two: null,

three: ture,

four: "String",

five: 3.14159,

six: {obj: "Object"},

seven: function fun(){...},

eight: [], //empty array

nine: /*/, //regular expression

}

But what is the difference between storing a value in an object and in a function?

Let’s do an experiment:

JS OOP 1.1.1

In the preceding code, obj2 did not copy the value of obj2, instead, it copies the address which has stored the ‘value: 1998’.

The mechanism is called ‘pass by reference’ or ‘pass by address’. That is why an object does not act as a variable.

Whilst accessing the value(we call it ‘property’), we use a dot notion to do this:

JS OOP 1.1.2

The object name (obj) is a namespace. That means properties and methods(functions) are valid only if we call or access the object. I put an object inside the object, which creates a sub-namespaces. We still have to access via name object the properties inside.

1.2 How to create a class with constructor functions?

The class is a programming entity which you can use it as a prototype to create similar objects.

The function to create a class we call it ‘constructors’.

JS OOP 1.2.1 constructor- class in JS

This weird function is actually the ‘class’ of JavaScript. Inside the function, we use ‘this’ keyword to point to the constructor itself.

The ‘sayhi’ method will return the last and first from the name object.

The name object is inside the constructor, so we use ‘this’ keyword to point to these properties.

Moreover, ‘this’ keyword does not have a value. It is just a substitution of the object we are going to create.

1.3new keyword and the create method

In the previous snippet, we use ‘new’ operator to create an object instance from Person class:

let person1 = new Person('Bob','Smith');

The object person1 here is the instance from the constructor function or a class.

Actually, there is another way to do it, it’s called create method.

We can use in this way:

let person2 = Object.create(person1);

This expression creates an object instance by ‘clone’ the existing object.

The person2 object also has the same properties as persion1(‘Bob’,’Smith’).

JS OOP 1.1.3.js the create method https://gist.github.com/readwalkerchang/0c713fe22ed295487cb14f6b13dd63bb

1.3 What is ES6 class?

The ES6 class is a new feature which can use to initiate a class(constructor function)

JS OOP 1.3.1 constructor- ES6 class in JS

This syntax is the simplification of the constructor function.

In the Ecma-262 document, it says:

Even though ECMAScript includes syntax for class definitions, ECMAScript objects are not fundamentally class-based such as those in C++, Smalltalk, or Java.

JavaScript(or formally we say EcmaScript) is a prototype-based language.

This characteristic makes it different when implementing other OOP feature like in inheritance and polymorphism.

We will discuss more in the next articles:

Beginner’s note: Javascript OOP- Inheritance