In-depth understanding of object-oriented in JavaScript

Source: Internet
Author: User

JavaScript is object-oriented. However, many people do not fully understand this.

In JavaScript, objects are divided into two types. A common object is something we generally understand: numbers, dates, user-defined objects (such.

There is also a "method object", which is the function we usually define. You may find it strange: The method is the method. How has it become an object? However, in JavaScript, methods are indeed processed as objects. The following is a simple example:
Copy codeThe Code is as follows:
Function func () {alert ('Hello! ');}
Alert (func. toString ());

In this example, func is defined as a method, but it contains a toString method, which indicates that func is processed as an object. More accurately, func is a "method object ". The following example continues:
Copy codeThe Code is as follows:
Func. name = "I am func .";
Alert (func. name );

We can set any attribute for func, which proves that func is an object. So what is the difference between a method object and a common object? First, the method object can be executed. Add a pair of parentheses to it to execute this method object.
Copy codeThe Code is as follows:
Func ();

Therefore, the method object has a dual nature. On the one hand, it can be executed, and on the other hand it can be used as a common object. What does this mean? This means that the method object can be completely independent from other objects. We can compare this with Java. In Java, methods must be defined in a class and cannot exist independently. JavaScript is not required.

A Method object is independent of other methods, which means it can be referenced and transmitted randomly. The following is an example:
Copy codeThe Code is as follows:
Function invoke (f ){
F ();
}
Invoke (func );

Pass one method object func to another method object invoke and let the latter execute func when appropriate. This is the so-called "Callback. In addition, this particularity of the method object makes this keyword hard to grasp. There are many related articles in this regard. I will not repeat them here.

In addition to being executable, a method object also has a special function, that is, it can use the new keyword to create a common object.

Each method object is automatically created with a prototype attribute. This attribute has nothing special to do with it. It can be accessed like other attributes and can be assigned values. However, when we use the new keyword to create an object, prototype takes effect: its value (also an object) contains all attributes, will be copied to the newly created object. The following is an example:
Copy codeThe Code is as follows:
Func. prototype. name = "prototype of func ";
Var f = new func ();
Alert (f. name );

During execution, two dialog boxes are displayed. The next dialog box indicates that the new object f has copied the name attribute from func. prototype. In the previous dialog box, func is executed as a method. You may ask why you need to execute func again at this time? In fact, executing func at this time serves as a "Constructor. To illustrate the image, let's repeat it:
Copy codeThe Code is as follows:
Function func (){
This. name = "name has been changed ."
}
Func. prototype. name = "prototype of func ";
Var f = new func ();
Alert (f. name );

You will find that the name attribute of f is not "prototype of func", but is replaced with "name has been changed ". This is the role of the "Constructor" played by the func object method. Therefore, in JavaScript, the following three steps are performed to create an object with the new Keyword:

1. Create a new common object;
2. Copy all properties of the prototype attribute of the method object to the new common object.
3. Use a new common object as the context to execute the method object.
A statement like "new func ()" can be described as "Creating a new object from func ". In short, the only special feature of the prototype attribute is that it is time to create a new object.

So we can use this. For example, there are two method objects A and B. Since the new object created from A contains all. attribute of prototype, then I will assign it to B. prototype, so the new object created from B does not have the same attribute? The Code is as follows:
Copy codeThe Code is as follows:
A. prototype. hello = function () {alert ('Hello! ');}
B. prototype = new ();
New B (). hello ();

This is the so-called "inheritance" of JavaScript. Its essence is the copy of attributes. prototype is used here. If prototype is not used, a loop is used, and the effect is the same. The so-called "Multi-inheritance" is naturally copied everywhere.

The object-oriented principle in JavaScript is the above. I didn't mention the concept of "class" from beginning to end, because JavaScript didn't have "class. Can there be no class for object orientation? Of course. It is unreasonable to have a class first and then an object again, because the class is originally summarized from the object, and the object has another class first. This is reasonable. As shown below:
Copy codeThe Code is as follows:
Var o ={}; // I found something.
O. eat = function () {return "I am eating."} // I found it will eat;
O. sleep = function () {return "ZZZzzz..."} // I found it sleeping;
O. talk = function () {return "Hi! "} // I found it talking;
O. think = function () {return "Hmmm..."} // I still think about it.

Var Human = new Function (); // I decided to name it "person ".
Human. prototype = o; // This item represents the concept of all "people.

Var h = new Human (); // when I find something the same as it,
Alert (h. talk () // I will know that it is also a "person!

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.