As a result, after watching for a long time, I got a rough understanding and savored it carefully, and it seemed that I didn't understand anything...
This article was written in reference to Chapters 7, 8, 9 of <<javascript-the definitive guide, 5th edition>>, and I also
I will try to explain the object-oriented technology of javascript (object/array->function->class/constructor/prototype) according to the structure of the original book. For some things that I can't grasp, I will attach the original English statements for your reference.
If no explanation is made, all English statements (except for program body) appearing in the text are quoted from <<javascript-the definitive guide,5th edition>>.
-------------------------------------------------
Objects and Arrays
What is an object? Put some combinations of "name-attributes" in a unit and form an object. We can understand it as javascript
An object is a collection of named values. These named values are usually referred
to as properties of the object.--Section3.5).
"Name" can only be a string type, not other types, while the type of attribute is
Arbitrary (number/string/other objects...). You can use new Object() to create an empty object, or you can simply use "{}" to create an
The functions of the two are equivalent to empty objects.
Copy the codeThe code is as follows:
var emptyObject1 = {}; //Create empty object
var emptyObject2 = new Object(); //Create empty object
var person = {"name":"sdcyst",
"age":18,
"sex":"male"}; //Create an object person with the initial value
alert(); //sdcyst
alert(person["age"]); //18
From the above example, we can also see that when accessing an object's properties, you can simply add "." and add the name of the property after the object name, or use the "[]" operator to obtain it. At this time, the attribute name in [] needs to be quoted, because the indexes in the object are of string type. The number of attributes in the javasript object is variable, and after creating an object, you can assign any attribute to it at any time.
Copy the codeThe code is as follows:
var person = {};
= "sdcyst";
person["age"] = 18;
alert( + "__" + ); //sdcyst__18
var _person = {name:"balala","age":23}; //When building an object, the name of the attribute can be marked without quotation marks (name).
//But it is still a string type. Quotations are still needed in [] when accessing
alert(_person["name"] + "__" + ); //balala__23
alert(_person[name]); //undefinied
var person = {};
= "sdcyst";
person["age"] = 18;
alert( + "__" + ); //sdcyst__18
var _person = {name:"balala","age":23}; //When building an object, the name of the attribute can be marked without quotation marks (name).
//But it is still a string type. Quotations are still needed in [] when accessing
alert(_person["name"] + "__" + ); //balala__23
alert(_person[name]); //undefinied
The "." operator is to obtain the attributes of an object. Generally speaking, the "[]" operator is more powerful in obtaining the attributes of an object.
You can put some expressions in [] to get the value of the attribute.
For example, it can be used in loop control statements, while the "." operator does not have this flexibility.
Copy the codeThe code is as follows:
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) { //The attribute name in the loop name object
namestring += name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
namestring = "";
for(var i=0; i<4; i++) {
namestring += name["name"+(i+1)];
}
alert(namestring); //NAME1NAME2NAME3NAME4
The delete operator can delete a property in the object and determine whether a property exists. You can use the "in" operator.
Copy the codeThe code is as follows:
var name = {"name1":"NAME1","name2":"NAME2","name3":"NAME3","name4":"NAME4"};
var namestring = "";
for(var props in name) { //The attribute name in the loop name object
namestring += name[props];
}
alert(namestring); //NAME1NAME2NAME3NAME4
delete name.name1; //Delete name1 attribute
delete name["name3"]; //Delete name3 attribute
namestring = "";
for(var props in name) { //The attribute name in the loop name object
namestring += name[props];
}
alert(namestring); //NAME2NAME4
alert("name1" in name); //false
alert("name4" in name); //true
It should be noted that the properties in the object have no order.
The constructor property of the object
Each javascript object has a constructor attribute. This attribute corresponds to the constructor when object initialization (function is also an object).
Copy the codeThe code is as follows:
var date = new Date();
alert(); //Date
alert( == "Date"); //false
alert( == Date); //true
Array
We have mentioned that objects are a collection of unordered data, while arrays are a collection of ordered data, and the data (elements) in the array are accessed through an index (starting from 0).
The data in an array can be of any data type. The array itself is still an object, but due to many characteristics of an array, it is usually differentiated between an array and an object.
Throughout this book, objects and arrays are often treated as distinct datatypes.
This is a useful and reasonable simplification; you can treat objects and arrays as separate types
for most of your JavaScript fully understand the behavior of objects and arrays,
however, you have to know the truth: an array is nothing more than an object with a thin layer of extra
functionality. You can see this with the typeof operator: applied to an array value, it returns
the string "object". --section7.5).
To create an array, you can use the "[]" operator, or use the Array() constructor to new one.
Js code
Copy the codeThe code is as follows:
var array1 = []; //Create empty array
var array2 = new Array(); //Create an empty array
array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //
alert(array1[2][1]); //4 Access array elements in array
alert(array1[3].name1); //NAME1 Access objects in the array
alert(array1[8]); //undefined
array2 = [,,]; //Fill in only commas without a numeric value, then the element at the corresponding index is undefined
alert(); //3
alert(array2[1]); //undefined
var array1 = []; //Create empty array
var array2 = new Array(); //Create an empty array
array1 = [1,"s",[3,4],{"name1":"NAME1"}]; //
alert(array1[2][1]); //4 Access array elements in array
alert(array1[3].name1); //NAME1 Access objects in the array
alert(array1[8]); //undefined
array2 = [,,]; //Fill in only commas without a numeric value, then the element at the corresponding index is undefined
alert(); //3
alert(array2[1]); //undefined
When creating an array with new Array(), you can specify a default size, and the value is undefined at this time, and you can assign a value to them later. However, since
The length of the array in javascript can be changed arbitrarily, and the content in the array can be changed arbitrarily, so the initialization length is actually
There is no binding force on an array. For an array, if you assign a value to an index that exceeds its maximum length, the length of the array will be changed, and there will be no assignment.
The value is assigned undefined at the index, see the following example.
Js code
Copy the codeThe code is as follows:
var array = new Array(10);
alert(); //10
alert(array[4]); //undefined
array[100] = "100th"; //This operation will change the length of the array, and set the value corresponding to the 10-99 index to undefined
alert(); //101
alert(array[87]); //undefined
var array = new Array(10);
alert(); //10
alert(array[4]); //undefined
array[100] = "100th"; //This operation will change the length of the array, and set the value corresponding to the 10-99 index to undefined
alert(); //101
alert(array[87]); //undefined
You can use the delete operator to delete elements of the array. Note that this deletion is just to set the element of the array at this position to undefined, and the length of the array has not changed.
We have used the length property of the array. The length property is a read/write property, which means we can change the length property of the array.
Change the length of the array arbitrarily. If length is set to a value smaller than the length of the array, the value of the index greater than length-1 in the original array will be deleted.
The value of the original array is greater than the length of the original array, then the value between them is set to undefined.
Js code
Copy the codeThe code is as follows:
var array = new Array("n1","n2","n3","n4","n5"); //Array of five elements
var astring = "";
for(var i=0; i<; i++) { //Loop array elements
astring += array[i];
}
alert(astring); //n1n2n3n4n5
delete array[3]; //Delete the value of the array element
alert( + "_" + array[3]) //5_undefined
= 3; //Reduce the length of the array
alert(array[3]); //undefined
= 8; //Extend the length of the array
alert(array[4]); //undefined
var array = new Array("n1","n2","n3","n4","n5"); //Array of five elements
var astring = "";
for(var i=0; i<; i++) { //Loop array elements
astring += array[i];
}
alert(astring); //n1n2n3n4n5
delete array[3]; //Delete the value of the array element
alert( + "_" + array[3]) //5_undefined
= 3; //Reduce the length of the array
alert(array[3]); //undefined
= 8; //Extend the length of the array
alert(array[4]); //undefined
For other methods of arrays such as join/reverse, etc., I will not give examples one by one here.
Through the above explanation, we already know that the attribute value of an object is obtained by the name of the attribute (string type), while the elements of the array are obtained by searching
Reference (integer type 0~~2**32-1) to get the value. The array itself is also an object, so the operation of object properties is also completely suitable for arrays.
Js code
Copy the codeThe code is as follows:
var array = new Array("no1","no2");
array["po"] = "props1";
alert(); //2
//For arrays, array[0] has the same effect as array["0"] (? Not sure, this is the case during testing)
alert(array[0] + "_" + array["1"] + "_" + );//no1_no2_props1
function
I believe everyone has written a lot of javascript functions, so we will just briefly introduce them here.
Create a function:
Copy the codeThe code is as follows:
function f(x) {........}
var f = function(x) {......}
Both of the above forms can create functions named f(), but the latter form can create anonymous functions
When defining a function, parameters can be set. If the number of parameters passed to the function is not enough, it corresponds in sequence from the leftmost point, and the rest are assigned with undefined. If passed to the function
More parameters than the number of parameters defined by the function, the additional parameters are ignored.
Js code
Copy the codeThe code is as follows:
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
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 well-defined functions, we cannot expect the caller to pass all parameters in. For those parameters that must be used, it should be in the function body.
Detect (using the ! operator), or set the default value and perform the same operation as the parameter or (||) to obtain the parameters.
Js code
Copy the codeThe code is as follows:
function myprint(s1,person) {
var defaultperson = { //Defaultperson object
"name":"name1",
"age":18,
"sex":"female"
};
if(!s1) { //s1 is not allowed to be empty
alert("s1 must be input!");
return false;
}
person = person || defaultperson; //Accept person object parameters
alert(s1+"_"++":"++":"+);
};
myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}); //s1_sdcyst:23:male
function myprint(s1,person) {
var defaultperson = { //Defaultperson object
"name":"name1",
"age":18,
"sex":"female"
};
if(!s1) { //s1 is not allowed to be empty
alert("s1 must be input!");
return false;
}
person = person || defaultperson; //Accept person object parameters
alert(s1+"_"++":"++":"+);
};
myprint(); //s1 must be input!
myprint("s1"); //s1_name1:18:female
myprint("s1",{"name":"sdcyst","age":23,"sex":"male"}); //s1_sdcyst:23:male
The arguments attribute of the function
Inside each function body, there is an argument identifier, which represents an Arguments object. The Arguments object is very similar
For Array (array) objects, for example, they have a length attribute. Use the "[]" operator to access its value to access parameter values using the index. However, the two are completely different.
Things only have common points on the surface (for example, modifying the length property of the Arguments object will not change its length).
Js code
Copy the codeThe code is as follows:
function myargs() {
alert();
alert(arguments[0]);
}
myargs(); //0 --- undefined
myargs("1",[1,2]); //2 --- 1
function myargs() {
alert();
alert(arguments[0]);
}
myargs(); //0 --- undefined
myargs("1",[1,2]); //2 --- 1 The Arguments object has a callee attribute, indicating the method where the current Arguments object is located. It can be used to implement internal recursive calls of anonymous functions.
Js code
Copy the codeThe code is as follows:
function(x) {
if (x <= 1) return 1;
return x * (x-1);
} (section8.2)
function(x) {
if (x <= 1) return 1;
return x * (x-1);
} (section8.2)
Method--Method
The method is a function. We know that each object contains 0 or more attributes, and the attributes can be of any type, and of course, they also include objects. The function itself is a kind of
Object, so we can completely put a function into an object. At this time, this function becomes a method of the object. If we want to use this method,
This can be implemented by using the "." operator by using the object name.
Js code
Copy the codeThe code is as follows:
var obj = {f0:function(){alert("f0");}}; //The object contains a method
function f1() {alert("f1");}
obj.f1 = f1; //Add method to the object
obj.f0(); //f0 f0 is obj's method
obj.f1(); //f1 f1 is obj's method
f1(); //f1 f1 is also a function that can be called directly
f0(); //f0 is just an obj method and can only be called through objects
var obj = {f0:function(){alert("f0");}}; //The object contains a method
function f1() {alert("f1");}
obj.f1 = f1; //Add method to the object
obj.f0(); //f0 f0 is obj's method
obj.f1(); //f1 f1 is obj's method
f1(); //f1 f1 is also a function that can be called directly
f0(); //f0 is just an obj method and can only be called through objects
The call to a method requires the support of the object, so how do you get the properties of the object in the method? We are already familiar with the keyword this!this, in the JavaScript
In the method, we can use this to obtain a reference to the method caller (object) and thus obtain various attributes of the method caller.
Js code
Copy the codeThe code is as follows:
var obj = {"name":"NAME","sex":"female"};
= function() { //Add method to the object
alert( + "_" + this["sex"]);
};
(); //NAME_female
= "male";
(); //NAME_male
var obj = {"name":"NAME","sex":"female"};
= function() { //Add method to the object
alert( + "_" + this["sex"]);
};
(); //NAME_female
= "male";
(); //NAME_male
Let's take a more object-oriented example below.
Js code
Copy the codeThe code is as follows:
var person = {name:"defaultname",
setName:function(s){
= s;
},
"printName":function(){
alert();
}}
(); //defaultname
("newName");
(); //newName
var person = {name:"defaultname",
setName:function(s){
= s;
},
"printName":function(){
alert();
}}
(); //defaultname
("newName");
(); //newName
In the above example, you can use =.. to directly change the name attribute of person. Here we are just to show what we mentioned just now.
Another way to change the person attribute is: define a function and receive two parameters, one is person and the other is the value of name, which looks like this:
changeName(person,"newName"). Which method is better? Obviously, the method in the example is more vivid and intuitive, and it seems to have a little aspect
The shadow of the object.
Again, the method itself is a function, but the use of the method is more restrictive. In the following article, if the function is mentioned, then
The mentioned content is also applicable to the method, otherwise it is not the case.
Prototype property of a function
Each function contains a prototype attribute, which forms the core basis of object-oriented JavaScript. We will discuss it in detail later.