On the constructor and prototype in JS

Initial understanding of Object.constructor in JS:

In the learning of JS object-oriented process, has been constructor and prototype feel very confused, read some blogs and books, feel that they understand, now recorded as follows:

We all know that there is a function thing in JS. Generally people call it a function. Like the following code

function person (name)
{
alert (name);
}
Person (' JS '); Js

In the above code, the person's performance does not differ from the normal function, and then look at the following code

Code function person (name)
{
this. Name = name;
this. showMe = function ()
{
Alert (this. name);
}
};
var one = new person (' JavaScript ');
One.showme (); Javascript

Many people see a long absence of the new operator, so called person as "class", but there is no key word class appearance, feel called "class" a bit reluctantly. We then retire to the constructor of the class that is called person second. These concepts do not seem to be wrong, the reason for such a situation, may be because we have learned the traditional object-oriented language (C++,c#,java, etc.), there is a mind-set. To make JavaScript object-oriented, find the shadow of the traditional object-oriented language in JavaScript. However, according to JavaScript, the person defined by the function is an object and is a very special object, and there is an important difference between the object that uses the function definition and the object that is generated using the new operator. The difference is that the function-defined object has a prototype attribute, and the object created using new does not have the prototype attribute.

The prototype attribute also points to a prototype object, noting that the prototype property and prototype object are two different things, pay attention to the difference. There is another constructor attribute in the prototype object, and the constructor attribute also points to a constructor object, and this constructor object is exactly the function itself.

A little dizzy, look at the picture bar:

Do not believe you can look at the following code:

Code function person (name)
{
this. Name = name;
this. showMe = function ()
{
Alert (this. name);
}
};

var one = new person (' JS ');

Alert (one.prototype)//undefined
Alert (typeof Person.prototype); Object
alert (Person.prototype.constructor); function person (name) {...};

The code above proves that one object has no prototype attribute.

Let's look at the code:

Code function person (name)
{
this. Name = name;
this. showMe = function ()
{
Alert (this. name);
}
};

Person.prototype.from = function ()
{
Alert (' I come from prototype. ' );
}

var one = new person (' JS ');

One.showme (); JS, there's nothing weird about this result.
One.from (); I come from prototype. The result is a little odd.

To explain this result, you need to look at the new operator. Var one=new person (' JS '); The procedure executed by this statement can be divided into the following statements:

var one = {};
Person.call (one, ' JS ');

The process of creating objects in new form can actually be divided into three steps, according to the reading through JavaScript:

The first step is to create a new object (called a bar);

In the second step, the prototype object built into the object (A) is set to the stereotype object referenced by the constructor (the person) prototype property;

The third step is to invoke this object (A) as the This parameter to call the constructor (that is, the person) and complete the initialization of the member settings.

The second step in the emergence of a term is a built-in prototype object, note that this word is not the same as the prototype object, in order to distinguish I call it inobj,inobj point to the prototype object of the function person. Any properties or functions that appear in the prototype object of person can be used directly in one object, and this is the prototype in JavaScript that inherits.

Dizzy again, above the picture bar.

Such a one object can directly access any of the properties and methods in the person's prototype object through the built-in prototype object inobj. This also explains why one can access the form function in the above code. Because there is a constructor property in the prototype object, one can also access the constructor property directly.

Code function person (name)
{
this. Name = name;
this. showMe = function ()
{
Alert (this. name);
}
};

Person.prototype.from = function ()
{
Alert (' I come from prototype. ' );
}

var one = new person (' JS ');

One.showme (); JS, there's nothing weird about this result.
One.from (); I come from prototype. The result is a little odd.
alert (one.constructor); function person (name) {...}
alert (Person.prototype.constructor); function person (name) {...}