JavaScript Prototype Usage Introduction

Source: Internet
Author: User
Tags instance method

JavaScript prototype using the introduction of 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 read some JavaScript Advanced program design, finally unveiled its mystery used JavaScript students are sure to prototype thunderclap piercing, but this is what is a beginner consensus , just know that the function will have a prototype property,
You can add functions for instance access, others are not clear, recently read 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.
In other words, 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 a few related east, you can better understand the design intent of prototype.
Previously written in a JavaScript namespace article referred to 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. Copy the code code as follows: 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 an instance of the function obj still cannot access these variables and functions copy code code as follows: Var o=new Obj (); Console.log (O.A); Undefined Console.log (O.FN); Undefined static variables, functions when a function is defined and passed "." 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 #. Copy the code code as follows: 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 the object definition, can be accessed after instantiation, JavaScript can also do so copy code code as follows: 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 can do this, but the copy code code is as follows: function Obj () {this.a=[];//instance variable this.fn=function () {//instance Party 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); The code above is running exactly as expected, but it also illustrates a problem where a and FN are modified in O1 and not changed in O2, because arrays and functions are objects, reference types,
This means that the properties and methods in O1 and O2 have 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 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, 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, 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,! Copy the code code as follows: function person () {}image According to the person object will automatically get the Prototyp property, and prototype is an object, will automatically get a constructor property, which is pointing to P The Erson 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 prototype of the instance and the constructor,
Rather than between the instance and the constructor. Copy the code code 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 Imageperson instance Person1 contains the Name property and automatically generates a __proto__ property that points to the prototype of the person who can access the prototype method defined in Printname. That's probably what it looks like.



Image Write segment program test look inside the prototype property, method is able to share the copy code code is as follows: 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); [to] be sure! 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, and returns if the attribute is found in the instance.
If none is found, then the prototype object continues recursively prototype if it is not located, and returns an error if recursive to object is not prototype until it is found.
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. Copy the code code as follows: 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 [] constructs a simple object of course prototype is not specifically defined to solve the problem above, but solves the above problem. By understanding this knowledge, you can build a scientific, reusable 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 instantiation parameters through the constructor. Copy the code code as follows: function person (name) {this.name=name; } person.prototype.share=[]; Person.prototype.printname=function () {alert (this.name); }

JavaScript Prototype Usage Introduction

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.