Method of Simulating Classes with Constructor Function in JavaScript

Preface

In this article, this site takes you 1 learning is in JavaScript using the constructor function (construcor function) simulation class. Let's not say much below. Interested friends will have a look at it.

Brief introduction of constructor function

You can use the class keyword of ES6 to implement the class, but I suggest you use the traditional constructor function to simulate the class, because this can give people the illusion that you are an JavaScript veteran, haha!

What is a constructor function? The constructor function is one of the ways to write objects. In general, you can write an object like this:

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

But you can also use constructor functions to write objects:

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

The advantage of using constructor functions is that parameters can be passed. Constructor functions usually start with uppercase letters and need to be called using the new keyword. There is no class in JavaScript, and we can simulate one class by using the constructor function.

Writing Stack Classes Using Constructor Functions

Knowing the constructor function, we use it to write a mini stack class, and the following is the implementation code:

Stack.js

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

There is a private variable items in the stack class mentioned above. Why can't it be operated directly? Why can methods hanging on this be called directly? Because the new operator points the this in the constructor function to the generated object, which means that the method or property hanging on the this will become the method or property of the generated object in the future, it can be called directly. items is a local variable inside the function, which is invisible outside the function. The generated object can only operate items along the scope chain by calling its own methods.

var stack = new Stack();
// stack  Object cannot be manipulated directly items The result is that  undefined
console.log(stack.items) 
 
// stack  Object can directly manipulate the constructor function hanging in the  this  Properties and methods on 
stack.push(1);
//  Printed 1
console.log(stack.pop())

If you are not familiar with JavaScript, you should first learn about JavaScript scope, this and new operators under 1. It is recommended to read JavaScript Object-Oriented Programming Guide by Stoyan Stefanow. There are many small code fragments and related graphic interpretations in this book, which can help you better understand the related features of JavaScript.

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or use Javascript. If you have any questions, you can leave a message for communication.