Home > Web Front-end > JS Tutorial > JavaScript object-oriented (minimalist approach)_js object-oriented

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

WBOY
Release: 2016-05-16 17:51:43
Original
1270 people have browsed it
Minimalist approach
Dutch programmer Gabor de Mooij proposed a new method that is better than Object.create (). He called this method "minimalist approach" . This is also the method I recommend.
 3. 1 Encapsulation
 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".
First of all, it also uses an object to simulate a "class". In this class, define a constructor createNew () to generate instances.
Copy code The code is as follows:

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

  Then, in createNew (), define an instance object and use this instance object as the return value.
Copy code The code is as follows:

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

When using it, call the createNew () method to get the instance object.
Copy code The code is as follows:

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

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" structure, so it can be easily deployed Features below.
 3. 2 Inheritance
  It is very convenient to let one class inherit another class. Just call the latter's createNew () method in the former's createNew () method.
First define an Animal class.
Copy code The code is as follows:

var Animal = {
createNew: function () {
var animal = {};
animal.sleep = function (){ alert ("Sleep in"); };
return animal;
}
};

Then, in Cat’s createNew () method, call Animal’s createNew () method.
Copy code The code is as follows:

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

  The Cat instance obtained in this way will inherit both the Cat class and the Animal class.
Copy code The code is as follows:

var cat1 = Cat.createNew ();
cat1.sleep (); // Sleeping in

 3. 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.
Copy code The code is as follows:

var Cat = {
createNew: function () {
var cat = {};
var sound = "meow meow";
cat.makeSound = function (){ alert (sound); };
return cat;
}
};

The internal variable sound in the above example cannot be read externally and can only be read through the public method makeSound () of cat.
Copy code The code is as follows:

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

 3. 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.
Copy code The code is as follows:

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

  Then, generate two instance objects:
Copy the code The code is as follows:

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

At this time, if there is an instance Object, if the shared data is modified, another instance object will also be affected.
Copy code The code is as follows:

cat2.changeSound ("La La La");
cat1.makeSound (); // la la la
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