JavaScript prototype Learning

function foo (A, B, c) {return a*b*c;} Alert (foo.length), alert (typeof foo.constructor), alert (typeof Foo.call); alert (typeof foo.apply); alert (typeof Foo.prototype);

For the above code, after running in the browser you will find:

1. Length: Provides the number of arguments for a function
2. Prototype: is an object
3. All three of them are function.

and for any declaration of a function, it will have the 5 properties (methods or properties) described above.

Used JavaScript students are sure to prototype thunderclap piercing, but this is what is a beginner consensus, only know that the function will have a prototype attribute, you can add a function for instance access, others are not clear, recently looked at some JavaScript advanced Programming, finally unveiled its mystery.

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, that is, when the 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 blog mentions the function scope of JavaScript, variables and functions defined within the function if the interface is not provided externally, then the external will be inaccessible to, that is, private variables and private functions.

function Obj () {                var a=0;//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 these variables and functions

var o=new Obj ();            Console.log (O.A); Undefined            console.log (O.FN);//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 instance is not accessible, and such variables and functions are called static variables and static functions, which are well understood by the students of Java and C #.

function Obj () {                            }                        obj.a=0;//static variable                        obj.fn=function () {//static function                                }                        console.log (OBJ.A);//0            Console.log (typeof Obj.fn); function                        var o=new Obj ();            Console.log (O.A); Undefined            console.log (typeof O.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

function Obj () {                this.a=[];//instance variable                this.fn=function () {//instance method                                    }            }                        Console.log (typeof obj.a); Undefined            console.log (typeof Obj.fn);//undefined                        var o=new Obj ();            Console.log (typeof o.a); Object            Console.log (typeof O.fn);//function

This can be achieved for the above purposes, however

function Obj () {                this.a=[];//instance variable                this.fn=function () {//instance method                                    }            }                        var o1=new Obj ();            O1.a.push (1);            o1.fn={};            Console.log (o1.a); [1]            Console.log (typeof O1.fn);//object            var o2=new Obj ();            Console.log (o2.a); []            Console.log (typeof O2.fn);//function

The above code runs exactly as expected, but it also illustrates a problem where a and FN are modified in O1, but not changed in O2, since arrays and functions are objects and reference types, which means that the properties and methods in O1 and the properties and methods in the O2 have the same name but are not a reference. Instead, a copy of the properties and methods defined by the Obj object.

This is not a problem for the property, but for the method of the problem is very large, because the method is to do exactly the same function, but two copies, if a function object has thousands and instance methods, then each instance of it to maintain a copy of thousands of methods, which is obviously unscientific, this can be swollen to do it, Prototype was born.

Prototype

Whenever a new function is created, a prototype property is created for the function based on a specific set of rules, and by default the prototype property is given a constructor (constructor) property by default. This property is a pointer to the function where the prototype property is located, some around, write code,!

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 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, which exists between the instance and the prototype of the constructor, not between the instance and the constructor.

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 Printname method defined in prototype, presumably this way.

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

function person (name) {                this.name=name;            }                        Person.prototype.share=[];                        Person.prototype.printname=function () {                alert (this.name);            }                        var person1=new person (' Byron ');            var person2=new person (' 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, the target is a property with the given name, the search begins with the object instance, if the attribute is found in the instance, and if not, finds the prototype, If it is still not found, continue to recursively prototype the prototype object until it is found, and if recursive to object still does not return an error. 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;                        Console.log (Person.share); 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, you can build a scientific, reusable object, and if you want the properties or functions of an instance object to be defined in prototype, you can pass the instantiation parameter through the constructor if you want the property or method that each instance has to be defined in this.

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

JavaScript prototype Learning