In depth understanding of object orientation in JavaScript

  • 2020-03-29 23:48:30
  • OfStack

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

In JavaScript, objects fall into two categories. One can be called a "normal object", which is what we generally understand: Numbers, dates, user-defined objects (such as: {}), and so on.

There is also a "method object," which we commonly define as a function. You may wonder: the method is the method, how to become an object? But in JavaScript, methods are indeed treated as objects. Here's a simple example:


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

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

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

We can set properties for func arbitrarily, which further proves that func is an object. So what's the difference between a method object and a normal object? First of all, the method object is of course executable, followed by a pair of parentheses to execute the method object.

func();

So, method objects have duality. On the one hand, it can be executed, on the other hand, it can be used as a normal object. What does that mean? This means that method objects can exist completely independently of other objects. We can compare this with Java. In Java, methods must be defined in a class, not in isolation. You don't need that in JavaScript.

Method objects are independent of other methods, which means they can be referenced and passed arbitrarily. Here's an example:


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

Pass one method object, func, to another, invoke, and let the latter execute func when appropriate. This is called a "callback." In addition, the specificity of the method object also makes this keyword difficult to grasp. There are many relevant articles in this field, which are not detailed here.

In addition to being able to execute, method objects have a special function that allows them to create normal objects using the new keyword.

When a method object is created, it automatically has a property called prototype. There is nothing special about this property. It is accessible and assigned just like any other property. But when we create an object with the new keyword, prototype works: all the properties contained in its value (which is also an object) are copied to the newly created object. Here's an example:


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

Two dialogs pop up during execution, with the latter indicating that the new object f has copied the name property from func.prototype. The previous dialog indicates that func has been executed as a method. You may ask, why do you want to execute func at this time? In fact, this time to execute func, is the "constructor" function. For the sake of illustration, let's do it again:

function func() {
    this.name= " name has been changed. " 
}
func.prototype.name= " prototype of func " ;
var f = new func();
alert(f.name);

You will see that instead of "prototype of func", the name property of f is replaced by "name has been changed". This is what the object method func does as a constructor. So, in JavaScript, creating an object with the new keyword follows three steps:

1. Create a new normal object;
2. Copy all the properties of the prototype property of the method object into the new normal object.
3. Execute the method object with the new normal object as the context.
A statement like "new func()" can be described as "create a new object from func." Anyway, the only special thing about the prototype property is when you create a new object.

So we can take advantage of that. For example, if there are two method objects A and B, since the new object created from A contains all the attributes of a.prototype, then I assign it to b.prototype, doesn't the new object created from B have the same attributes? This is what the code looks like:


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

This is JavaScript inheritance, which is essentially a copy of a property, using prototype. If you don't use prototype, use the loop, and the effect is the same. The so-called "multiple inheritance" is naturally copied everywhere.

So that's the whole idea of object orientation in JavaScript. I never mentioned the concept of "classes" because JavaScript doesn't have such a thing. Can object orientation have no classes? B: sure. It doesn't make sense to have a class first and then an object, because classes are supposed to be generalized from objects, so it makes sense to have an object and then a class first. Like the following:


var o = {}; //I found something.
o.eat = function(){return "I am eating."}  //I find it can eat;
o.sleep = function(){return "ZZZzzz..."}  //I find it can sleep;
o.talk = function(){return "Hi!"} //I found it could talk;
o.think = function(){return "Hmmm..."} //I found it could think.
var Human = new Function(); //I decided to call it man.
Human.prototype = o; //This thing represents the concept of all people.
var h = new Human(); //When I found other things like it,
alert(h.talk()) //I knew it was a person!


Related articles: