Javascript Object-Oriented Programming (5): Class

This blog is reproduced in: http://devbean.javaeye.com/blog/406265

Class is one of the core concepts of object-oriented programming. A class represents the abstraction of a class of things with similar attributes. Starting from this article, we will officially enter the object-oriented section of JavaScript. The first thing to note is that there is no "class" keyword in Javascript-class is used as a keyword in most languages. Therefore, the class here becomes a concept, and it does not have a clear syntax mark.

1. Classes and constructors

As mentioned above, there is no explicit class concept in JavaScript. In fact, we only provide the class constructor. Class constructor makes up all the content of this class. Since it is called a constructor, it is also a common function, there is no difference. Therefore, we can easily define a constructor:

JS Code

Function person (name, age) {<br/> This. name = Name; <br/> This. age = age; <br/> This. show = function () {<br/> alert ("Hello, my name is" + this. name + ", my age is" + this. age); <br/>}; <br/>}

Here, we define a class person, which has two attributes: name and age; there is a method: Show. It seems that it is no different from the definition of classes in other languages. In fact, the biggest difference here is the function keyword. We defined a class by defining a function.

2. New

After defining a class, you need to create the class object. Javascript uses the new operator to create objects at a glance in other languages. The Code is as follows:

JS Code

VaR bill = new person ("bill", 30); <br/> alert (Bill. name); <br/> alert (Bill ["Age"]); <br/> bill. show ();

Here we use new to create a person class object. Similar to other languages, new is followed by the constructor of this class. After creating an object, you can use. or [] to access the attribute as described in the previous chapter.

Note that the constructor here is a common function. Can all functions use the new operator? The answer is yes. So what is the new operator?

When the new operator is used, JavaScript creates an empty object and then initializes the object. What is used for initialization? Of course it is the constructor you called. Finally, the created object will be returned to the caller, so we can use this object.

3. Prototype

Prototype indicates the prototype. In JavaScript, each object has a prototype attribute. This property points to a prototype object. This is the concept of prototype attributes and prototype objects.

Each object has a prototype attribute. constructor is a common function and a function is also an object. Therefore, constructor also has a prototype attribute. Each prototype object has a constructor attribute. The constructor attribute of this prototype object points to the constructor of this prototype attribute. That is to say, the new operator must ensure that the prototype attribute of the generated object is consistent with that of the constructor.

A little confused, right? Let's take a look at the graph in the attachment. In any case, make sure that the relationship shown in this graph is correct!

It should be noted that this prototype object is the basis of JavaScript object-oriented, and prototype is used for inheritance and other implementations.

4. Implementation tips: Check that the parameter is not empty and set the default value of the Parameter

Because JavaScript Functions are difficult to control parameters, parameter detection becomes a problem that cannot be ignored. Here is a programming tips to check whether the passed real parameters are not empty and to set the default values for parameters.

JS Code

Function print (musthave, person) {<br/> var defaultperson = {<br/> name: "noname", <br/> Age: 0 <br/> }; <br/> If (! Musthave) {// non-empty detection <br/> alert ("musthave shocould not be null! "); <Br/> return; <br/>}< br/> person = person | defaultperson; // you can specify the default value. <br/> alert (musthave + ": name-"+ person. name + "; age-" + person. age); <br/>}< br/> Print (); <br/> Print ("something"); <br/> Print ("something", {Name: "new", age: 20 });

Non-empty detection is relatively simple. The default value settings are skillful, and the short-circuit feature of the Javascript | operation is used. If the person parameter is null, | the first half is false. If the person parameter is null, the person is set to defaultperson. If the person parameter is not empty, | returns true directly, in this case, no or operation is performed.

 

Figure: