JavaScript object part
1: Basic part
1. All variables in JavaScript are objects, with two exceptions null and undefined.
2.Jscript supports four types of objects: internal objects, generated objects, host-given objects (all BOM and DOM objects are host objects.), and ActiveX objects (external components).
3. Microsoft Jscript provides 11 internal (or "built-in") objects. They are Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, Error, and String objects.
4. Objects are just special data. Objects have properties and methods. JavaScript is an object-oriented language, but JavaScript does not use classes. JavaScript is based on prototype, not class-based.
5. Attribute: is a variable affiliated to a specific object. Method: It is a function that can only be called by a specific object.
6. Jscript objects are collections of properties and methods. A method is a function, which is a member of an object. An attribute is a value or a set of values (in the form of an array or object) that is a member of an object.
7. Javascript objects are based on constructor functions. When using constructor functions to create a new object, it can be said that a new object is instantiated. Properties are variables inside the constructor function.
Objects instantiated using constructor functions:
cat = new Animal();
8. Javascript is an object-based language, and almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because there is no class (class) in its syntax.
The code copy is as follows:
<script type="text/javascript">
//Object is a collection of name/value pairs
var browser = { //Object is enclosed in curly braces
name:"Firefox",
kernel:"Gecko"
};
</script>
The code copy is as follows:
//Access the object's properties through dot (.) or "[]"
browser.name //"Firefox"
browser["kernel"] //"Gecko"
Objects (objct) are a collection of properties, each property consists of "name/value pairs". js also defines a special object - an array, which is an ordered set of numbered values. js also defines a special object - function, a function is an object with executable code associated with it. It executes the code by calling the function and returns the operation result.
Clarify the concept:
"Object-based = Object-oriented" in JS 4. There is no class (Class) in JS, but it takes a new name called "Prototype Object", so "Class = Prototype Object"
2: The difference and connection between classes (prototype objects) and objects (instances)###
1. Classes (prototype objects) are abstract, conceptual, representing a type of things.
2. The object is concrete, practical, and represents a specific thing.
3. Class (prototype object) is a template for object instances, and object instances are individuals of the class.
A common misconception is that the literal value of a number is not an object. This is because of a bug in the JavaScript parser that tries to parse the point operator as part of the floating point numerical face value.
There are many workarounds to make the literal value of a number look like an object.
2..toString(); // The second dot can be parsed normally
2.toString(); // Pay attention to the spaces before the dot
(2).toString(); // 2 is calculated first
Delete attributes
The only way to delete a property is to use the delete operator; setting the property to undefined or null does not really delete the property, but simply removes the association between the property and the value.
Three major features of JavaScript object-oriented
Encapsulation: No internal implementation is considered, only functional use is considered
Inheritance: Inherit a new object from an existing object
Polymorphism: The so-called polymorphism refers to multiple states that refer to in different situations.
1. Packaging
Encapsulation means to group the commonalities (including attributes and behaviors) of things belonging to the same category into a class for easy use. For example, the human thing can be encapsulated in the following ways:
people{
Age (attribute 1)
Height (attribute 2)
Gender (attribute three)
Do things (one of the behaviors)
Walking (behavior 2)
Speaking (act 3)
}
Benefits of encapsulation:
Encapsulation protects the integrity of internal data;
Encapsulation makes refactoring of objects easier;
Weaken coupling between modules and improve the reusability of objects;
Helps avoid namespace conflicts;
See the following example:
The code copy is as follows:
<script type="text/javascript">
var boy = {}; //Create an empty object
boy.name = "Xiao Ming";// Assign values according to the properties of the prototype object
boy.age = 12;
var girl = {};
girl.name = "Xiaohong";
girl.age = 10;
</script>
This is the simplest encapsulation, encapsulating two attributes in one object. However, this writing method has two disadvantages. One is that if you generate more instances, it will be very troublesome to write; the other is that there is no way to tell whether there is any connection between the instance and the prototype.
Constructor mode
To solve the problem of generating instances from prototype objects, Javascript provides a constructor pattern.
The so-called "constructor" is actually an ordinary function, but this variable is used internally. Using the new operator for the constructor can generate an instance, and this variable will be bound to the instance object.
For example, the prototype objects of boy and girl can be written like this now:
The code copy is as follows:
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
</script>
We can now generate instance objects.
The code copy is as follows:
<script type="text/javascript">
var boy = new Person("Xiao Ming","12");
var girl = new Person("Xiaohong","10");
alert(boy.name); //Xiao Ming
alert(boy.age); //12
</script>
At this time, Boy and girl will automatically contain a constructor attribute pointing to their constructor.
The code copy is as follows:
alert(boy.constructor == Person); //true
alert(girl.constructor == Person); //true
Prototype pattern Javascript stipulates that each constructor has a prototype attribute pointing to another object. All properties and methods of this object will be inherited by the constructor instance.
This means that we can directly define those unchanged properties and methods on the prototype object.
The code copy is as follows:
<script type="text/javascript">
function Person(name,age){
this.name = name;
this.age = age;
}
Person.protype.type = "Human";
Person.protype.eat = function(){
alert("eat rice");
}
</script>
Then, generate the instance:
The code copy is as follows:
<script type="text/javascript">
var boy = new Person("Xiao Ming","12");
var girl = new Person("Xiaohong","10");
alert(boy.type);//Human
boy.eat();//Eat
</script>
At this time, the type attributes and eat() methods of all instances are actually the same memory address, pointing to the prototype object, thus improving the operation efficiency.
alert(boy.eat == girl.eat); //true
A prototype property is a built-in property that specifies the constructor function that the object extends.
The following code adds a new attribute size to the Animal constructor function, which is the prototype attribute of the cat object. By using prototype properties, all objects that extend Animal constructor functions can access the size property
cat = new Animal("feline","meow", "walk/run");
cat.prototype.size = "fat";
In this case, the size attribute of all Animal objects is "fat". The prototype defaults to a new instance of Object. Since it is still an object, new attributes can be added to the object. Just like style is an object in javascript, you can also continue to add properties after style.
The code copy is as follows:
<script type="text/javascript">
/*Define a Person class*/
function Person(_name,_age,_salary){
//The public attributes of the Person class, the public attributes of the class are defined as: "this. attribute name"
this.Name=_name;
//Person class's private attributes, the private attributes of the class are defined as: "var attribute name"
var Age=_age;
var Salary=_salary;
//Define the public method (privileged method) of the Person class, the definition of the public method of the class
Yes: "this.functionName=function(){......}"
this.Show=function(){
alert("Age="+Age+"/t"+"Salary="+Salary);//Accessing the private properties of the class in the public method is allowed
}
</script>
When an object looks for a certain property, it will first traverse its own properties. If not, it will continue to look for the object referenced by [[Prototype]]. If not, it will continue to look for the object referenced by [[Prototype]].[[Prototype]], and so on until [[Prototype]].….[[Prototype]] is undefined (Object's [[[Prototype]] is undefined)
Simply put, it is to save a reference to another object through the object's [[Prototype]], and search the attributes up through this reference. This is the prototype chain.
Global window object
Any global function or variable in JavaScript is a property of window.
The self object is exactly the same as the window object. Self is usually used to confirm that it is in the current form.
The main main objects of window are as follows:
JavaScript document object
JavaScript frames object
JavaScript history object
JavaScript location object
JavaScript navigator object
JavaScript screen object
Several common methods
valueof() method: Returns the original value of the specified object
The split() method splits the string into a string array and returns this array.
The indexOf() method returns the first occurrence of a specified string value in the string.
The substring() method is used to extract characters in a string between two specified subscripts.
The substr() method extracts the specified number of strings starting from the startPos position from the string.
The join() method is used to put all elements in the array into a string.
arrayObject.join(delimiter)
The reverse() method is used to reverse the order of elements in an array.
The slice() method returns the selected element from an existing array.
Object literal
Object literals are processes used to create a large number of attributes.
The code copy is as follows:
<script type="text/javascript">
var company = {
name: "Microsoft",
ages : 39,
Employees : 99000,
CEO: "Nadella"
};
</script>
It should be noted here that attributes and attribute values are separated by colons (:); multiple attributes are separated by commas (,). The literal object can also define methods. Just write function on the attributes of this object. This is an anonymous function. You only need to write its method name () to call it.
The code copy is as follows:
<script type="text/javascript">
var dog = {
name:"husky",
age:2,
run:function(){
return "123";
}
}
alert(dog.run());//If you enter dog.run, the code of the function part after it will pop up
</script>
JavaScript array part
1.Array object
Array object: Provides support for creating arrays of any data type.
The code copy is as follows:
arrayObj = new Array()
arrayObj = new Array([size])
arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
Definition: var arr = [2,3,45,6]; var arr = new Array(2,4,5,7)
There is no difference in definition between the two, [] has high performance because the code is short.
Use array and object literals: var aTest = []; when creating arrays, using array literals is a good choice; similarly, object literals can also be used to save space. The following two lines are equal, but use the object literals to be shorter:
var oTest = new Object; //Try not to use it
var oTest = { }; //The best choice, or var 0Test = [ ];
Traversal In order to achieve the best performance of traversing arrays, it is recommended to use a classic for loop.
The code copy is as follows:
var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
console.log(list[i]);
}
The above code has a processing, which is to cache the length of the array through l = list.length.
Array constructor
Since Array's constructor is a bit ambiguous when it comes to how to handle arguments, it is always recommended to use the literal syntax of arrays - [] - to create arrays.
Therefore, the following code will be confusing:
new Array(3, 4, 5); // Result: [3, 4, 5]
new Array(3) // Result: [], the length of this array is 3
Try to avoid using array constructors to create new arrays. It is recommended to use the literal syntax of arrays. They are shorter and more concise, thus increasing the readability of the code.
Properties of Array array
3 properties of the Array array: length attribute, prototype attribute, constructor attribute
1.length attribute
The Length attribute represents the length of the array, that is, the number of elements in it. Because the index of an array always starts from 0, the upper and lower limits of an array are: 0 and length-1 respectively. Unlike most other languages, the length property of JavaScript arrays is mutable, which requires special attention.
2.prototype attribute
Returns a reference to the object type prototype. The prototype attribute is common to object.
For Array array objects, use the following example to illustrate the purpose of the prototype attribute.
Add a method to the array object to return the maximum element value in the array. To accomplish this, declare a function, add it to Array.prototype, and use it.
The code copy is as follows:
function array_max()
{
var i,max=this[0];
for(i=1;i<this.length;i++)
{
if(max<this[i])
max=this[i];
}
return max;
}
Array.prototype.max=array_max;
var x=new Array(1,2,3,4,5,6);
var y=x.max();
After this code is executed, y saves the maximum value in the array x, or 6.
3.constructor attribute
A function that represents the creation of an object. Description: The constructor attribute is a member of all objects with prototype. They include all JScript native objects except Global and Math objects. The constructor property holds a reference to the function that constructs a specific object instance.
For example:
The code copy is as follows:
x = new String("Hi");
if(x.constructor==String) //Process (condition is true).
//or
function MyFunc{
//Function body.
}
y=new MyFunc;
if(y.constructor==MyFunc)//process (condition is true).
For arrays:
y = new Array();
Array method:
Attached an array of mind maps: