Method to Simulate Classes Using Constructor Functions in JavaScript

Preface

The editor of this article will take you to learn about simulating classes in JavaScript using constructor functions (construcor function) together. Without further ado, let's take a look together below if you are interested.

Constructor Function Introduction

You can use ES6 Use the class keyword to implement a class, but I suggest you use the traditional constructor function to simulate a class, because this can give you the illusion that you are a JavaScript veteran, hahaha!

What is a constructor function? A constructor function is one of the methods for writing objects. Generally, you can write an object like this:

var obj = { a:1, b:2 };

But you can also use the constructor function to write objects:

function Obj(a, b){
 this.a = a;
 this.b = b;
}
var obj = new Obj(1, 2); //obj is equivalent to { a:1, b:2 }

The advantage of using the constructor function is that you can pass parameters. Constructor functions usually start with an uppercase letter and need to be called with the new keyword. There is no class in JavaScript, and we can simulate a class using constructor functions.

Write a stack class using the constructor function

Now that we have understood the constructor function, we use it to write a mini stack class. The following is the implementation code:

Stack.js

function Stack() {
 // Private variable items, used to record the array, the object cannot be operated directly
 var items = [];
 // Class method push, adds an item to the end of the array, and the object can be called directly
 this.push = function (element) {
 items.push(element);
 };
 // Delete and return the item at the end of the array
 this.pop = function () {
 return items.pop();
 };
}

In the above stack class, there is a private variable items. Why can't it be directly operated? Why can the methods hung on this be directly called? Because the new operator will point this in the constructor function to the generated object, which means that the methods or properties hung on this will become the methods or properties of the generated object in the future, so they can be directly called. While items is a local variable inside the function, it is invisible outside the function, and the generated object can only operate items by calling its own methods, along the scope chain.

var stack = new Stack();
// The stack object cannot directly operate items, and the result is undefined
console.log(stack.items) 
// The stack object can directly operate the properties and methods hung on this in the constructor function
stack.push(1);
// Printed1
console.log(stack.pop())

If you are not familiar with JavaScript, you should first learn about the relevant knowledge of JavaScript scope, this, and new operators. It is recommended to read Stoyan Stefanow's 'JavaScript OOP Programming Guide', which contains many small code snippets and related graphic explanations to help you better understand the relevant features of JavaScript.

Summary

That's all for this article. I hope the content of this article can bring some help to everyone's learning or using Javascript. If you have any questions, you can leave messages for communication.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)