Basic of javascript object-oriented technology (III)

I have read many introductionsJavascriptThe article on object-oriented technology is dizzy. Why? It's not because it's not well written, but because it's too esoteric. The objects in javascript haven't clearly explained what's going on. As soon as they come up, they go straight to the topic, class/Inheritance/prototype/private variable. As a result, after reading it for a long time, I had a rough understanding and had a good aftertaste. It seems that I did not understand anything.

This article is written in chapter 7, 8 and 9 of <javascript-the definitive guide, 5th edition>, I will try to describe the javascript object-oriented technology (Object/array-> function --> class/constructor/prototype) according to the structure of the original book ). I will attach the original English statement for your reference.

If no description is provided, all the English statements (except the program body) in the text are derived from <javascript-the definitive guide, 5th edition>.

Function
Javascript functions have been written a lot, so here is a brief introduction.

Create a function:

Function f (x ){........}

Var f = function (x ){......}

You can create a function named f () in the preceding two forms. However, you can create an anonymous function in the latter form. You can set parameters when defining a function. If the number of parameters passed to the function is insufficient, the parameters are matched from the leftmost, and the rest are assigned with undefined values. If the number of parameters passed to the function is greater than the number of function-defined parameters, the extra parameters are ignored.

Js Code

 
 

  
  
function myprint(s1,s2,s3) {  
  
  
alert(s1+"_"+s2+"_"+s3);  
  
  
}  
  
  
myprint(); //undefined_undefined_undefined  
  
  
myprint("string1","string2"); //string1_string2_undefined  
  
  
myprint("string1","string2","string3","string4"); //string1_string2_string3  
 
 

Therefore, for a defined function, we cannot expect the caller to pass all the parameters in. The required parameters should be checked in the function body (use! Operator), or set the default value, and then perform the OR (|) operation with the same parameter to obtain the parameter.

Js Code

 
 

  
  
Function myprint (s1, person ){
  
  
Var defaultperson = {// default person object
  
  
"Name": "name1 ",
  
  
"Age": 18,
  
  
"Sex": "female"
  
  
};
  
  
If (! S1) {// s1 cannot be blank
  
  
Alert ("s1 must be input! ");
  
  
Return false;
  
  
}
  
  
Person = person | defaultperson; // accepts the parameter of the person object.
  
  
Alert (s1 + "_" + person. name + ":" + person. age + ":" + person. sex );
  
  
};
  
  
Myprint (); // s1 must be input!
  
  
Myprint ("s1"); // s1_name1: 18: female
  
  
Myprint ("s1", {"name": "sdcyst", "age": 23, "sex": "male"}); // s1_sdcyst: 23: male
 
 

Arguments attribute of the Function

Each function body contains an arguments identifier, which represents an Arguments object. the Arguments object is very similar to an Array object. For example, all objects have the length attribute. to access its value, use the "[]" operator to access the parameter value through indexes. However, the two are completely different. They only have something in common on the surface (for example, modifying the length attribute of the Arguments object does not change its length ).

Js Code

 
 

  
  
function myargs() {  
  
  
alert(arguments.length);  
  
  
alert(arguments[0]);  
  
  
}  
  
  
myargs(); //0 --- undefined  
  
  
myargs("1",[1,2]); //2 --- 1  
 
 

The Arguments object has a callee attribute that identifies the method of the current Arguments object. You can use it to implement internal recursive calls to anonymous functions.

Js Code

 
 

  
  
function(x) {  
  
  
if (x <= 1) return 1;  
  
  
return x * arguments.callee(x-1);  
  
  
}  
 
 

Method -- Method

The method is a function. we know that each object contains 0 or more attributes. attributes can be of any type, including objects. A function itself is an object, so we can put a function into an object. At this time, this function becomes a method of the object. if you want to use this method later, you can use ". "operator to implement.

Js Code

 
 

  
  
Var obj = {f0: function () {alert ("f0") ;}}; // The object contains a method
  
  
Function f1 () {alert ("f1 ");}
  
  
Obj. f1 = f1; // Method for adding an object
  
  
Obj. f0 (); // f0 f0 is the obj method.
  
  
Obj. f1 (); // f1 f1 is the obj method.
  
  
F1 (); // f1 f1 is a function and can be called directly.
  
  
F0 (); // f0 is only the obj method and can only be called through objects.
 
 

Method calls require the support of objects. How can we obtain object attributes in methods? This! We are already familiar with this keyword. In javascript methods, we can use this to obtain reference to method callers (objects) and obtain various attributes of method callers.

Js Code 

 
 

  
  
Var obj = {"name": "NAME", "sex": "female "};
  
  
Obj. print = function () {// Add Method for Object
  
  
Alert (this. name + "_" + this ["sex"]);
  
  
};
  
  
Obj. print (); // NAME_female
  
  
Obj. sex = "male ";
  
  
Obj. print (); // NAME_male
 
 

Here is a more object-oriented example.

Js Code

 
 

  
  
var person = {name:"defaultname",  
  
  
setName:function(s){  
  
  
this.name = s;  
  
  
},  
  
  
"printName":function(){  
  
  
alert(this.name);  
  
  
}}  
  
  
person.printName(); //defaultname  
  
  
person.setName("newName");  
  
  
person.printName(); //newName  
 
 

In the above example, you can use person. name = .. to directly change the name attribute of person. Here we just want to show the content just mentioned. another way to change the person attribute is to define a function and receive two parameters, one is person and the other is name, which looks like this: changeName (person, "newName "). which method is better? Obviously, the methods in this example are more visual and intuitive, and seem to have an object-oriented shadow.

Once again, the Method itself is a function, but the use of the Method is more restricted. In the subsequent sections, If we mention the function
The content mentioned also applies to methods, but not all.

Prototype attribute of the Function

Each function contains a prototype attribute, which forms the core foundation of javascript object-oriented. We will discuss it in detail later.