JavaScript prototype attributes detailed _javascript tips

Source: Internet
Author: User
Tags instance method

Each function has a prototype property that refers to a reference to an object called a prototype object that contains methods and properties shared by the function instance, which means that the function is used as a constructor call (called with the new operator). Newly created objects inherit properties and methods from the prototype object.

Private variables, functions
in specific said prototype before saying a few related dongdong, can better understand the design intention of prototype. A JavaScript namespace blog that was previously written mentions the function scope of JavaScript, and variables and functions defined within a function that do not provide an external interface will not be accessible externally, that is, private and private.

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

So that variable A and function fn cannot be accessed outside of the function object obj, they become private and can only be used within obj, even though instances of the function obj still do not have access to these variables and functions

var o=new Obj ();
   Console.log (O.A); Undefined
   console.log (O.FN);//undefined

static variables, functions

When you define a function, you pass "." The properties and functions that are added to it are still accessible through the object itself, but their instances are not accessible, and such variables and functions are called static variables and static functions, and the students who have used Java and C # are well aware of the static meaning.

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 attributes and methods at the same time as the 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 achieve the above purpose, 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 at the same time it also shows a problem, in the O1 modified A and FN, but not in the O2, because the array and function are objects, is a reference type, which shows that the properties and methods in O1 and O2 properties and methods, although the same name but not a reference, Instead, a copy of the properties and methods defined for the Obj object.

This has no problem with attributes, but it's a big problem for the method, because the method is doing exactly the same function, but there are two copies, if a function object has thousands and instance methods, then each of its instances to maintain a copy of thousands of methods, which is obviously unscientific, this can be swollen 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 obtains a constructor (constructor) property by default. This property is a pointer to the function of the prototype property, some around the ah, write code, the above image!

function person () {
    
   }


According to the figure above, you can see that the person object automatically obtains the Prototyp property, and prototype is also an object that automatically obtains a constructor property that points to the person object.

When a constructor is invoked to create an instance, the instance contains an internal pointer (many browsers with the pointer name __proto__) pointing 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 Person1 of person 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 within the prototype.

Write section program test to see prototype properties, methods are 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); [1,2]

Sure In fact, when the code reads a property of an object, it performs a search, the target is a property of the given name, the search begins with the object instance, returns if it is found in the instance, and if not, finds prototype. If it is still not found, continue to recursively prototype the prototype object until it is found, returning an error if recursion to object is still not present. Similarly, if you define a property or function with the same name as prototype in the instance, 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 []

Construct a Simple Object

Of course, prototype is not specifically defined for solving the above problems, but it solves the above problem. With 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 by using the constructor if you want the property or method that each instance has individually defined into this.

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


The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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.