1. About Objects
1. Original mode
var person = new Object();
person.name="Jack";
person.age=29;
person.message=function ()
{
alert(this.name+" is "+this.age);
};
alert(person.name);//Jack
person.message();//Jack is 29
2. Create Objects
There are three modes:
(1) Factory mode:
function Person(name,age,hobby){
var a= new Object();//Create a class in a function
a.name=name;
a.age=age;
a.hobby=hobby;
a.message=function (){
alert(this.name+" is "+this.age);
};
return a;//Return this value as a return value
}
var person=Person("Jack",29,"swimming");//By instantiating a class
person.message();//Jack is 29
At that time, perhaps factory mode solved the problem of creating a large number of similar objects, passing values by calling a function and returning an object, but with the development of javascript, it also had drawbacks, unable to recognize other objects, and then there were constructors
(2) Constructors
function Person(name,age,hobby){
this.name=name;
this.age=age;
this.hobby=hobby;
this.message=function (){
alert(this.name+" is "+this.age);
};
}
var person=new Person("Jack",29,"swimming");
var person2=new Person("David",28,"running");
person.message();//Jack is 29
The biggest difference between a constructor and a factory function is:
(1) There is no need to create another class within a function or explicitly create an object
(2) No object return ed back
(3) All attributes and methods are given directly to this, while this pointer points to person
(4) Supplement: The biggest difference between constructors and other functions is that they are called in a different way and need to be called through the new operator
Next, you'll test the properties of person and person2 to determine what's better than the factory function:
person.constructor==Person;//true
person2.constructor==Person;//true
Then test with instanceof:
person instanceof Person;//true
person instanceof Person;//true
Visible constructors can treat their instances as a specific type, but factory functions do not
person.constructor==Person;//true
person2.constructor==Person;//true
Then test with instanceof:
person instanceof Person;//true
person instanceof Person;//true
Visible constructors can treat their instances as a specific type, but factory functions do not
Disadvantages:
person.message==person2.message;//false
What does this mean?
When a constructor has methods and properties that are identical, each instance generated must be duplicated, taking up more memory.This is neither environmentally friendly nor inefficient.
This prototype solves this problem very well.
3. prototype mode
function Person(){
}
Person.prototype.name="Jack";
Person.prototype.age=29;
Person.prototype.hobby="swimming";
Person.prototype.message=function (){
alert(this.name);
};
var person=new Person();
var person2=new Person();
alert(person.message==person2.message);//true
This prototype pattern solves the problem with the constructor
The prototype mode saves memory, but it's still problematic:
The prototype mode saves memory, but it's still problematic:
function Fruit(){
}
Fruit.prototype={
name:"Jack",
age:29,
likeFruit:["apple","mango"]
};
var person=new Fruit();
var person2=new Fruit();
person.likeFruit.push("lemon");
person2.likeFruit.push("banana");
alert(person.likeFruit);//apple,mango,lemon,banana
alert(person2.likeFruit);//apple,mango,lemon,banana
alert(person.likeFruit===person2.likeFruit);//trueWhy does the value added to person also appear in person 2?
And the values of the two classes are the same, which is the problem with the prototype function
And the values of the two classes are the same, which is the problem with the prototype function
So it's usually a combination of the two:
function Person(name,age,hobby){
this.name=name;
this.age=age;
this.hobby=hobby;
this.likeFruit=["apple","mango"];
}
Person.prototype={
message : function (){
alert(this.name);
}
}
var person =new Person("Jack",29,"swimming");
var person2=new Person("David",28,"running");
person.likeFruit.push("lemon");
alert(person2.likeFruit);//apple,mango
person.message();//Jack
person2.message();//DavidThis way, you can avoid some of the issues above
The above knowledge is summarized by myself through reading and self-induction, which may be somewhat inaccurate. This is also my first time to write a blog, many functions will not be used yet. I hope to get your advice, thank you.