Deep understanding of Oo basics in JavaScript

JavaScript is Object oriented. But quite a few people are not fully aware of this.

In JavaScript, objects are divided into two types. One can be called "ordinary objects", which is what we generally understand: numbers, dates, user-defined objects (such as: {}), and so on.

Another, called a "method object", is the function we normally define. You may find it strange: The method is the method, how to become the object? But in JavaScript, the method is really treated as an object. The following is a simple example:

Copy Code code as follows:

function func () {alert (' hello! ');}
Alert (func.tostring ());

In this example, Func is defined as a method, but it itself contains a toString method, which means that Func is treated as an object here. More precisely, Func is a "method object". Here is the continuation of the example:

Copy Code code as follows:

Func.name = "I am func.";
alert (func.name);

We can set the property arbitrarily for Func, which proves that Func is an object. So what is the difference between a method object and a normal object? The first method object is, of course, executable, followed by a pair of parentheses, which is the method object.

Copy Code code as follows:

Func ();

Therefore, the method object has dual nature. On the one hand it can be executed, on the other hand it can be used as a normal object entirely. What does that mean? This means that the method object can exist completely independent of other objects. We can compare this with Java. In Java, a method must be defined in a class and not exist separately. And it's not needed in JavaScript.

A method object is independent of other methods, meaning it can be arbitrarily referenced and passed. Here is an example:

Copy Code code as follows:

function Invoke (f) {
f ();
}
Invoke (func);

Passes a method object Func to another method object invoke, allowing the latter to execute Func at the appropriate time. This is called a "callback". In addition, this specificity of the method object makes the This keyword not easy to grasp. This aspect related article many, here does not repeat.

In addition to being able to be executed, the method object has a special function, that is, it can create a generic object from the New keyword.

When each method object is created, it will automatically have a property called prototype. This property is nothing special, it can be accessed as well as other properties and can be assigned a value. But when we use the New keyword to create an object, the prototype works: all of the attributes that its value (and also an object) contain will be copied to the newly created object. Here is an example:

Copy Code code as follows:

Func.prototype.name= "prototype of Func";
var f = new Func ();
alert (f.name);

A two dialog box pops up during execution, and the last dialog indicates that f this new object copies the name attribute from Func.prototype. The previous dialog box indicates that Func was executed as a method. You might ask, why do you have to func it at this time? In fact, this time to perform Func, is the role of "constructor". For the sake of the image, let's start over again:

Copy Code code 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 property of F is no longer "prototype of Func", but replaced by "name has been changed". This is the function of the "constructor" that func this object method. So, in JavaScript, creating objects with the New keyword performs the following three steps:

1. Create a new generic object;
2. Copy all properties of the prototype property of the method object to the new normal object.
3. Executes the method object with a new normal object as the context.
A statement such as "New Func ()" can be described as "create a new object from Func". In short, the only special thing about prototype this property is when you create a new object.

Then we can take advantage of that. For example, there are two method objects A and B, since the new object created from a contains all the A.prototype attributes, then I assign it to B.prototype, so does the new object created from B have the same attribute? This is how you write code:

Copy Code code as follows:

A.prototype.hello = function () {alert (' hello! ');}
B.prototype = new A ();
New B (). hello ();

This is the so-called "inheritance" of JavaScript, the essence of which is the copy of attributes, which use the prototype to achieve. If you do not need to prototype, then use the loop, the effect is the same. The so-called "multiple inheritance", nature is copied everywhere.

The object-oriented principle in JavaScript is the above. I haven't mentioned the concept of "class" all the while, because JavaScript doesn't have a "class" thing. Can object-oriented objects have no classes? Of course. First there are classes, then there are objects, this is inherently unreasonable, because the class is originally from the object summed up, there are objects and then class, this is reasonable. Like the following:

Copy Code code as follows:

var o = {}; I found a thing.
O.eat = function () {return "I am eating."} I found it would eat;
O.sleep = function () {return "zzzzzz ..."} I found it would sleep;
O.talk = function () {return "hi!"}//I find it speaks;
O.think = function () {return "hmmm"}//I find it still thinks.

var Human = new Function (); I decided to name it "man".
Human.prototype = O; This thing represents the concept of all "people".

var h = new Human (); When I found something else like it,
Alert (H.talk ())//I knew it was "human"!