JS Object 4-js prototype--magazine

Question: What is a prototype in JS prototype

Everyone learning JS have their own explanations, a lot of online interpretation and application, but read their explanations to say or do not understand how to do? (because they say it's too much)

Official manual explanation: The Prototype property gives you the ability to add properties and methods to an object.

1.prototype is a property of an object

2. Use it to add a method to an object

Small brother to explain: Before the explanation is to see a very simple case

Let's start with the CSS (the one that makes the front end--simple)

When we add a style to an element, the usual way is not

1. Use class (to change the style of a class of elements)

2. Use the inline style (to change the style for a single element) ( add a method to a single object )

. box1 {background:red}<Div>    <Divstyle= ' background:Red ' class= ' Box1 '></Div>    <Divclass= ' Box2 '></Div>    <Divclass= ' Box2 '></Div>    <Divclass= ' Box2 '></Div>    <Divclass= ' Box2 '></Div></Div>

Remember that this case in the previous chapter only sums the individual array objects (similar to the CSS inline style)

1 varARR1 =NewArray (22,44,1,6,7);//You can also use the direct amount to create var arr1 = [22,44,1,6,7];2Arr1.sum =function(){//Add a method sum to the array arr1 (similar to the CSS inline style) 3         varresult = 0//sum4         vari = 0;//A small performance optimization does not declare and initialize a variable i = 0 with each for loop5          for(i = 0; i< This. length; i++) {//This represents the object that invokes the function as Arr16result+= This[i];7         }8         returnresult;9     }TenAlert (Arr1.sum ());// the

Adds a method to the prototype of the array class. How many arrays can you add to the array similar to the class in CSS

varARR1 =NewArray ( A, -,1,6,7);//You can also use the direct amount to create var arr1 = [22,44,1,6,7];varARR2 =NewArray (1, -,5,6); Array.prototype.sum= function () {//Add a method sum to the prototype of the array class        varresult =0  //sum        vari =0;//A small performance optimization does not declare and initialize a variable i = 0 with each for loop         for(i =0; i< This. length; i++) {//This represents the object that invokes the function as Arr1result+= This[i]; }         returnresult;   } alert (Arr1.sum ()); // theAlert (Arr2.sum ());// $   alert (arr1.sum = = arr2.sum)//true because they are all from the same prototype method to solve the waste

Simple summary: To add a method to a prototype of a class, the object created by this class can use this method

1. Use class (to change the style of a class of elements) ( similar to: Add a method to the prototype of the classes )

2. Use the inline style (to change the style for a single element) ( add a method to a single object )

You can now prototype the previous instance

<script type= "Text/javascript" >functionCreatepreason (name,sex) {//Constructors     　　   //The imaginary system internally constructs an object that assigns a value to this//var this = new object (); 　　　　　 
         //Properties 　　　    　　　  This. name = name;//Add a Name property to an object     　　　  This. sex = sex;//Add a sex attribute to an object        //The imaginary system is automatically returned inside // returnthis;     }
//Method CreatePreason.prototype.sayName=function() {alert ("Hello everyone, I am:" + This. name);//print out: Pass in the parameter name of the real value here this represents the object that called the method}createpreason.prototype.saysex=function() {alert ("Gender:" + This. Sex);//print out: Pass in Parameters the real value of sex here represents the object that called the method}    varP1 =NewCreatepreason ("Little brother", "male");varP2 =NewCreatepreason ("Little Dragon Girl", "female"); P1.sayname ();//Print out Everybody good I'm: Brother DrakeP1.saysex ();//Print out sex: MaleP2.sayname ();//Print out Everybody good I am: Little Dragon GirlP2.saysex ();//Print out sex: femaleAlert (P1.sayname = = p2.sayname)//true</script>

Summary: 1. constructor name Capital Letter

2. Add a property (not the same inside the constructor) to the constructor function

3. Add a method on the prototype prototype of the constructor (same as added to the prototype)

4. If you can't remember what the prototype is, think about CSS.

Discuss the precedence of prototypes and individual objects

ARRAY.PROTOTYPE.A = 12//The prototype is added similar to class
var arr1 = [1,33,4,77];
Alert (arr1.a)//12

arr1.a = 5;
Alert (arr1.a)//5//Add similar inline style to a single object

The priority of the inline style in CSS is greater than the precedence of class

JS Object 4-js prototype--magazine