In-depth understanding of object-oriented in JavaScript_Basic knowledge

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

In JavaScript, there are two types of objects. One can be called "ordinary objects", which are the ones we generally understand: numbers, dates, user-defined objects (such as: {}), etc.

There is another type called "method object", which is the function we usually define. You may feel strange: a method is just a method, why has it become an object? But in JavaScript, methods are indeed treated as objects. Here is a simple example:

Copy code The code is as follows:

function func() { alert('Hello!');}
alert(func.toString());

In this example, although func is defined as a method, it itself contains a toString method, indicating that func is treated as an object here. To be more precise, func is a "method object". The following is a continuation of the example:

Copy code The code is as follows:

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

We can set attributes for func arbitrarily, which further proves that func is an object. So what is the difference between method objects and ordinary objects? First of all, the method object is of course executable. Adding a pair of parentheses after it means executing the method object.

Copy code The code is as follows:

func();

So, method objects have duality. On the one hand it can be executed, on the other hand it can be used as an ordinary object. What does this mean? This means that method objects can exist completely independent of other objects. We can compare this with Java. In Java, methods must be defined in a class and cannot exist alone. This is not required in JavaScript.

The method object is independent of other methods, which means that it can be referenced and passed arbitrarily. Here is an example:

Copy code The 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 at the appropriate time. This is the so-called "callback". In addition, the particularity of method objects also makes it difficult to grasp the this keyword. There are many related articles in this area, so I won’t go into details here.

In addition to being executed, method objects also have a special function, that is, they can create ordinary objects through the new keyword.

When each method object is created, it will automatically have a property called prototype. There is nothing special about this property. It can be accessed and assigned like other properties. But when we use the new keyword to create an object, prototype comes into play: all properties contained in its value (also an object) will be copied to the newly created object. Here is an example:

Copy code The code is as follows:

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

Two dialog boxes will pop up during execution, the latter dialog box Indicates that the newly created object f copies the name attribute from func.prototype. The previous dialog box indicates that func was executed as a method. You may ask, why do we need to execute func again at this time? In fact, executing func at this time functions as a "constructor". For the sake of visual explanation, let’s do it again:

Copy the code The 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 no longer "prototype of func", but has been replaced by "name has been changed". This is the role of the "constructor" played by the func object method. Therefore, in JavaScript, creating an object using the new keyword performs the following three steps:

1. Create a new ordinary object;
2. Copy all the properties of the prototype property of the method object to the new ordinary object.
3. Use the new ordinary object as the context to execute the method object.
For a statement like "new func()", it can be described as "create a new object from func". In short, the only special thing about the prototype attribute is when creating a new object.

Then we can take advantage of this. For example, there are two method objects A and B. Since the new object created from A contains all the properties of A.prototype, then if I assign it to B.prototype, then doesn’t the new object created from B also have the same properties? The code is written like this:

Copy the code The code is as follows:

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

This is what JavaScript is called "Inherited" is essentially a copy of attributes, which is implemented here using prototype. If you don't use prototype, then use loop, the effect is the same. The so-called "multiple inheritance" naturally means copying everywhere.

The object-oriented principles in JavaScript are the above. I never mentioned the concept of "class" from beginning to end, because JavaScript does not have such a thing. Is it possible to be object-oriented without classes? sure. It is unreasonable to have classes first and then objects, because classes are originally derived from objects. It is only reasonable to have objects first and then classes. Like the following:

Copy the code The code is as follows:

var o = {}; / / I discovered something.
o.eat = function(){return "I am eating."} // I found that it can eat;
o.sleep = function(){return "ZZZzzz..."} // I found out It can sleep;
o.talk = function(){return "Hi!"} // I found that it can talk;
o.think = function(){return "Hmmm..."} // I discovered that it can also think.

var Human = new Function(); // I decided to name it "Human".
Human.prototype = o; // This thing represents all concepts of "human".

var h = new Human(); // When I find other things like it,
alert(h.talk()) // I know it is also a "human"!