As a result, read most of the day, with a general understanding, a thin aftertaste, as if nothing understand ...
This article is written in reference to <<javascript-the definitive guide,5th edition>> Chapter 7,8,9 and I
Try to explain JavaScript's object-oriented technology (object/Array-> function--> class/constructor/prototype) according to the structure of the original book. For some of my own, I will enclose the original English sentence for your reference.
If not stated, all English statements (except the program) appearing in the text are quoted from <<javascript-the definitive guide,5th edition>>.
-------------------------------------------------
Objects and Arrays (Objects and Arrays)
What is an object? Put some "name-attribute" combinations in one unit, which makes up an object. We can understand that in JavaScript
Object is a collection of key-value pairs (an object is a collection of named values. These named values are usually referred
To as properties of the object.--section3.5).
The name can only be a string type, not another type, and the type of the property is
Arbitrary (number/string/other object ...). You can use the new object () to create an empty object, or you can simply use "{}" to create a
Null object, the role of the two is equivalent.
Copy Code code as follows:
var emptyObject1 = {}; Create an empty object
var emptyObject2 = new Object (); Create an empty object
var person = {"Name": "Sdcyst",
"Age": 18,
"Sex": "Male"}; Create an object with an initial value of person
alert (person.name); Sdcyst
Alert (person["age"]); 18
From the example above we can also see that accessing an object's properties can be simply added with the object name "." The name of the attribute can also be obtained by using the "[]" operator, at which point the attribute name in [] should be quoted, because the index in the object is a string type. The number of attributes in the Javasript object is variable, and you can assign any properties to it at any time after an object has been created.
Copy Code code as follows:
var person = {};
Person.name = "Sdcyst";
Person["Age"] = 18;
Alert (person.name + "__" + person.age); Sdcyst__18
var _person = {name: "Balala", "Age": 23}; When building an object, the name of the property can be labeled without quotation marks (name),
However, it is still a string type. Quotes are still required during the visit []
Alert (_person["name"] + "__" + person.age); Balala__23
Alert (_person[name]); Undefinied
var person = {};
Person.name = "Sdcyst";
Person["Age"] = 18;
Alert (person.name + "__" + person.age); Sdcyst__18
var _person = {name: "Balala", "Age": 23}; When building an object, the name of the property can be labeled without quotation marks (name),
However, it is still a string type. Quotes are still required during the visit []
Alert (_person["name"] + "__" + person.age); Balala__23
Alert (_person[name]); Undefinied
By "." operator to get the properties of an object, you must know the name of the property. Generally, the "[]" operator gets more powerful features of object properties,
You can put some expressions in [] to take the value of the property,
For example, it can be used in circular control statements, and "." Operators do not have this flexibility.
Copy Code code as follows:
var name = {"Name1": "NAME1", "name2": "NAME2", "Name3": "NAME3", "Name4": "NAME4"};
var namestring = "";
for (var props in name) {//The name of the property 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 an object to determine whether a property exists and can use the "in" operator.
Copy Code code as follows:
var name = {"Name1": "NAME1", "name2": "NAME2", "Name3": "NAME3", "Name4": "NAME4"};
var namestring = "";
for (var props in name) {//The name of the property in the Loop name object
Namestring + = Name[props];
}
alert (namestring); Name1name2name3name4
Delete name.name1; Delete Name1 Property
Delete name["Name3"]; Delete Name3 Property
namestring = "";
for (var props in name) {//The name of the property in the Loop name object
Namestring + = Name[props];
}
alert (namestring); Name2name4
Alert ("Name1" in name); False
Alert ("Name4" in name); True
Note that the properties in the object are not sequential.
Constructor property of an object
Each JavaScript object has a constructor attribute. This property corresponds to the constructor for object initialization (the function is also an object).
Copy Code code as follows:
var date = new Date ();
alert (date.constructor); Date
Alert (date.constructor = "date"); False
Alert (date.constructor = date); True
Array
As we've already mentioned, objects are collections of unordered data, and arrays are collections of ordered data, and the data (elements) in the array are accessed by index (starting from 0).
The data in the array can be any data type. The array itself is still an object, but because of the many features of the array, it is often possible to distinguish between arrays and objects
Treat separately (throughout this book, objects and arrays are often treated as distinct.
This is a useful and reasonable simplification; You can treat objects and arrays as separate types
For most of your JavaScript programming. To fully understand the behavior of objects and arrays,
However, you have to know the Truth:an array are nothing more than an object with a thin layer of extra
Functionality. You can and the TypeOf operator:applied to a array value, it returns
The string "Object". --section7.5).
You can create an array by using the [] operator, or by using the array () constructor to make a new one.
JS Code
Copy Code code as follows:
var array1 = []; Create an empty array
var array2 = new Array (); Create an empty array
Array1 = [1, "s", [3,4],{"name1": "NAME1"}]; //
Alert (array1[2][1]); 4 accessing array elements in an array
alert (ARRAY1[3].NAME1); NAME1 access to an object in an array
Alert (array1[8]); Undefined
Array2 = [,,]; If there are no numeric values and only commas, the element at the corresponding index is undefined
alert (array2.length); 3
Alert (array2[1]); Undefined
var array1 = []; Create an empty array
var array2 = new Array (); Create an empty array
Array1 = [1, "s", [3,4],{"name1": "NAME1"}]; //
Alert (array1[2][1]); 4 accessing array elements in an array
alert (ARRAY1[3].NAME1); NAME1 access to an object in an array
Alert (array1[8]); Undefined
Array2 = [,,]; If there are no numeric values and only commas, the element at the corresponding index is undefined
alert (array2.length); 3
Alert (array2[1]); Undefined
When you create an array with the new array (), you can specify a default size in which the time is undefined and you can assign values to them later. But because
The length of an array in JavaScript can be arbitrarily changed, and the contents of the array can be arbitrarily changed, so the length of this initialization is actually
Arrays have no binding force. For an array, if you assign a value to an index that exceeds its maximum length, the array's length is changed, and the value is not assigned
Index at the undefined, look at the example below.
JS Code
Copy Code code as follows:
var array = new Array (10);
alert (array.length); 10
Alert (array[4]); Undefined
ARRAY[100] = "100th"; This operation changes the length of the array and sets the value of the 10-99 index to undefined
alert (array.length); 101
Alert (array[87]); Undefined
var array = new Array (10);
alert (array.length); 10
Alert (array[4]); Undefined
ARRAY[100] = "100th"; This operation changes the length of the array and sets the value of the 10-99 index to undefined
alert (array.length); 101
Alert (array[87]); Undefined
You can delete an element of an array with the delete operator, and note that the deletion simply sets the element of the array at that position to undefined, and the length of the array does not change.
We've used the length property of the array, and the length property is a read/write property, which means we can change the length property of the array to
Arbitrarily change the length of the array. If you set length to a value less than the length of the array, the value of the index greater than length-1 in the original array is deleted. If length
Value is greater than the length of the original array, the value between them is set to undefined.
JS Code
Copy Code code as follows:
var array = new Array ("N1", "N2", "N3", "N4", "N5"); An array of five elements
var astring = "";
for (var i=0; i<array.length; i++) {//loop array element
Astring + = Array[i];
}
alert (astring); N1n2n3n4n5
Delete Array[3]; Delete the value of an array element
Alert (Array.Length + "_" + array[3])//5_undefined
Array.Length = 3; Reduce the length of an array
Alert (array[3]); Undefined
Array.Length = 8; Extend the length of an array
Alert (array[4]); Undefined
var array = new Array ("N1", "N2", "N3", "N4", "N5"); An array of five elements
var astring = "";
for (var i=0; i<array.length; i++) {//loop array element
Astring + = Array[i];
}
alert (astring); N1n2n3n4n5
Delete Array[3]; Delete the value of an array element
Alert (Array.Length + "_" + array[3])//5_undefined
Array.Length = 3; Reduce the length of an array
Alert (array[3]); Undefined
Array.Length = 8; Extend the length of an array
Alert (array[4]); Undefined
For other methods of arrays such as join/reverse and so on, there are no more than one by one examples here.
As explained above, we already know that the object's property value is obtained by the name of the attribute (string type), and the element of the array is passed through the
Primer (integer type 0~~2**32-1) to get the value. The array itself is also an object, so the operation of the object property is perfectly suited to the array.
JS Code
Copy Code code as follows:
var array = new Array ("No1", "No2");
array["po"] = "PROPS1";
alert (array.length); 2
For arrays, the array[0] effect is the same as the array["0" (? Not sure, this is the test)
Alert (Array[0] + "_" + array["1"] + "_" + Array.po);//no1_no2_props1
Function
JavaScript functions I'm sure we've written a lot, so here's a brief introduction.
To create a function:
Copy Code code as follows:
function f (x) {...}
var f = function (x) {...}
Both of these forms can create a function named F (), but the latter form can create an anonymous function
function definition can set parameters, if the number of arguments to the function is not enough, then from the leftmost, then the rest with undefined assignment, if passed to the function
has more arguments than the number of function-defined parameters, the extra arguments are ignored.
JS Code
Copy Code code 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 the arguments in. For those parameters that must be used in the function body
To be detected (using the! operator), or set the default value and then proceed with the parameter or (| |) Action to get the parameters.
JS Code
Copy Code code as follows:
function Myprint (S1,person) {
var Defaultperson = {//Default Person 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 the Person object parameter
Alert (s1+ "_" +person.name+ ":" +person.age+ ":" +person.sex);
};
Myprint (); S1 must be input!
Myprint ("S1"); S1_name1:18:female
Myprint ("S1", {"name": "Sdcyst", "Age": "," Sex ":" Male "}); S1_sdcyst:23:male
function Myprint (S1,person) {
var Defaultperson = {//Default Person 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 the Person object parameter
Alert (s1+ "_" +person.name+ ":" +person.age+ ":" +person.sex);
};
Myprint (); S1 must be input!
Myprint ("S1"); S1_name1:18:female
Myprint ("S1", {"name": "Sdcyst", "Age": "," Sex ":" Male "}); S1_sdcyst:23:male
Arguments property of a function
Inside each function body, there is a arguments identifier that represents a arguments object. Arguments objects are very similar
to array (array) objects, such as the length property, the value accessing it uses the index to access the value of the parameter, but the two are completely different
Things just have something in common (for example, modifying the length property of a arguments object does not change its size).
JS Code
Copy Code code as follows:
function Myargs () {
alert (arguments.length);
Alert (arguments[0]);
}
Myargs (); 0---undefined
Myargs ("1", [1,2]); 2---1
function Myargs () {
alert (arguments.length);
Alert (arguments[0]);
}
Myargs (); 0---undefined
Myargs ("1", [1,2]); 2---1 arguments object has a callee attribute that indicates the method in which the current arguments object resides. You can use it to implement internal recursive calls to anonymous functions.
JS Code
Copy Code code as follows:
function (x) {
if (x <= 1) return 1;
return x * Arguments.callee (X-1);
} (section8.2)
function (x) {
if (x <= 1) return 1;
return x * Arguments.callee (X-1);
} (section8.2)
method--method
The method is the function. We know that each object contains 0 or more attributes, and the attributes can be of any type, including the object. The function itself is a
object, so we can simply put a function inside an object, at which point the function becomes a method of the object. If you want to use this method thereafter,
You can use the "." Through the object name. operator to implement.
JS Code
Copy Code code as follows:
var obj = {f0:function () {alert ("F0");}}; Object contains a method
Function F1 () {alert ("F1");}
OBJ.F1 = F1; Add a method to an object
Obj.f0 (); F0 F0 is the method of obj
OBJ.F1 (); F1 F1 is the method of obj
F1 (); F1 F1 is also a function that can be called directly
F0 (); F0 is only a method of obj, which can only be invoked through objects
var obj = {f0:function () {alert ("F0");}}; Object contains a method
Function F1 () {alert ("F1");}
OBJ.F1 = F1; Add a method to an object
Obj.f0 (); F0 F0 is the method of obj
OBJ.F1 (); F1 F1 is the method of obj
F1 (); F1 F1 is also a function that can be called directly
F0 (); F0 is only a method of obj, which can only be invoked through objects
method requires the support of the object, how do you get the object's properties in the method? this!this keyword We're already familiar with that in JavaScript side
method, we can use this to obtain a reference to the caller (object) of the method, thus obtaining the various properties of the caller.
JS Code
Copy Code code as follows:
var obj = {"name": "Name", "Sex": "Female"};
Obj.print = function () {//Add method to Object
Alert (THIS.name + "_" + this["sex"]);
};
Obj.print (); Name_female
Obj.sex = "male";
Obj.print (); Name_male
var obj = {"name": "Name", "Sex": "Female"};
Obj.print = function () {//Add method to Object
Alert (THIS.name + "_" + this["sex"]);
};
Obj.print (); Name_female
Obj.sex = "male";
Obj.print (); Name_male
Here's a more object-oriented example.
JS Code
Copy Code code as follows:
var person = {name: ' DefaultName ',
Setname:function (s) {
THIS.name = s;
},
' Printname ': function () {
alert (this.name);
}}
Person.printname (); DefaultName
Person.setname ("NewName");
Person.printname (); NewName
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, the person.name= can be used completely. To change the Name property of the person directly, here we just want to show what we just mentioned.
Another way to change the person property is to define a function, receive two arguments, one person, and the value of name, which looks like this:
ChangeName (person, "newName"). Which method is better? Obviously, the method in the example is more vivid, more intuitive, and seems to have a little bit of
object's Shadow.
Again, the method itself is a function, except that the use of the method is more restricted. In the following space, if the function is mentioned, then
The same applies to the method, not to the contrary.
Prototype property of a function
Each function contains a prototype (prototype) attribute, which forms the core of JavaScript-oriented objects. We'll discuss them in detail later.
