JavaScript Prototype Usage Introduction

The students who have used JavaScript are sure to prototype thunderclap piercing, but this is something that lets beginners consensus, only know that the function will have a prototype genus

, you can add functions for instance access, others are unclear.

Each function has a prototype property, which is a reference to an object called the prototype object, which contains the methods and properties shared by the function instance, and

This means that when a function is used as a constructor call (called with the new operator), the newly created object inherits properties and methods from the prototype object.

Private variables, functions

In the specific said prototype before said a few related east, can better understand the design intent of prototype. Previously written in a JavaScript namespace article that mentions JavaScript

function scope, variables and functions defined within a function if the interface is not provided externally, then the external will not be accessible, that is, private variables and private functions.

The code is as follows:

function Obj () {                var// private variable                var fn=function//  Private function                 }            }

In this way, the variables a and the function FN cannot be accessed outside of the function object obj, they become private and can only be used inside obj, even if instances of the function obj still cannot access the variables

and functions.

The code is as follows:

var o=New  Obj ();             // undefined            // undefined

static variables, functions

When a function is defined, pass the "." The properties and functions that are added to it can still be accessed through the object itself, but its instances are not accessible, and the variables and functions are respectively called

For static variables and static functions, using Java, C # classmates well understand the meaning of static.

The code is as follows:

functionObj () {} obj.a= 0;//Static VariablesObj.fn=function(){//static Functions} console.log (OBJ.A); //0Console.log (typeofOBJ.FN);//function            varo=NewOBJ (); Console.log (O.A); //undefinedConsole.log (typeofO.FN);//undefined

instance variables, functions

In object-oriented programming, in addition to some library functions, we still want to define some properties and methods at the time of object definition, which can be accessed after instantiation, and JavaScript can do so

The code is as follows:

functionObj () { This. a=[];//instance Variable                 This. fn=function(){//instance Method}} console.log (typeofOBJ.A);//undefinedConsole.log (typeofOBJ.FN);//undefined            varo=NewOBJ (); Console.log (typeofO.A);//ObjectConsole.log (typeofO.FN);//function

This can be achieved for the above purposes, however

functionObj () { This. a=[];//instance Variable                 This. fn=function(){//instance Method                }            }            varo1=NewOBJ (); O1.a.push (1); O1.fn={}; Console.log (o1.a); //[1]Console.log (typeofO1.FN);//Object            varO2=NewOBJ (); Console.log (o2.a); //[]Console.log (typeofO2.FN);//function

The above code runs exactly as expected, but it also illustrates a problem where a and FN are modified in O1 and not changed in O2 because the arrays and functions are objects, which are references

Type, this means that the properties and methods in O1 and O2 in the same name but not a reference, but rather a copy of the properties and methods defined by the Obj object.

This is not a problem for attributes, but it is a big problem for the method, because the method is doing exactly the same function, but two copies, if a function

Like there are thousands and instances of the method, then its every instance to maintain a copy of thousands of methods, which is obviously unscientific, this can be swollen to do, prototype came into being.

Prototype

Whenever a new function is created, a prototype property is created for the function based on a specific set of rules, by default the prototype property gets

A constructor (constructor) property, which is a pointer to the function where the prototype property is located, some around, write code,!

The code is as follows:

function Person () {            }

As you can see, the person object automatically gets the Prototyp property, and prototype is an object that automatically gets a constructor property that points to the

The person object.

When the constructor is called to create an instance, the instance will contain an internal pointer (many browsers with the pointer name __proto__) to the prototype of the constructor,

This connection exists between the instance and the prototype of the constructor, not between the instance and the constructor function.

The code is as follows:

function Person (name) {                this.name=name;            }            Person.prototype.printName=function() {                alert (this. Name);            }             var person1=New person (' Byron ');             var person2=New person (' Frank ');

The instance of person Person1 contains the Name property and automatically generates a __proto__ property that points to the prototype of the person who can access the prototype default

The Printname method of righteousness, probably like this.

Write a program test to see the prototype inside the property, method is able to share

functionPerson (name) { This. name=name; } Person.prototype.share=[]; Person.prototype.printName=function() {alert ( This. Name); }            varperson1=NewPerson (' Byron '); varPerson2=NewPerson (' Frank '); Person1.share.push (1); Person2.share.push (2); Console.log (Person2.share); //[up]

Sure enough In fact, when the code reads a property of an object, it performs a search, and the target is a property with the given name, and the search begins with the object instance, such as

If the attribute is found in the instance, it is returned if it is not found, and if it is not, the prototype object continues recursively prototype until it is found, as prototype.

Returns an error if the fruit is recursive to object. Similarly, if you define a property or function in an instance that has the same name as prototype, the prototype property or function is overwritten.

function Person (name) {                this.name=name;            }            Person.prototype.share=[];             var person=New person (' Byron ');            Person.share=0;             // 0 instead of prototype []

Constructing Simple objects

Of course prototype is not specifically defined to solve the problem above, but it solves the problem. By understanding this knowledge, we can build a scientific, high-efficiency object,

If you want the properties or functions of an instance object to be defined in prototype, if you want the properties or methods that each instance owns separately to be defined in this, you can pass the actual

To instantiate the parameter.

function Person (name) {                this.name=name;            }            Person.prototype.share=[];            Person.prototype.printName=function() {                alert (this. Name);            }

JavaScript Prototype Usage Introduction