In a paper read JS prototype and prototype chain (illustration)

Speak prototype, we should bear in mind the following points must first, which is the key to understanding a few key points of the prototype:

1, all references to types (array, function, object) can be freely extended attributes (other than null).

2, all have a reference type '_ _ proto_ _' attributes (also called implicit prototype, it is a general object).

3, all functions have a 'prototype' property (which is also called explicit prototype, it is also a general object).

4, all reference types, its '_ _ proto_ _' attribute points 'prototype' attribute of its constructor.

5, when trying to get properties of an object, this property if the object itself does not exist, then it will go to the '_ _ proto_ _' property (ie 'prototype' property of its constructor) to look for.

Then the points had finished, we understand these points to prototype and prototype chain.

Prototype
Let's look at a prototype example.

// This is the constructor
function Foo (name, Age) {
this.name = name;
this.age = Age;
}
/ * according to point 3, all functions have a prototype property, this property is an object
then according to points 1, all of the objects may be freely extended attribute
so there is the following written * /
Foo.prototype = {
// prototype object which have other properties
showname: function () {
the console.log ( "the I'm" + the this .name); // this is the time to look at what was called who performed this function
},
showAge: function () {
console.log ( "And the I'm" + this.age); // this is to look at what when executed who calls this function
}
}
var Fn = new new Foo ( 'Bob', 19)
/ * when trying to obtain properties of an object, this property if the object itself does not exist, it will go to its
constructor 'prototype' attribute to find * /
fn.showName (); // the I'm Bob
fn.showAge (); // And I'm 19


This is the prototype, it is well understood. So why use a prototype of it?

Imagine if we want to create a lot of objects by Foo (), if we write it like this:

function Foo(name,age){
this.name=name;
this.age=age;
this.showName=function(){
console.log("I'm "+this.name);
}
this.showAge=function(){
console.log("And I'm "+this.age);
}
}


So we created out of each object, which has showName and showAge method, which would take up a lot of resources.
The prototype is achieved by then only need to give the property assignment in the constructor function, and the method of writing in Foo.prototype property (this property is unique) inside. So that each object can use the prototype property inside showName, showAge method, and saving a lot of resources.

The prototype chain
to understand the prototype, so the prototype chain to better understand.

##### following words can help understand the prototype chain
according to point 5, when trying to obtain properties of an object, the object itself if this attribute is not present, then it will go to the constructor 'prototype' property to Search. And because it 'prototype' attribute is an object, so it also has a '_ _ proto_ _' property.

Then we look at an example:

// constructor
function Foo (name, Age) {
this.name = name;
this.age = Age;
}
Object.prototype.toString = function () {
// what the this is the time to look at who performed this function calls .
the console.log ( "the I'm" + + this.name "And the I'm" + this.age);
}
var Fn = new new Foo ( 'Bob',. 19);
fn.toString (); // the I'm Xiaoming the I'm. 19 And
the console.log (fn.toString === Foo.prototype .__ proto __ toString.); // to true

the console.log (Fn .__ proto__ === Foo.prototype) to true //
the console.log (Foo .__ proto __ === Object.prototype .prototype) to true //
console.log (Object.prototype .__ proto __ === null) // to true


Is not that strange? Let's analyze.

First, fn constructor is Foo (). So:
fn._ proto _ _ _ === Foo.prototype
and because Foo.prototype is an ordinary object, its constructor is Object, so:
Foo.prototype._ proto _ _ _ === Object.prototype
through the above code, we know this toString () method is Object.prototype inside, this method is called when the object itself does not exist, it will go up layer by layer, until the date null.


So when fn call toString (), JS fn did not find this approach, so in it went Foo.prototype find, or not find this method, then went to look for Object.prototype, locate, and then calling Object .prototype in toString () method.


This is the prototype chain, fn precisely because of the presence of the prototype chain of mechanisms to call the methods of Object.prototype.

In addition, when using the prototype, the general recommendation would need to be extended in a way to write the constructor's prototype property, avoid writing in _ _ proto _ _ property inside.
---------------------

Guess you like

Origin www.cnblogs.com/skzxcwebblogs/p/11273015.html