A prototype of JavaScript advanced features

Source: Internet
Author: User

The prototype of JavaScript

The prototype prototype property applies only to function objects (where the function object is self-defined for the sake of understanding, the normal object is not a prototype attribute)

1. Research function Prototypes:

<script type= "Text/javascript" >  //The prototype is a property of the function object (the normal object is not a prototype attribute.) function person () {this.name= "Li Weikang"; This.sayhi=function () {alert ("Hi");}};/ /Call the properties and methods of the function object Hero: New Hero () var p=new person ();//When you invoke a property or method of a Function object Hero, you actually call the Hero object after new. alert (p.name);//Call the prototype property of the Function object, Should I call the Hero object or the Hero object? Alert (person.prototype);  </script>
There is no concept of class in JavaScript, only the concept of an object. So is the prototype attribute defined in a function object (equivalent to a class in Java) or a new object? In general, we study the prototype in a JavaScript function object.

2. Ways to add properties and methods to function objects (decentralized and centralized)

To define a function object:

function person () {this.name= "Li Weikang"; This.sayme=function () {alert ("Hi");}}
(1) Decentralized definition of properties and methods:

Person.prototype.value= "is the first pig";

Person.prototype.sayhi=function () {

Alert ("Hi");

}

Test by means of the new object:

var p=new person ();

alert (P.value);

P.sayhi ();

(2). Add attributes to a function prototype in a centralized style

person.prototype={

Value: "is a pig";

Sayhi:function () {alert ("Hi");}

}

Both the scatter and the centralized can add properties to the function, but we recommend that you add properties to the function in a centralized style

3. When a property or method of a function object has the same name as a prototype's property or method:

<script type= "Text/javascript" >  //This shows that the properties and methods on the prototype are added, but the precedence is that the properties and methods on the function object are higher than the properties and methods on the prototype of the function object/  *   * When a property or method of a function object has the same name as a prototype's property or method: * * Called properties and Methods, is the properties and methods of the function object * * The properties and methods of the   function object itself are present with the properties and methods of the prototype   * * The properties and methods of the function object itself are prioritized higher than the familiarity and method of the prototype   */function Hero () {this.name = "Li Weikang"; this.sayme = function () {alert ("I am Li Weikang.");} Are the properties and methods of the prototypes added up? Hero.prototype = {name: "Zhou Zhijo", Sayme:function () {alert ("I am Zhou Zhijo.");} var hero = new Hero (); alert (hero.name);//outputzhangwujidelete Hero.name;alert (hero.name);//outputzhouzhiruo  </script>
Test: The first print is Li Weikang. Instead of Zhou Zhijo. This indicates that the properties in the function prototype and the name of the function definition are not overwritten when they are identical to each other. The function object is the prototype of the function object is the prototype .... After removing the properties in the function object: We are printing: Zhou Zhijo ...





4. Redefine the function object with the prototype: that is, when we define a function object, we define an empty one, and define all the properties and methods in the prototype.

<script type= "Text/javascript" >  //define an empty function the person () {};//defines the properties and methods on the function prototype Person.prototype={name: " Cheng ", Seeav:function () {alert (" Brother Tree likes Zeiss! ");}} var p=new person (); alert (p.name);p. Seeav ();  </script>


5. Extend the properties and methods of the built-in objects (we have added a function to the array object ...)

<script type= "Text/javascript" >array.prototype.inarray=function (color) {for (Var i=0;i<array.length;i++) { if (this[i]== "red") {return true;}} return false;} var color=["Red", "Blue"];alert (Color.inarray ("Red"));  </script>


Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

A prototype of JavaScript advanced features

Related Article

Contact Us

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.