1. Object-oriented:
With characteristics and behavior, you can create custom types, good support for inheritance and polymorphism, characteristics: encapsulation, inheritance, polymorphism, the world can be indirectly described by objects
Object-based: cannot create custom types, cannot support inheritance and polymorphism well
Second, the common objects in JavaScript
2.1 Collections without properties whose properties can contain primitive values, objects or functions
An object is an unordered set of values
We can think of js as key-value pairs where the value can be data, function
2.2 Object behavior and characteristics
behavior - method
<script type="text/javascript">
var p={
//Attributes
name:"Zhang San",
age:19,
friends:["Li Si","Wang Wu"],
//method
sayhi:function(){
console.log("hi");
},
run:function(){
console.log("跑");
}
};
console.log(typeof p);
console.log(p);
p.name="Zhao Liu"//After the value is passed, the value in the object will be changed
console.log(p.name);
console.log(p);
p.run();//Call the method
</script>
2.3 Literal objects: used for data-to-data interaction
2.4 json: There are two commonly used formats for data exchange:
1. xml: (commonly used and configuration files): xml is the predecessor of html.
Advantages: clear format, but too large
//xml <xml> <name>张三</name> <age>19</age> </xml>
2, json: (commonly used and data exchange): JavaScript object representation
Subset of JavaScript
3. The difference between json and object literals
JSON properties must be quoted with double quotes "", object literals can be omitted
JSON is essentially a data exchange format. JSON has two structures: objects and arrays. The two structures are combined with each other to form various complex data structures.
{
//Attributes
"name":"张三",
"age":19,
"friends":["Li Si","Wang Wu"],
//method
"sayhi":{
"name":"张三",
"age":19,
"friends":["Li Si","Wang Wu"]}
}
2.5 Traverse the properties of the object: for-in Traverse the properties or methods of the object:
<script type="text/javascript">
var p={
//Attributes
name:"Zhang San",
age:19,
friends:["Li Si","Wang Wu"],
//method
sayhi:function(){
console.log("hi");
},
run:function(){
console.log("跑");
}
};
for(var key in p){
console.log(key);
console.log(p[key]);
}
</script>
2.6 this: In the object in the function where this is located, this represents the object, and whoever calls this is who.
this in the constructor is always the current object of new
2.7 Constructor: new Object()
1. The function called after new is called a constructor, which is essentially a function, but the purpose of the constructor is to create a new object and create initialization for the new object
Create objects from functions (deprecated)
<script type="text/javascript">
//Add properties and methods to the constructor
function person(){
var obj=new Object();
//Attributes
obj.name=null;
obj.age=null;
obj.sex=null;
//method
obj.study=function (){
//this is a pointer representing obj
console.log(this.name+"learning");
}
obj.sleep=function (){
//this is a pointer representing obj
console.log(this.name+"sleeping");
}
return obj;//return obj
}
//Every object has properties and methods
//define a variable to receive this function
var p = person ();
//Use this variable to call the property in the constructor and assign it to him
p.name="Zhang San";
p.age=18;
p.sex="女";
// output this variable
console.log(p);
p.study();
p.sleep();
//If you define another variable to receive this function is the same as the above
var p1 = person ();
p1.name="Li Si";
console.log(p1);
console.log(p====p1);//false indicates that the objects generated by the constructor are different
</script>
It is recommended to use a constructor like this
<script type="text/javascript">
//1. Constructor
function dog(name,age,friends){
//2, properties
this.name=name;
this.age=age;
this.friends=friends;
//3, method
this.eat=function(food){
console.log(this.name+"在吃"+food);
}
this.run=function(running){
console.log(this.name+"在"+running);
}
}
var dog1=new dog("Prosperity",2);
dog1.age=5;
console.log(dog1);
console.log(dog1.name,dog1.age);
dog1.eat("肉");
dog1.run("跑");
var dog2=new dog("Laifu",10,["One by one","Erer"]);
console.log(dog2);
console.log(dog2===dog1);//false
</script>
If there are many properties and methods above, we need to optimize
Example: Passing and receiving overall values by passing in literal objects
<script type="text/javascript">
//1. Constructor
function dog(option){// This place passes in a literal object)
//2, properties
this.name=option.name;//In this case, the value to be passed in is the literal name. The property
this.age=option.age; //The advantage is that the whole value can be received by both passing and receiving
this.friends=option.friends;
//3, method
this.eat=function(food){
console.log(this.name+"在吃"+food);
};
this.run=function(running){
console.log(this.name+"在"+running);
}
}
var dog1=new dog({name:"Wangcai",age:2});// This position passes the modified literals into the attributes and values
dog1.age=5;
console.log(dog1);
console.log(dog1.name,dog1.age);
dog1.eat("肉");
dog1.run("跑");
var dog2=new dog({name:"Laifu",age:10,friends:["One by one","Erer"]});
//Note that the incoming values are all key-value pairs
console.log(dog2);
console.log(dog2===dog1);//false
</script>
2.8 Constructors and prototype properties
There are constructors and prototype properties in any object, including native objects, such as: Data, Array, etc.
constructor returns the constructor that created this object (find the constructor that produced it)
<script type="text/javascript">
//When we want to add a method and the method in the constructor can be called, we need to use the prototype method to create a method inside the function
Array.prototype.name="张三";
Array.prototype.eat=function(){
alert("eat it");
}
var arr =new Array();
arr.eat();
console.log("arr的"+arr.name);
var arr1 =new Array();
arr1.eat();
console.log("arr1的"+arr1.name);
console.log(arr.constructor);
console.log(arr1.constructor);
console.log(arr1.constructor===arr.constructor);
console.log(Array.constructor);
</script>
prototype gives us the ability to dynamically add properties and methods to objects
<script type="text/javascript">
var arr=[];//Create an array of literals
var obj=={};//Literal object creation
var arr1= new Array();//Constructor of all array objects
var obj= new Object();//Constructor of all objects
</script>
<script type="text/javascript">
var obj={
name : "Zhang San",
eat:function(){
alert("ci");
}
};
//When we add and define a property in the external object, it will be dynamically added inside the constructor
obj.age=18;
//If the age of the assignment output of our previous line is undefined, so when there is no attribute in the constructor, it will directly output undefined
console.log(obj.age );
//The outside can call the property through the object and change its value
obj.name="Li Si";
console.log(obj.name);
console.log(obj);
obj.eat=function(){
alert("eat");
}
obj.eat();
//If we add the method through the object outside, the call of the next line will be executed
obj.run=function(){
alert("pao");
}
//In the absence of the above line, an error will be reported when a method that is not inside the constructor is called externally
obj.run();
</script>
After understanding the calling properties and methods of the above objects, let's take a look at the prototype: this object property is inside the constructor that dynamically adds the method, that is, it is placed in the Array. After adding the property, we can find it when calling , which can be called when you create a new constructor.
<script type="text/javascript"> Array.prototype.eat=function(){ alert("chi"); } var arr=new Array(); arr.eat();var arr1=new Array(); arr1.eat();</script>
This code will report an error when arr1 calls the eat() method because the eat() method is only created in arr, the object can be called, and our newly created arr1 can only call the method inside the function.
<script type="text/javascript">
var arr=new Array();
//Add a method to the array
arr.eat=function(){
alert("chi");
}
arr.eat();
var arr1=new Array();
arr1.eat();//This will report an error
//The reason for the error is that the eat() method is only created in arr, the object can be called, and our newly created arr1 can only call the function inside the function
</script>
When we want to add a property and it can be called in the constructor, we use the prototype method to create the property inside the function
<script type="text/javascript">
//When we want to add a method and the method in the constructor can be called, we need to use the prototype method to create a method inside the function
Array.prototype.name="张三";
Array.prototype.eat=function(){
alert("eat it");
}
var arr =new Array();
arr.eat();
console.log(arr.name);
var arr1 =new Array();
arr1.eat();
console.log(arr1.name);
</script>
The prototype property is equivalent to a shared library. We can create multiple constructor instances and the objects can call the properties and methods in the library.
Next, we will optimize the green code above
<script type="text/javascript">
//1. Constructor
function dog(option){//This place passes in a literal object)
//2, properties
this.name=option.name;//In this case, the value to be passed in is the literal name. Property
this.age=option.age; //The advantage is that both passing and receiving can receive the whole
this.friends=option.friends;
//3, method Change the method of this place to the form of the shared library below
// this.eat=function(food){
// console.log(this.name+"在吃"+food);
// };
// this.run=function(running){
// console.log(this.name+"在"+running);
// }
}
dog.prototype.eat=function(food){//Change the above to this shared form
console.log(this.name+"在吃"+food);
};
dog.prototype.run=function(running){
console.log(this.name+"在"+running);
};
var dog1=new dog({name:"Wangcai",age:2});//This position passes the modified literals into the attributes and values
dog1.age=5;
console.log(dog1);
console.log(dog1.name,dog1.age);
dog1.eat("肉");
dog1.run("跑");
var dog2=new dog({name:"Laifu",age:10,friends:["One by one","Erer"]});
//Note that the incoming values are all key-value pairs
console.log(dog2);
console.log(dog2===dog1);//false
console.log(dog1.eat====dog2.eat);//Verify that his type is the same and output true
</script>
This is the optimized final version. The results of the two outputs are the same, but this one is more streamlined, but the disadvantage is that adding this way will overwrite all the original ones, and the one above is a dynamic addition.
<script type="text/javascript">
//1. Constructor
function dog(option){//This place passes in a literal object)
//2, properties
this.name=option.name;//In this case, the value to be passed in is the literal name. Property
this.age=option.age; //The advantage is that both passing and receiving can receive the whole
this.friends=option.friends;
}
//
// dog.prototype.eat=function(food){
// console.log(this.name+"在吃"+food);
// };
// dog.prototype.run=function(running){
// console.log(this.name+"在"+running);
// };
//Change the above constructor to literal form, which is more compact than the above one by one constructors
dog.prototype={
eat:function(food){
console.log(this.name+"在吃"+food);
},
run:function(running){
console.log(this.name+"在"+running);
}
};
var dog1=new dog({name:"Wangcai",age:2});//This position passes the modified literals into the attributes and values
dog1.age=5;
console.log(dog1);
console.log(dog1.name,dog1.age);
dog1.eat("肉");
dog1.run("跑");
var dog2=new dog({name:"Laifu",age:10,friends:["One by one","Erer"]});
//Note that the incoming values are all key-value pairs
console.log(dog2);
console.log(dog2===dog1);//false
console.log(dog1.eat===dog2.eat);
</script>
When I get here, I will wonder if the attribute can also be put into the share, so that the code is really simplified. The following code is exactly the same as the result of the modified code above.
<script type="text/javascript">
//1. Constructor
function dog(option){//This place passes in a literal object)
//2, call the properties in the prototype
this._init(option);
}
//Put the above properties into the prototype and create a new constructor with the properties in it
dog.prototype={
_init:function(option){
//2, properties
this.name=option.name;//In this case, the value to be passed in is the literal name. Property
this.age=option.age; //The advantage is that both passing and receiving can receive the whole
this.friends=option.friends;
},
eat:function(food){
console.log(this.name+"在吃"+food);
},
run:function(running){
console.log(this.name+"在"+running);
}
};
var dog1=new dog({name:"Wangcai",age:2});//This position passes the modified literals into the attributes and values
dog1.age=5;
console.log(dog1);
console.log(dog1.name,dog1.age);
dog1.eat("肉");
dog1.run("跑");
var dog2=new dog({name:"Laifu",age:10,friends:["One by one","Erer"]});
//Note that the incoming values are all key-value pairs
console.log(dog2);
console.log(dog2===dog1);//false
console.log(dog1.eat===dog2.eat);
</script>
