JavaScript plain and prototype chain detailed __java

JavaScript Plain and prototype chain detailed

Submission: Junjie font: [Increase   Decrease] Type: Reprint time:2015-02-11  I want to comment on this article mainly introduces JavaScript Central and prototype chain, this article explains the private variables and functions, static variables and functions, instance variables and functions, Prototype and prototype chain of basic concepts, need friends can refer to under <iframe id= "Iframeu2261530_0" src= "http://pos.baidu.com/pcmm?sz=680x200&amp;rdid= 2261530&amp;dc=2&amp;di=u2261530&amp;dri=0&amp;dis=0&amp;dai=2&amp;ps=0x0&amp;coa= At%3d3%26rsi0%3d680%26rsi1%3d200%26pat%3d6%26tn%3dbaiducustnativead%26rss1%3d%2523ffffff%26conbw%3d1%26adp%3d1 %26ptt%3d0%26titff%3d%2525e5%2525be%2525ae%2525e8%2525bd%2525af%2525e9%25259b%252585%2525e9%2525bb%252591% 26titfs%3d14%26rss2%3d%2523000000%26titsu%3d0%26ptbg%3d90%26piw%3d0%26pih%3d0%26ptp%3d0&amp;dcb=baidu_ssp_ Define&amp;dtm=html_post&amp;dvi=0.0&amp;dci=-1&amp;dpt=none&amp;tsr=0&amp;tpr= 1474878500512&amp;ti=javascript%e4%b8%ad%e5%8e%9f%e5%9e%8b%e5%92%8c%e5%8e%9f%e5%9e%8b%e9%93%be%e8%af%a6%e8 %a7%a3_%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86_%e8%84%9a%e6%9c%ac%e4%b9%8b%e5%ae%b6&amp;ari=2&amp;dbv=2 &amp;drs=1&amp;pcs=1347x638&amp;pss=1347x15554&amp;cfv=0&amp;cpl=6&amp;chi=1&amp;cce=true&amp; cec=gbk&amp;tlm=1473124338&amp;rw=638&amp;ltu=http%3a%2f%2fwww.jb51.net%2farticle%2f61014.htm& Amp;ltr=http%3a%2f%2fwww.jb51.net%2farticle%2f55540.htm&amp;ecd=1&amp;psr=1366x768&amp;par= 1366x728&amp;pis=-1x-1&amp;ccd=24&amp;cja=false&amp;cmi=8&amp;col=zh-cn&amp;cdo=-1 &amp;tcn=1474878501&amp;qn=84a5a8f34388a294&amp;tt=1474878500403.522.524.528 "width=" 680 "height=" "Align=" Center,center "vspace=" 0 "hspace=" 0 "marginwidth=" 0 "marginheight=" 0 "scrolling=" no "frameborder=" 0 " Allowtransparency= "true" style= "Display:block"; border-width:0px; border-style:initial; Vertical-align:bottom; margin:0px; " ></iframe>

Each object in JavaScript has a built-in attribute prototype,javascript the prototype attribute of the object is interpreted as a reference to the object type prototype. It means that the prototype property holds a reference to another JavaScript object, which acts as the parent object of the current object.
Copy code code as follows:
A.prototype = new B ();

Understanding prototype should not confuse it with inheritance. A's prototype is an example of B, and you can understand that a clones all the methods and attributes in B. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: the prototype of A is an instance of B, and the prototype of B is also an instance of a.

Keep looking at the following analysis:

private variables and functions

Variables and functions defined within a function, if not externally provided, are inaccessible to the outside, which is the private variables and functions of the function.
Copy code code as follows:
<script type= "Text/javascript" >
function Box () {
var color = "Blue";//Private variable
var fn = function ()//Private function
{

}
}
</script>

This makes the variable color and FN inaccessible outside of the function object box, and they become private:
Copy code code as follows:
var obj = new Box ();
alert (obj.color);//Eject undefined
alert (OBJ.FN);/ibid.

static variables and functions

When you define a function, you pass the dot number "." 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, respectively.

Copy code code as follows:
<script type= "Text/javascript" >
function Obj () {};

Obj.num = 72;//static variable
Obj.fn = function ()//static function
{

}

alert (obj.num);//72
Alert (typeof Obj.fn)//function

var t = new Obj ();
alert (t.name);//undefined
Alert (typeof T.fn);//undefined
</script>

instance variables and functions

In object-oriented programming, in addition to some library functions, we still want to define some attributes and methods at the same time, the instantiation can be accessed, JS can do so
Copy code code as follows:
<script type= "Text/javascript" >
function Box () {
This.a=[]; Instance variables
This.fn=function () {//instance method

}
}

Console.log (typeof box.a); Undefined
Console.log (typeof Box.fn); Undefined

