Javascript learning notes 8 prototype with JSON

The Code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var People = {
Name: "kym ",
Age: 21,
SayHello: function (){
Alert ("Hello, My name is" + this. name + ". I am" + this. age );
}
}
Alert (People. name );
People. SayHello ();
</Script>

But we cannot reuse this object. How do we use this object as a prototype?

First of all, it is impossible to have a constructor in a json object. Let's make a simple "Factory" and write a method to create it.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var People = {
Create: function (name, age ){
This. name = name;
This. age = age;
},
SayHello: function (){
Alert ("Hello, My name is" + this. name + ". I am" + this. age );
}
}
People. Create ("kym", 21 );
People. SayHello ();
</Script>

However, through this method, we found that there is no way to use People as the prototype. Let's review this article: Javascript study note 7-Principles of prototype chain. Let's take a look at this process:

Var p = new People () ;=> p. _ proto __= People. prototype. So when we get p. SayHello (), we will go to People. prototype to find the result.

If you can use People. prototype. SayHello = function () {}, you can solve this problem. However, we know that only functions can have prototype.

So let's think about the previous formula. How can we make p. SayHello? If you can use p. _ proto __= People. Then we can find a solution:

In new, the _ proto _ of an object can only be equal to the prototype of a function. We set a Function X. _ proto __= X. prototype. Let's add X. prototype = People. The relationship is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var People = {
Create: function (name, age ){
This. name = name;
This. age = age;
},
SayHello: function (){
Alert ("Hello, My name is" + this. name + ". I am" + this. age );
}
};

Var X = function (){};
X. prototype = People;
Var p = new X ();
P. Create ("kym", 21 );
P. SayHello ();
</Script>

This is equivalent to using X as an intermediate variable so that we can access the internal attributes of the JSON object. But is this not very elegant? Every time we create an object, we need to write such an auxiliary function. Well, we will encapsulate this process:
Copy codeThe Code is as follows:
Var Factory = {
CreatePeople: function (className, name, age ){
Var temp = function (){
ClassName. Create (name, age );
};
Temp. prototype = className;
Var result = new temp ();
Return result;
}
};
Var people = Factory. CreatePeople (People, "kym", 21 );
People. SayHello ();

However, this also has a drawback: Every time I add a class, I need to register a new method in the Factory. This is very troublesome. I played the following method a long time ago: the difference between call and apply is described in call and apply. Because the parameters here are not fixed, we cannot list them one by one. So here we can use apply to improve this method:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var People = {
Create: function (name, age ){
This. name = name;
This. age = age;
},
SayHello: function (){
Alert ("Hello, My name is" + this. name + ". I am" + this. age );
}
};

Var Factory = {
Create: function (className, params ){
Var temp = function (){
ClassName. Create. apply (this, params );
};
Temp. prototype = className;
Var result = new temp ();
Return result;
}
};
Var people = Factory. Create (People, ["kym", 21]);
People. SayHello ();
</Script>

In this way, a complete creation class is born! So every time we Create a "class", we can use json to do it. Then, every time you call Factory. Create (), you can do it!