JavaScript Object-oriented

Source: Internet
Author: User

1.Javascript Object-oriented concepts
(1). All things Are object
(2). Object has encapsulation and inheritance attributes
(3). Use message communication between objects and objects, each with information hiding
JavaScript is an object-based (object-based) language, and everything you encounter is almost always an object. However, it is not a real object-oriented programming (OOP) language, because
There is no class (class) in its syntax
2. Class-based object-oriented and prototype-based object-oriented approach comparison
In class-based object-oriented mode, objects (object) are generated by classes (class). In the prototype-based object-oriented approach, the object is dependent on the constructor
(constructor) is constructed using prototypes (prototype). Give an example of an objective world to illustrate the differences in cognition in two ways. For example, a factory build a car, on the one hand, workers must refer to a
Engineering drawings, designed to specify how the car should be made. The engineering drawings here are like the classes in the language, and the cars are made by this class;
People and machines (equivalent to constructor) use various components such as engines, tires, and steering wheels (the equivalent of prototype's various properties) to construct the car.
3. Object-oriented features:
Encapsulation, inheritance, and polymorphism. These features are described in detail here, and the latter sections are implemented in JavaScript to achieve complete object-oriented simulations.
Encapsulation: Encapsulation is the combination of various methods and variables into a class, using this class to represent an object to complete a certain task can be saved by the scope and the operation it can do. Encapsulation hides the method execution
The details.?
Inheritance: Inheritance is the ability to generate new classes based on the methods and member variables of existing classes.
Polymorphic: Polymorphism is the ability of an object to change its form as the program executes
4. Basic Data type:
Number, String, Boolean, Function, Object, Array, null, undefined
Note the difference between null and undefined.
5. Implementation of inheritance
(1). Object Impersonation Method
<script type= "Text/javascript" language= "JavaScript" >
function ClassA (scolor) {
This.color=scolor;
This.saycolor=function () {
Alert (This.color)
}
}
function ClassB (scolor,sname) {
This.method=classa ();//ClassA's constructor becomes the ClassB method
This.method= (Scolor); Using the ClassA constructor, CLASSB receives the properties and methods defined in the ClassA constructor
Delete This.method; Delete a reference to a ClassA
This.name=sname;
This.sayname=function () {
Alert (this.name)
}
}
var obj= new ClassB ("Blue", "Nicholas");
Obj.saycolor ();
Obj.sayname ();
Alert (obj instanceof ClassA); Returns false
Alert (obj instanceof ClassB); Returns True
</script>
Above, ClassA is a constructor, in fact, it is only a function, so the construction of ClassA is a method of CLASSB, and then call the method, in ClassB introduced ClassA () constructs
The properties and methods defined in the function. Finally, remove the reference to the ClassA. As a result, the properties and methods defined in the ClassA constructor become the properties and methods defined in the CLASSB.
For the instanceof method, if using the object impersonation inheritance, use the instanceof < base class name > to return False. So the object emerges from the false inheritance law.
The impersonation method is only suitable for all properties and methods defined in the constructor of the class
(2). Call () and apply () methods
The call method is most similar to the Classic object impersonation method, where the first parameter is used as the object of this, representing the object that needs to be inherited, and the other parameters are passed directly to the base class constructor.
<script type= "Text/javascript" language= "JavaScript" >
function ClassA (scolor) {
This.color = Scolor;
This.saycolor = function () {alert (this.color);};
}
function ClassB (Scolor, SName) {
This.newmethod = ClassA;
This.newmethod (Scolor);
Delete This.newmethod;
Classa.call (this, scolor); It is simple, with a line equivalent to three rows above.
THIS.name = SName;
This.sayname = function () {alert (this.name);};
}
Use the direct definition object method. Inherit from the corresponding object.
function Saycolor (Sprefix, Ssuffix) {
Alert (Sprefix + This.color + ssuffix);
}
var obj = new Object ();
Obj.color = "Red";
Saycolor.call (obj, ' The color is ', ', a very nice color indeed. '); Indicates that the Obj object inherits from Saycolor.
</script>
The Apply method has two parameters, the This object (that is, the object that needs to be inherited), and the array to pass to the base class constructor parameter. For example:
function ClassB (Scolor, SName) {
This.newmethod = ClassA;
This.newmethod (Scolor);
Delete This.newmethod;
Classa.apply (This, new Array (Scolor)); Unlike call, the second parameter is an array of parameters.
THIS.name = SName;
This.sayname = function () {alert (this.name);};
}
3. Prototype Chain inheritance
<script type= "Text/javascript" >
function ClassA (scolor) {
This.color = Scolor;
}
ClassA.prototype.sayColor = function () {alert (this.color);}; Prototyping methods
If you need to inherit the prototype method in ClassA, you need to use the following statement in the subclass: Classb.prototype = new ClassA ();
function ClassB (Scolor, SName) {
Classa.call (this, scolor); Inherits the construction method in the ClassA

THIS.name = SName;
This.sayname = function () {alert (this.name);};
}
Classb.prototype = new ClassA (); Inherits the prototype method in the CLASSB

var objb = new ClassB ("Blue", "Nicholas");
Objb.saycolor ();
Objb.sayname ();
Alert (OBJB instanceof ClassA); Returns True
Alert (OBJB instanceof ClassB); Returns True
</script>
Generally speaking, in JavaScript, inheriting a class, object impersonation and prototype chain will be mixed together. Use an object to impersonate a property of an inherited constructor, using a prototype chain to inherit
The method that prototype the object.

JavaScript Object-oriented

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.