Home > Web Front-end > JS Tutorial > body text

Minimalist method to complete JavaScript encapsulation and inheritance

小云云
Release: 2017-11-30 09:25:36
Original
1441 people have browsed it

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
    }
};
Copy after login


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;
     }
 };
Copy after login

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

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


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;
    }
};
Copy after login


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;
     }
 };
Copy after login


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

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


##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;
    }
};
Copy after login


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
Copy after login


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;
    }
};
Copy after login


Then, generate two instance objects:

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


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

cat2.changeSound("啦啦啦");
cat1.makeSound(); // 啦啦啦
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!