About constructor and prototype in JS

I have been confused about constructor and prototype while learning JS object-oriented. I have read some blogs and books and thought I have understood them. The record is as follows:

We all know that JavaScript has a function. It is generally called a function. For example, the following code:

function Person(name){  alert(name);}Person('js');//js

 

In the above Code, the performance of person is indeed no different from that of general functions. Next, let's look at the following code:

function Person(name){   this.name=name;   this.showMe=function()        {           alert(this.name);        }};var one=new Person('JavaScript');one.showMe();//JavaScript

 

Many people have seen the long-overdue new operator, so people is called "class", but there is no keyword class, and it is a bit stubborn to call it "class. Therefore, the second argument is "person" as the class constructor. None of these concepts seem to be wrong. This may be because everyone has learned the traditional object-oriented language (C ++, C #, Java, etc ), there is also a mindset. In order to make JavaScript object-oriented, we need to find the shadows of the traditional object-oriented language in JavaScript.

However, according to Javascript,The person defined by function is an object, and it is also a special object, there is an important difference between the objects defined using function and the objects generated using the new operator. The difference is that the function-defined object has a prototype attribute, and the object generated with new does not have this prototype attribute.

The prototype property points to another prototype object. Note that the prototype property is different from the prototype object. Another constructor attribute exists in the prototype object. This constructor attribute also points to a constructor object, and this constructor object is exactly the function itself.

A little dizzy. See:

If you don't believe it, you can see the following code:

function Person(name){   this.name=name;   this.showMe=function()        {           alert(this.name);        }};var one=new Person('js');alert(one.prototype)//undefinedalert(typeof Person.prototype);//objectalert(Person.prototype.constructor);//function Person(name) {...};

 

The code above proves that the one object does not have the prototype attribute.

Let's look at the 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 is nothing strange about this result. from (); // I come from prototype ., this result is a bit strange.

 

To explain this result, we need to carefully study the new operator. var one = new person ('js'); the execution process of this statement can be divided into the following statements:

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

 

According to the book "enlightened JavaScript", the process of creating objects in the new form can be divided into three steps:
The first step is to create a new object (called );

Step 2: Set the built-in prototype object of this object (a) to the prototype object referenced by the constructor (person) prototype attribute;

The third step is to use this object (a) as the this parameter to call the constructor (that is, person) and complete initialization such as member settings.

In the second step, a new term is a built-in prototype object. Note that this new term is not the same as the prototype object. to distinguish it from inobj, inobj points to the prototype object of the person function. Any attribute or function that appears in the person prototype object can be directly used in the one object. This is the prototype inheritance in JavaScript.

Dizzy again, right!

In this way, one object can directly access any attributes and methods in the person prototype object through the built-in prototype object inobj. This explains why one of the above Code can access the form function. Because the prototype object has a constructor attribute, one can directly access the constructor attribute.

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 is nothing strange about this result. from (); // I come from prototype ., this result is a bit strange. Alert (one. constructor); // function person (name ){...} alert (person. prototype. constructor); // function person (name ){...}

 

Next, let's look at how inheritance is implemented.

function Person(name){   this.name=name;   this.showMe=function()        {           alert(this.name);        }};Person.prototype.from=function(){  alert('I come from prototype.');}function SubPerson(){}SubPerson.prototype=new Person();var subOne=new SubPerson();subOne.from();//I come from prototype.alert(subOne.constructor);//function Person(name) {...};alert(SubPerson.prototype.constructor);//function Person(name) {...};

 

The inheritance implementation is very simple. You only need to set prototype of the subclass as an object of the parent class. Note that this is an object!

So what is the principle of inheritance through the prototype attribute? Let's take a look at the graphic instructions first, and then write the code for verification.

Note: The red box links the Child class to the parent class. This should be the legendary prototype chain. The following code is used for verification.

Function person (name) {This. name = Name; this. showme = function () {alert (this. name) ;}}; person. prototype. from = function () {alert ('I come from prototype. ');} var father = new person ('js'); // For the following demonstration, the showme method is used. js parameters are used. In actual scenarios, alert (father) is used. constructor); // view the constructor. The result is: function person (name ){...}; function subper () {} subper. prototype = Father; // note that subper. prototype. constructor = subper; var son = new subper (); son. showme (); // jsson. from (); // I come from prototype. alert (father. constructor); // function subper (){...} alert (son. constructor); // function subper (){...} alert (subper. prototype. constructor); // function subper (){...}

 

Based on the prototype chain and code results, I want to understand why prototype can be used for implementation.

In JavaScript.

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/niuyongjie/archive/2009/11/15/4810835.aspx