Understand the JavaScript class by shallow to deeply

xiaoxiao2021-03-06  146

What is the class? Many friends who have just contacted programming may not understand classes. In fact, the class is an simulation of our real world, which will be more easily understood by "category" or "type". For example, "people" is a class, and the specific one is an example of "people", "people" can have many instances (the earth is more than 60 billion), but "people" this class is only One. Do you have to say that men and women are not people? How can I only have one? In fact, it is necessary to talk about a inherited thing, and it will be said, please continue to look. How to build a class? In C , a class is declared in Class, and JavaScript is different from C . It uses the same function as the function. This makes many friends who learn JScript to mix classes with functions, functions in jscript and classes There is a bit mixed, but I will naturally understand it. This article is written for friends who want to attack objects, and I don't plan to discuss it too deep. Look at the definition of this class: function wuyouuser () {this.name; // The code on the top of the name} defines a wuyouuser class, which has an attribute: Name. Name is an attribute of the Wuyouuser class. A class has a fixed attribute, but the instance of the class has a different attribute value, just like I belong to "people", gender is male, and I have a female classmate, she also belongs to "people", but Her gender attribute value is female. So how do you declare an instance of a class? Very simple: var wo = new wuyouuser (); // instance one: "I" var biyuan = new wuyouuser (); // instance two: "Biyuan" (biyuan brother, sorry ...

