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

JavaScript object-oriented programming basics: encapsulation_js object-oriented

WBOY
Release: 2016-05-16 18:47:49
Original
772 people have browsed it

For a long time (I want to gloat here), js has been "a kind of embellishment, completing very limited functions, such as form validation, and its language itself has been regarded as a procedural language. It is difficult to complete complex functions." However (I want to say it bitterly and sadly), "The emergence of Ajax has made complex scripts a necessary component, which has put forward new requirements for JavaScript programming. Many Ajax applications have begun to use JavaScript object-oriented Properties are developed to make the logic clearer. In fact, JavaScript provides a complete mechanism to implement object-oriented development ideas." Oh my god, I didn’t want to learn and didn’t dare to learn, but now I have to bite the bullet and learn.
So much nonsense about objects here. We all know that the three main characteristics of object-oriented programming are: encapsulation, inheritance and polymorphism. Below, we will record some learning experiences around these three characteristics.
Okay, let’s start with encapsulation. As we all know, objects are the most basic unit of encapsulation. Encapsulation prevents the impact of changes caused by program interdependencies. Object-oriented encapsulation is clearer and more powerful than traditional language encapsulation. Code is cheap. Let’s look at a simple code:

// Define a class by defining a function
function class1() {
// Definition of class members and constructor
// Here class1 is both a function and a class. As a function, it can be understood as the constructor of a class, responsible for initialization.
}

// Use the new operator to obtain an instance of a class
var obj = new class1();
/* Putting aside the concept of class, from the form of the code, class1 is a function, so can all functions be operated with new? The answer is yes.
In JavaScript, functions and classes are the same concept. When a function is new, an object will be returned. If there are no initialized class members in this function, an empty object will be returned.
In fact, when new a function, this function is the constructor of the represented class, and all the code in it can be regarded as working to initialize an object. Functions used to represent classes are also called constructors.
In JavaScript, each object can be viewed as a collection of multiple properties (methods)
*/

function test() {
alert( typeof (obj));
}




The above code defines a class class1, which is a simple encapsulation in js. Let's see how js defines a "static class",

function class1() { // Constructor
}
// Static property
class1.staticProperty = " test " ;
// Static method
class1.staticMethod = function () {
alert(class1.staticProperty);
}

function test() {
// Call the static method
class1.staticMethod();
alert( typeof ( class1));

}

Then look at "abstract classes":

/*
In traditional object-oriented languages, virtual methods in abstract classes must first is declared, but can be called from other methods.
In JavaScript, virtual methods can be seen as methods that are not defined in the class, but have been used through this pointer.
Different from traditional object-oriented methods, virtual methods here do not need to be declared but are used directly. These methods will be implemented in the derived class

*/

// Define the extend method
Object.extend = function (destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function (object) {
return Object.extend. apply( this , [ this , object]);
}
// Define an abstract base class base with no constructor
function base() { }
base.prototype = {
initialize: function () {
this .oninit(); // Called a virtual method
}
}
// Define class1
function class1() {
// Constructor
}
// Let class1 inherit from base and implement the oninit method
class1.prototype = ( new base()).extend({
oninit: function () { // Implement the oninit virtual method in the abstract base class
// Implementation of oninit function
}
});

We see that above "let class1 inherit from base and implement oninit in it" Method", the concept of "inheritance" is used, please pay attention. Let’s take a look at the execution effect:

function test() {
var obj = new class1();
obj.oninit = function () { alert( " test " ); }
obj.oninit();
}

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