JS to create the object of several methods , this article discusses several JS to create the object of the method, first from the best understanding of the factory model start:
The code is as follows |
Copy Code |
function Createperson (name,age,job) { var o = {}; O.name = name; O.age = age; O.job = job; O.sayname = function () { alert (this.name); }; return o; } var Tanya = Createperson ("Tanya", "a", "female"); var Ansel = Createperson ("Ansel", "a", "male"); Tanya.sayname (); Ansel.sayname (); |
This defines O as an empty object, and then sets a bunch of properties for O. In fact, you can also directly to the O attribute, so if this is ok to write.
code is as follows |
copy code |
function Createperson (name,age,job) { var o = { & nbsp; name:name, age:age, & nbsp; job:job, sayname: function () { alert (this.name); } }; return o; } var Tanya = Createperson ("Tanya", "a", "female"); var ansel = Createperson ("Ansel", "a", "male"); Tanya.sayname (); Ansel.sayname (); |
Another option is to use the invincible this, because this represents the object at the current runtime, the scope of the constructor this to the new object, and the properties and methods of the currently running object to the new object, so that the object pattern is called the constructor pattern
The code is as follows |
Copy Code |
function Person (name,age,job) { THIS.name = name; This.age = age; This.job = job; This.sayname = function () { alert (this.name); }; } var Tanya = new Person ("Tanya", "a", "female"); var ansel = new Person ("Ansel", "a", "male"); Tanya.sayname (); Ansel.sayname (); |
In this example, both Tanya and Ansel have a constructor attribute that points to the person.
Consider the following:
The code is as follows |
Copy Code |
function Person (name,age,job) { THIS.name = name; This.age = age; This.job = job; This.sayname = function () { alert (this.name); }; } Person ("Tanya", "a", "female"); Person ("Ansel", "a", "male"); Window.sayname (); Window.sayname (); |
It is found that two times the pop-up is Ansel, because without new, it is not an instance of person, but only in the execution function. This always points to the global object when a function is called in the global scope. The global object is the Window object in the browser.
We can also invoke the Sayname method in another object using the construction pattern, remember apply and call, come to think of another case,
The code is as follows |
Copy Code |
function Person (name,age,job) { THIS.name = name; This.age = age; This.job = job; This.sayname = function () { alert (this.name); }; }
var Olivia = {}; Person.call (Olivia, "Tanya", "a", "female"); Olivia.sayname (); var Philip = {} Person.apply (philip,["Ansel", "the", "male"); Philip.sayname (); |
Prototype model to consider the prototype chain, analysis, the Sayname method in the example is repeatedly defined two times, but in fact there is no need to create two copies. Using a prototype method, you can make a sayname method of sharing a Tanya and Ansel.
So the prototype pattern is written as follows:
The code is as follows |
Copy Code |
function Person (name,age,job) { THIS.name = name; This.age = age; This.job = job; }
Person.prototype.sayname= function () { alert (this.name); }; var Tanya = new Person ("Tanya", "a", "female"); var ansel = new Person ("Ansel", "a", "male"); Tanya.sayname (); Ansel.sayname (); |
When applied, it is not rigid to apply a pattern, ingenious. When you need to share a method, you use a prototype pattern, you use a build pattern when you need a copy, you can combine all the information in a constructor, and by initializing the prototype in the constructor, the object retains the advantage of using both the constructor and the prototype.
The code is as follows |
Copy Code |
function Person (name,age,job) { THIS.name = name; This.age = age; This.job = job; if (typeof sayname!= "function") { Person.prototype.sayname= function () { alert (this.name); }; } }
var Tanya = new Person ("Tanya", "a", "female"); var ansel = new Person ("Ansel", "a", "male"); Ansel.sayname = function () { Alert ("Hi Ansel, how to Hansome you are!"); } Tanya.sayname (); Ansel.sayname ();
|