Understanding the definition of classes in Javascript

You can find a lot on the Internet about how to define classes in JavaScript.Article. Before starting, let's take a look at the two types of definition classes.Basic MethodRight:

(1) construct types using functions.

 
Function Foo (text, URL) {This. TEXT = text; this. url = URL; this. render = function () {document. write ('<a href = "' + this. URL + '">' + this. text + '</a> ');}}
 

(2) prototype.

 
Function bar (text, URL) {This. TEXT = text; this. url = URL;} bar. prototype = {render: function () {document. write ('<a href = "' + this. URL + '">' + this. text + '</a> ');}}
 

CodeIt's not complicated. I believe most people will know how to use it after reading it. However, when I first saw the definition of this type, I felt very strange. For a long time, I knew it, but I did not know why. If you are as confused as you are, You may share some of my experiences.

First, let's see how to use the defined type,

 
VaR A = new Foo ('link A', 'HTTP: // www.cnblogs.com '); var B = new bar ('link B', 'HTTP: // www.csdn.net '); a. render (); B. render ();
 

Similar to the use of many object-oriented languages (such as C #), classes are instantiated using the new keyword. When you use instanceof to test whether they are of the corresponding type, you can get the expected answer. The Foo and bar types defined in the two methods are usually used differently.

However, they are completely different in principle. method 1 is a member who dynamically creates a class in the constructor, this means that the render method of each Foo instance is actually two completely independent functions. method 2, the prototype is used to bind the shared members of the class to the instance of the class. Therefore, the render method of each bar instance points to the same method, which is static. See the following code:

 
Document. write (object. prototype = string. prototype); var c = new Foo ('link C', 'HTTP: // www.asp.net '); document. write (C. render =. render); // falsevar d = new bar ('link d', 'HTTP: // www.klesh.cn); document. write (D. render = B. render); // true
 

Foo is an independent entity after instantiation. Its changes do not affect the original type definition or other instances. Bar is different, all its instances are still affected by prototype. modifications or extensions of prototype can affect all instances that have been instantiated. Let's look back at Foo, because its members, especially member functions, are dynamically created,With the closure, you can simulate the "Private member" in the object orientation ",This will take a long time to share with you later.

The two methods have their own characteristics. However, strictly speaking, in any way, it can only be said to be "simulating custom types", because in object-based JavaScript, in fact, it does not have the concept of a native "custom type" (this is also very long, so I will not elaborate on it for the moment ).

In the end, we recommend that you use method 2 to simulate custom classes in Javascript. As a result, the speed will be faster, and you can also modify the type through prototype, Unless you need to access "Private Members" (it seems that some people are also called "closures")... Unless you need closures to simulate "private members ".

The strikethrough and italics are modified according to the comments of Comrade Mu yehu.