<span id="Label3"></p>The prototype in JS <table> <tbody> <tr> <td class="blog_tag"></td> <td class="blog_class"></td> </tr> </tbody> </table><span><span>Original Address:</span></span><span><span>http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html</span></span><p><p>JS in the prototype is a more difficult to understand the part of JS</p></p><p><p></p></p><p><p>This article is based on several knowledge points:</p></p><p><p></p></p><p><p>1 prototype design pattern</p></p><p><p>Clone () can be used in. NET to implement the prototype method</p></p><p><p>The main idea of the prototype method is that there are now 1 class a, and I want to create a class b, which is a prototype and can be Extended. We call the prototype of B A.</p></p><p><p></p></p><p><p>The 2 JavaScript methods can be divided into three categories:</p></p><p><p>Class A method//only class can be called, the object after instantiation cannot be called</p></p><p><p>B Object method</p></p><p><p>C Prototyping Method</p></p><p><p>Example:</p></p>function People (name)<br>{<br>this.name=name;<br>Object methods<br>This. Introduce=function () {<br>Alert ("My name is" +this.name);<br>}<br>}<br>Class method<br>People.run=function () {<br>Alert ("I can run");<br>}<br>Prototyping methods<br>People.prototype.introducechinese=function () {<br>Alert ("my name is" +this.name);<span style="font-family: ‘Courier New‘;"><span style="font-family: ‘Courier New‘;">}</span></span><br><span style="color: #22b14c;"><span style="color: #22b14c;">//the prototype method can be written as an associative array when there are multiple</span></span>People.prototype = {introducechinese:function () {alert ("my name is" +this.name)}, (here is a comma) sayhello:function () {alert (" Hello ");}}<br><span style="font-family: ‘Courier New‘;"><span style="font-family: ‘Courier New‘;"> </span></span><br><br>Test<br><br>var p1=new people ("windking");<br><br>p1. Introduce ();<br><br>People.run ();<br><br>p1. Introducechinese ();<p><p></p></p><p><p>3 Obj1.func.call (obj) method</p></p><p><p>It means to treat obj as obj1, calling the Func method</p></p><p><p></p></p><p><p></p></p><p><p>ok, Here's One problem to solve:</p></p><p><p></p></p><p><p>What does prototype mean?</p></p><p><p></p></p><p><p>Each object in JavaScript has the prototype property, and the prototype property of the object in JavaScript is interpreted as a reference to the object type Prototype.</p></p><p><p>A.prototype = new B ();</p></p><p><p>Understanding prototype should not confuse it with Inheritance. A's prototype is an example of b, and it's understandable that a will clone the methods and properties in B all over Again. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: the prototype of a is an instance of b, and the prototype of B is also an instance of A.</p></p><p><p></p></p><p><p>Let's look at an example of an experiment:</p></p><br>function BaseClass ()<br>{<br>this.showmsg = function ()<br>{<br>Alert ("baseclass::showmsg");<br>}<br>}<br><br>function Extendclass ()<br>{<br>}<br><br>Extendclass.prototype = new BaseClass ();<br>var instance = new Extendclass ();<br>Instance.showmsg (); Show Baseclass::showmsg<p><p>We first defined the BaseClass class, and then we want to define extentclass, but we are going to use an instance of BaseClass as a prototype, to clone the Extendclass also contains showmsg this object method.</p></p><p><p>Extendclass.prototype = new BaseClass () can be read As: Extendclass was created as an instance of BaseClass as a prototype CLONE.</p></p><p><p></p></p><p><p>Then there is a question, what if the Extendclass itself contains a method with the same name as the BaseClass method?</p></p><p><p>Here is the extended experiment 2:</p></p><br>function BaseClass ()<br>{<br>this.showmsg = function ()<br>{<br>Alert ("baseclass::showmsg");<br>}<br>}<br><br>function Extendclass ()<br>{<br>This.showmsg =function ()<br>{<br>Alert ("extendclass::showmsg");<br>}<br>}<br><br>Extendclass.prototype = new BaseClass ();<br>var instance = new Extendclass ();<br><br>Instance.showmsg ();//display extendclass::showmsg<p><p></p></p><p><p>Experimental results show that the function will go to the function of the main body to find, if found to run, can not find the prototype to find the Function. Or it can be understood that prototype does not clone a function with the same name.</p></p><p><p></p></p><p><p>Then there will be a new problem:</p></p><p><p>What if I want to use an instance of Extendclass instance call BaseClass Object method showmsg?</p></p><p><p></p></p><p><p>The answer is that you can use Call:</p></p><br>Extendclass.prototype = new BaseClass ();<br>var instance = new Extendclass ();<br><br><br>var baseinstance = new BaseClass ();<br>Baseinstance.showMsg.call (instance);//display baseclass::showmsg<p><p></p></p><p><p>Here's Baseinstance.showMsg.call (instance); read as "invoke instance as baseinstance, invoke its object method showmsg"</p></p><p><p>well, Someone here might ask, why not BaseClass.showMsg.call (instance);</p></p><p><p>This is the difference between the object method and the class method, and we want to invoke the BaseClass object Method.</p></p><p><p></p></p><p><p><span style="font-family: Georgia;">finally, the following code, if understood clearly, is understood in this article:</span></p></p><p><p></p></p><br><</span>script type= "text/javascript" ><br><br>function BaseClass ()<br>{<br>this.showmsg = function ()<br>{<br>Alert ("baseclass::showmsg");<br>}<br><br>this.baseshowmsg = function ()<br>{<br>Alert ("baseclass::baseshowmsg");<br>}<br>}<br>baseclass.showmsg = function ()<br>{<br>Alert ("baseclass::showmsg static");<br>}<br><br>function Extendclass ()<br>{<br>This.showmsg =function ()<br>{<br>Alert ("extendclass::showmsg");<br>}<br>}<br>extendclass.showmsg = function ()<br>{<br>Alert ("extendclass::showmsg Static")<br>}<br><br>Extendclass.prototype = new BaseClass ();<br>var instance = new Extendclass ();<br><br>Instance.showmsg (); Show Extendclass::showmsg<br>Instance.baseshowmsg (); Show Baseclass::baseshowmsg<br>Instance.showmsg (); Show Extendclass::showmsg<br><br>BaseClass.showMsg.call (instance);//display baseclass::showmsg Static<br><br>var baseinstance = new BaseClass ();<br>Baseinstance.showMsg.call (instance);//display baseclass::showmsg<br><br><</SPAN>/script><p><p></p></p><p><p>Xuan Chi Blade (yjf512)<br>Source: (http://www.cnblogs.com/yjf512/)<br>Copyright Notice: The copyright of this article is owned by the author and the blog Park. Welcome reprint read, Reprint must indicate the detailed link of this Article.</p></p><p><p></p></p><p><p>[reference article]</p></p><p><p>Http://tech.ddvip.com/2009-05/1243588303121461.html</p></p><p><p>http://jetway.iteye.com/blog/56533</p></p><p><p>http://xiaofeizm55333.iteye.com/blog/80913</p></p><p><p>The prototype in JS</p></p></span>
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.