简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release： 2016-05-16 17:51:43
Original
1232 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：
javascript object-oriented
source：php.cn
Previous article：JavaScript object-oriented knowledge collection (Read JavaScript Advanced Programming (Third Edition))_javascript skills Next article：Introduction to the use of apply() method and call() method in JavaScript_javascript skills
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
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
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！