var box=new box ();
Console.log (typeof box.a); Object
Console.log (typeof Box.fn); function
</script>

Add new methods and properties for instance variables and methods
Copy code code as follows:
<script type= "Text/javascript" >
function Box () {
This.a=[]; Instance variables
This.fn=function () {//instance method

}
}

var box1=new Box ();
Box1.a.push (1);
box1.fn={};
Console.log (box1.a); [1]
Console.log (typeof Box1.fn); Object

var box2=new Box ();
Console.log (box2.a); //[]
Console.log (typeof Box2.fn); function
</script>

A and FN were modified in the box1. There is no change in box2, because arrays and functions are objects and reference types, which indicates that properties and methods in Box1 and methods in Box2 have the same name but are not a reference, but rather a copy of the properties and methods defined by the box 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.

Basic Concepts

Each function we create has a prototype attribute, which is a pointer to an object that contains properties and methods that can be shared by all instances of a particular type. Prototype, then, is the prototype object of that object instance created by calling the constructor.

The advantage of using a prototype is that it allows the object instance to share the properties and methods it contains. That is, you do not have to add the definition object information to the constructor, but you can add the information directly to the prototype. The main problem with constructors is that each method is created in each instance.

In JavaScript, there are two types of values, original values, and object values. Each object has an internal attribute prototype, which we usually call a prototype. The value of a stereotype can be either an object or null. If its value is an object, then the object must also have its own prototype. This creates a linear chain, which we call a prototype chain.

meaning

Functions can be used as constructors. In addition, only functions have prototype properties and can be accessed, but object instances do not have this property, and there is only one internal inaccessible __proto__ property. __proto__ is a mysterious link in an object that points to the relevant prototype. According to the standard, __proto__ is not public, that is, a private property, but the Firefox engine exposed him to become a common attribute, we can access and set up.
Copy code code as follows:
<script type= "Text/javascript" >
var Browser = function () {};
Browser.prototype.run = function () {
Alert ("I ' m gecko,a kernel of Firefox");
}

var Bro = new Browser ();
Bro.run ();
</script>

When we call the Bro.run () method, because the bro does not have this method, he will go to his __proto__ to find, that is, Browser.prototype, so finally execute the run () method. (here, the first letter of a function represents a constructor to differentiate between ordinary functions)

When a constructor is invoked to create an instance, the instance internally contains an internal pointer (__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.
Copy code code as follows:
<script type= "Text/javascript" >
function person (name) {//constructor
This.name=name;
}

Person.prototype.printname=function ()//prototype object
{
alert (this.name);
}

var person1=new person (' Byron ');//Instantiated Object
Console.log (person1.__proto__);//person
Console.log (person1.constructor)/I'll try it out.
Console.log (Person.prototype);//point to the prototype object person
var person2=new person (' Frank ');
</script>

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 within the prototype, presumably this way:

Move on 58 with the city first compensation and pay is guaranteed. "Click in" to provide various types of vehicle prices Unified Professional unit/residential move 24 hours of the nearest service moved 58 let you worry and effort. View

Each JavaScript function has a prototype attribute that references an object that is a prototype object. When the prototype object is initialized, it is empty, and we can customize any properties and methods in it, which are inherited by the object created by the constructor.

So, here's the problem. What is the relationship between a constructor, an instance, and a prototype object?

differences between constructors, instances, and prototype objects

An instance is created from a constructor function. The instance is created with the constructor attribute (pointing to the constructor) and the __proto__ attribute (pointing to the prototype object).

There is a prototype property in the constructor, which is a pointer to its prototype object.

There is also a pointer (constructor property) within the prototype object pointing to the constructor: Person.prototype.constructor = person;

Instances can access properties and methods defined on a prototype object.

Here Person1 and Person2 are examples, and prototype is their archetypal object.

One more chestnut:
Copy code code as follows:
<script type= "Text/javascript" >
function Animal (name)//accumulation constructor
{
THIS.name = name;//Set Object properties
}

Animal.prototype.behavior = function ()///Prototype Add behavior method to the base class constructor
{
Alert ("This is a" +this.name);
}

var Dog = new Animal ("Dog");//Create Dog Object
var cat = new Animal ("cat");//Create Cat Object

Dog.behavior ()///Call behavior method directly via Dog object
Cat.behavior ();//output "This is a cat"

alert (dog.behavior==cat.behavior);//output true;
</script>

It can be seen from the results of the program running that the method defined on the prototype of the constructor can indeed be called directly through the object, and that the code is shared. (try removing the prototype attribute from the Animal.prototype.behavior to see if it can be run.) Here, the prototype property points to the animal object.

Array Object Instance

Then look at an instance of the array object. When we create array1 this object, the object model that Array1 actually has in the JavaScript engine is as follows:
Copy code code as follows:
var array1 = [1,2,3];