Minimalist method to complete JavaScript encapsulation and inheritance

In this article, we are going to talk about a relatively new knowledge for beginners: writing JavaScript classes in a minimalist way. The "minimalist approach" is the work of Dutch programmer Gabor de Proposed by Mooij, this method does not use this and prototype, and the code is very simple to deploy. This is probably why it is called the "minimalist method". The following will introduce how to use the minimalist method to complete JavaScript encapsulation and inheritance. I hope it will be helpful to everyone.

1. Encapsulation

First of all, it also uses an object to simulate a "class". In this class, define a constructor createNew() to generate instances.

var Cat = {
　　　　createNew: function(){
　　　　　　// some code here
　　　　}
};

Then, in createNew(), define an instance object and use this instance object as the return value.

var Cat = {
 　　　　createNew: function(){
 　　　　　　var cat = {};
 　　　　　　cat.name = "大毛";
 　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
 　　　　　　return cat;
 　　　　}
 };

When used, call the createNew() method to get the instance object.

var cat1 = Cat.createNew();
cat1.makeSound(); // 喵喵喵

The advantage of this method is that it is easy to understand, has a clear and elegant structure, and conforms to the traditional "object-oriented programming" construct, so the following features can be easily deployed.

2. Inheritance

Let one class inherit another class, which is very convenient to implement. Just call the latter's createNew() method in the former's createNew() method.
First define an Animal class:

var Animal = {
　　　　createNew: function(){
　　　　　　var animal = {};
　　　　　　animal.sleep = function(){ alert("睡懒觉"); };
　　　　　　return animal;
　　　　}
};

Then, in Cat’s createNew() method, call Animal’s createNew() method

var Cat = {
 　　　　createNew: function(){
 　　　　　　var cat = Animal.createNew();
 　　　　　　cat.name = "大毛";
 　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
 　　　　　　return cat;
 　　　　}
 };

The Cat instance obtained in this way will inherit the Animal class.

var cat1 = Cat.createNew();
cat1.sleep(); // 睡懒觉

##3. Private properties and private methods

In the createNew() method, as long as it is not defined on the cat object Methods and properties are private.

var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　var sound = "喵喵喵";//私有属性
　　　　　　cat.makeSound = function(){ 
     alert(sound); 
    };
　　　　　　return cat;
　　　　}
};

The internal variable sound in the above example cannot be read externally. It can only be read through the public method makeSound() of cat.

var cat1 = Cat.createNew();
alert(cat1.sound); // undefined

4. Data sharing

Sometimes, we need all instance objects to be able to read and write the same internal data. At this time, just encapsulate the internal data inside the class object and outside the createNew() method.

var Cat = {
　　　　sound : "喵喵喵",
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.makeSound = function(){ alert(Cat.sound); };
　　　　　　cat.changeSound = function(x){ Cat.sound = x; };
　　　　　　return cat;
　　　　}
};

Then, generate two instance objects:

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // 喵喵喵

At this time, if one instance object modifies the shared data, the other instance object will also be affected.

cat2.changeSound("啦啦啦");
cat1.makeSound(); // 啦啦啦

Minimalism looks beautiful, but it also has shortcomings. First of all, instanceof cannot be used to determine the class to which an object belongs, "cat1 instanceof Cat" cannot pass. In addition, although minimalism gets rid of the shortcomings of using the prototype chain (properties cannot be private, creating and inheriting objects is not intuitive), it also exposes the disadvantages of not using the prototype chain: every time an instance is generated, it must For repeated content, it will occupy more memory.

The above content is about the minimalist method of writing JavaScript. I hope it will be helpful to everyone's work.

Related recommendations:

JavaScript object-oriented (minimalist approach)_js object-oriented

Methods for handling JavaScript exceptions

JavaScript simulation Introduction to three ways to implement encapsulation and their differences

The above is the detailed content of Minimalist method to complete JavaScript encapsulation and inheritance. For more information, please follow other related articles on the PHP Chinese website!