JavaScript prototype use introduction _javascript tips

Used JavaScript students are sure to prototype thunderclap piercing, but this is what it is a beginner mixed, only know that the function will have a prototype attribute, you can add a function for instance access, the other is not clear, recently read some The JavaScript Advanced program design, finally unveiled its mysterious veil.

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. In a JavaScript namespace article previously written, the function scope of JavaScript is mentioned, and variables and functions defined within a function cannot be accessed unless the interface is provided externally, which means that they become private variables and private functions.

Copy Code code as follows:

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

Copy Code code as follows:

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.

Copy Code code as follows:

function Obj () {

}

obj.a=0; static variables

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

Copy Code code as follows:

function Obj () {
This.a=[]; Instance variables
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

Copy Code code as follows:

function Obj () {
This.a=[]; Instance variables
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!

Copy Code code as follows:

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.

Copy 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 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

Copy Code code 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); [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.

Copy 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 []

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.

Copy Code code as follows:

function person (name) {
This.name=name;
}

Person.prototype.share=[];

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

Author: Salad Oil