嘿嘿) >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>> This wo (me) is an example of the wuyouuser class, which has everything that wuyouuse is given: Name property, SEX property, and AGE properties, We can set its properties like this: wo.name = "Weeping red pavilion"; very simple? Try to run Window.Document.write (wo.name); look, is it to output my name: Cry? Also set the property biyuan.name = "Biyuan"; Biyuan.Document.write (Biyuan.Name); You can see that "Biyuan" is displayed, and it means that Biyuan and Wo are also Wuyouuser class. The example, but it is a different entity with different attribute values. Attributes can set the default value, and if you have a record you have sent each other, we also add a postage of the wuyouuser class with a quantity of the property article (this.Name; this.ArticleCount = 0 A worry-free new user just registered after his posting number is 0, and you can see the value of the attribute articles directly to 0 in the code. You can run this code: var wo = new wuyouuser (); window.document.write (wo.articlecount); you can see output 0, indicating that ArticleCount property is successfully set by our success: 0 >>>>>>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>> Method method This word is not understanding, I think it is more likely to understand. A person has many common behaviors, such as sleeping, eating, walking, etc. Now we add a post to the Wuyouuser class.

Function wuyouuser () {this.name; this.ArticleCount = 0; this.newarticle = function () {/ * * * How to post us, don't know, don't play, add pictures and then save it. Button? * Regarding how the code is posted, there is no need to write here. We need to understand the definition and use of the method * We have the simplest function here, it is also very important: give us the number of posts 1! * Note: The dinosaur level is added this, so it ... Everyone is blending. . . * / This.ArticleCount ;}} Since we define this method, let's try the effect: var wo = new wuyouuser (); wo.newarticle (); document.write (wo.articlecount); you can see the output 1, explain that we have successful! It is really a moment of history commemorating, and it is close to the dinosaur level. >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Static attribute static properties, also known as public properties, it does not belong to an instance of a class, but directly belongs to a class.

For example, a worry-free user has a property: the number of registered users, it is a whole worry-free user, not a statement of static attributes belonging to the swing of red pavilion or who is: Class name .prototype. Property name = attribute value; For example, to define a registered user's number of registered users in Cate: wuyouuser.Prototype.count = 0; how do you read it? There are two ways: 1. Use Wuyouuser.Prototype.count 2. Use wo.count, it is nothing to get 0, although the reading method can have two, but when changing it, it is very careful. , See the following code var biyuan = new wuyouuser (); wuyouuser.prototype.count ; document.write (wo.count); Document.write (biyuan.count); you will find that the count attributes of both are 1, also That is to say that Wuyouuser.Prototype.count changes will affect the corresponding properties of each instance, the fact is WO, Biyuan's count attribute and wuyouuser.Prototype.count is the same! Now come and see another code: var biyuan = new wuyouuser (); biyuan.count ; // Special pay attention to here, this is directly changing biyuan count attribute document.write (biyuan.count); // Output 1 document.write (Wuyouuser.prototype.count); // Output 0 Document.write (wo.count); // Also output 0, why? You can see that if you directly modify the static property value of the instance, then other instances or even the static properties of the collar are not synchronized with it? This is because the instance will generate a property count belonging to the instance. This time biyuan.count is no longer the same as Wuyouuser.Prototype.count, nor is it the same with wo.count, this count Attributes belong to Biyuan yourself, and later change it just affects itself. So if it is not a special need, it is recommended whether it is uniform in such a way that Wuyouuser.Prototype.count is uniform, it is uniform! >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>> Static method is similar to static properties, and it also has a separate method, which is also the class itself.

The definition of static methods is: Class name. Method name = function (parameter 1, parameter 2 ... parameter n) {// method code} We now define a registration of a worry-free user-class registration new user static method: wuyouuser .prototype.addone = function () {// *** The same concrete code does not write, add 1 for static attribute count, indicating that the number of registered users is more than a wuyouuser.prototype.count ;} Now let's take a look at how to use it There are also two ways: 1. Use Wuyouuser.Prototype.addone () 2. ADDOONE () using an instance, there is no difference: Var wo = new wuyouuser (); var biyuan = new wuyouuser () Document.write (wuyouuser.prototype.count); // 0 wo.addone (); document.write (wuyouuser.prototype.count); // 1 document.write (wo.count); // 1 document.write (Biyuan.count); // 1 wuyouuser.Prototype.Addone (); document.write (wuyouuser.prototype.count); // 2 document.write (wo.count); // 2 document.write (biyuan.count ); // 2 can be seen whether using wo.addone () or wuyouuser.prototype.addone () is the same, it is given to wuyouuser.prototype.count plus 1 Now see a code: function newclass ) // Due to the code of the Wuyouuser class, I declare a new class newclass {this.name = "Weeping Red Pavilion"; / / Here the default value is my name} newclass.prototype.changename = function (newname) {this.name = newname;} var wo = new newclass (); wo.changename ("Zheng Yutao); // My real name can Seeing wo.name has indeed become "Zheng Yun Tao", this method seems to be available, but is there a heaven in the inside? Look at the code, the definition of the class and the definition of ChangeName, but change the code below: Newclass.Prototype.changename ("Zheng Yutao); Document.write (newclass.name); // undefined, ie undefined Document.write (newclass.prototype.name); // Zheng Yao Var wo = new newclass (); document.write (wo.name); // Weeping red pavilion can see us did not define newclass.prototype.name This static Attributes,

But the compiler gives us an additional one. But look at the output of wo.name below, it is not "Zheng Yun Tao", but the original default "weeping red pavilion", what did you explain? In fact, it is very simple. Look at the Name attribute in Newclass's definition, so WO also has its own name attribute, it is not the same with newclass.prototype.name, so it is still like that.

Then why did the previous example have run Wo.changeName ("Zheng Yun Tao" but can achieve change the wo.name property? In fact, it is the same truth here, and the compiler automatically adds a method ChangeName to WO. This method code is the same as NewClass.Prototype.ChangeName, but wo.changename is unique to this instance, and Non Newclass.Prototype.ChangeName! Analysis can be known that try not to use this keyword such as this to reference the properties of the instance itself, unless you have a special purpose, and you can clearly understand the operating mechanism inside! If you really need to use this in the static method, you can directly pass this as a parameter: newclass.changename = function (this, newname) // Note Here is this, not this {this.name = newname;} >> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>> Structure function A class is actually a function of a function, this function is the constructor, let's take a look at the following code: function wuyouuser () {this. Name = "Weeping Red Pavilion"; // The default is defined as a swiftstone Alert (this.name);} var wo = new wuyouuser (); // You can see a window showing the three words of the red pavilion can be seen The definition of the class is not only to define its attributes and methods, but also add some code, which is the code of the constructor of the class, is executed during the instance declaration! In fact, the attributes and classes of the class are defined in the constructor, see the code below: function wuyouuser () {this.name = "Weeping red pavilion"; return; this.sex = "male" Var wo = new wuyouuser (); docuument.write (wo.name); // Weeping red pavilion document.write (wo.sex); // undefined, what is not defined? The SEX property is after return; and the constructor of the Wuyouuser class encounters return to stop running, in other words, this.sex = "male"; this line is not executed, ie the SEX property is not defined! The constructor can have parameters, the parameter value is incorporated when the declaration instance: function wuyouuse (name) {this.name = name;} var wo = new wuyouuser ("Weeping Red Pavilion"

); Document.write (wo.name); // Weeping red pavilion constructor does not need to return value, but if you set the return value, you can use it as a function to use. Function SUM (a, b) {this.a = a; this.b = b; return this.a this.b;} Document.write (SUM (12, 23)); // Output 12 and 23 And 35 var obj = new sum (12, 23); Document.write (obj.a) // 12 document.write (obj.b) // 23 feels very wonderful, right? I wrote this article and I feel very wonderful, huh, huh! But it is highly recommended not to use a class as a function! If you need a function, write it directly into a function instead of writing, so as not to get confused. >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>> Sold inherit the word in the object-oriented programming, although JavaScript is not the language of the object, but is object based on VB Language, it also provides inheritance mechanism. When the article starts, it is said that both men and women are equally different, but they have the same properties and methods, and these the same features are from "people". Sentence men and women inheritance All features of "people"! But men have their own different places. The success of the programming language is the same. A class A inherits another class B, then class B is the parent class of class A, class A is the derived class of class B, also known as For subclasses. For example, a man is a person's derived class, and people are the parent class of men. The highest level is known as the base class. If you imagine it, the man inherits the self, the boy inherits from the man, people are the boy's base class, the man is the boy's parent class. >>>>>>>>>>>>>>>>>>>>>> Do not provide multiple inheritances, accurately say no simple and standard approach to achieve multiple inheritance (in fact, there is a way to achieve, but it is not necessary to have a little more, and it doesn't have necessary). In C , there is a concept of multiple inheritance. Here is to discuss JavaScript, so it is not intended to talk, just talk about it for a little idea for reference. In the inheritance of the boys on the upper, the boy is not only inherited from the man, but also inherited from the child (with a boys, there are girls), so it also inherited two classes: men and boys, this is the so-called Multiple inheritance.

Ok, this problem is hit, we still return the theme. >>>>>>>>>>>>>>>>>>>> Fire first class definition: function a () {this.name = "Weeping Red Pavilion"; Alert (this.name) This class defines a property name. The default value is "Weeping Red Pavilion" now looks at the second class definition: function b () {this.sex = "male"; alert (this.sex);} Defined A property SEX, the default value is "male" inheritance method is the subclass .prototype = new parent class (); now let us inherit C Class: B.Prototype = new a (); Run this code: var Obj = new b (); // First open the warning window to display "Wry Red Pavilion", then display "Male" can see the results from the top of the Class C class, with the attribute Name of Class A, and executed The constructor of the A class, and the constructor of the C class is executed before the construction function of the Class B. So we use this method that can rewrite the parent class and the default value of the reproduction of the parent class: function a () {this.name = "Weihong Pavilion"; this.show = function () {Alert ("this Is a class A SHOW method ");} alert (this.name);} function b () {this.name =" Zheng Yun Tao "; this.show = function () {Alert (" This is a SHOW method for class B " );} Alert (this.name);} var obj = new b (); obj.show (); results show three warning windows, the first content is a swing, is the constructor of the A class. Alert (this.name), then the Name property value is also "weeping red pavilion", because the Class B constructor has not been executed, the second content is "Zheng Yun Tao", this is the Alert in the B class (this.name Because the Class B is re-assigned to NAME "Zheng Yao". Finally, Obj.Show () is called, which is not the show method of the Class A (Show method "that is a class A"), but is executing the SHOW of Class B (Show "this is Class B "Show method"), it is obvious that the Show method has been rewritten.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> So long questions) Miscal eyes, but I don't think that this article is not complete, because the purpose of the article is to make people understand all aspects of the class. I saw the topic of this section, maybe you will feel weird, the class is class, how can I "as an object"? In JavaScript, everything is an object, including classes! Objects can have attributes, there can be methods, classes can also be, but this is very easy to confuse the static properties with the front side, so you have to look at the differences in the two! Define a class: function wuyouuser () {this.name = "Weeping red pavilion";} Define the attribute when a class is an object: wuyouuser.URL = "http://www.51js.com

"; // The definition of static properties is: wuyouuser.prototype.URL ="

http://www.51js.com

"; Var wo = new wuyouuser (); document.write (wuyouuser.URL); //

http://www.51js.com

Document.write (wo.url); // undefined, undefined! Note that the undefined from here can be seen here that this attribute is Wuyouuser from all, changed it with other classes and its subclasses completely unrelated! The attribute of the reference class is only one way, that is, the class name. Attribute name, change it. Define the method when a class is an object: wuyouuser.changeurl = function () {this.ur = "

http://51js.com

"} You may feel strange, what is this this here? Because the method of Changeurl belongs to the object Wuyouuser, this means that the wuyouuser itself! You can run the code below: Document.write (wuyouuser.URL); //

http://www.51js.com

Wuyouuser.changeurl (); document.write (wuyouuser.URL); //

http://51js.com

Obvious Changeurl has changed the value of Wuyouuser.url, so it can output it.

http://51js.com

转载请注明原文地址:https://www.9cbs.com/read-127376.html

New Post(0)