Difference between prototype constructor and private property

Start by exploring the definition of a word prototype. I think it's important to keep this in mind when thinking about how new objects are created in JavaScript.

pro k type

noun

• the first, typical or preliminary model of something, especially a machine from which other shapes are designed or copied.

verb

• make a prototype (of a product).

A prototype is a model from which another shape will be copied.

When you create a new object in JavaScript, this is exactly what happens.

var obj = new MyObject();

      

        
        
        
      

    

There are many things going on in the above code, but in the context of the question, there are two things that matter:

• The prototype is applied to the new object.
• The MyObject function is called, with this
  
  a new object set.

With this knowledge in mind, let's take a look at the different forms of variable definition that you described:

function MyObject() {}
MyObject.myProperty = 'MyProperty';

      

        
        
        
      

    

It is important to understand that the functions themselves are objects in JavaScript. Therefore, it function MyObject

is an instance of an object for itself. In the second line, we set a property myProperty

on this function object.

Refer to the creation steps above and you will notice that it does not include applying the properties of the function object to a new instance of the object. It will only apply the prototype properties of the function object and then runs the function body with this

set to a new instance.

function MyObject() {
    this.myProperty = 'MyProperty';
}

      

        
        
        
      

    

Here the property myProperty

is set in a separate instance.

function MyObject() {}
MyObject.prototype.myProperty = 'MyProperty';

      

        
        
        
      

    

In this example, each new instance MyObject

will be assigned its own property myProperty

and value set to 'MyProperty'

. From there, each instance can change its own myProperty

to any of its values ​​without affecting the other.

function MyObject() {
    console.log('myProperty', this.myProperty); //Will output 'Outside constructor.'
    this.myProperty = 'Inside constructor.';
    console.log('myProperty', this.myProperty); //Will output 'Inside constructor.
}

MyObject.prototype.myProperty = 'Outside constructor.';

      

        
        
        
      

    

The example above shows how it is myProperty

first applied from the prototype and then overwritten by the value in the function being executed.

Let's look at an example with all the forms you specified:

var output1 = document.getElementById('output1'),
    output2 = document.getElementById('output2'),
    output3 = document.getElementById('output3');

function MyObject(myProperty) {
  this.myProperty = myProperty;
}

MyObject.myProperty = 'Function property.';

MyObject.prototype.myProperty = 'Prototype property.';


var obj = new MyObject('Constructor property');

output1.innerHTML = obj.myProperty;
output2.innerHTML = MyObject.myProperty;
output3.innerHTML = MyObject.prototype.myProperty;
      

        
        
        
      

    

<div id="output1"></div>
<div id="output2"></div>
<div id="output3"></div>
      

        
        
        
      

    

In the example above, you will see how each can be referenced. Now let's take a closer look at it. See what happens to your Function Property when it is set from two different object instances:

var output1 = document.getElementById('output1'),
    output2 = document.getElementById('output2');


function MyObject() {
  //We are concatenating a string to the end of the property on each function call.
  MyObject.myProperty += ' test ';
}

MyObject.myProperty = 'Function property.';


var obj1 = new MyObject();
var obj2 = new MyObject();

output1.innerHTML = MyObject.myProperty;
output2.innerHTML = MyObject.myProperty;
      

        
        
        
      

    

<div id="output1"></div>
<div id="output2"></div>
      

        
        
        
      

    

The above code demonstrates how function level property is efficiently allocated. This is because it is not part of every instance. It is part of a functional object.

Here, I'll show you the process that goes with the operator new

, without actually using the operator new

:

var output = document.getElementById('output');


//Let have an object that has a prototype property with some properties:
var MyPrototypeObject = {
  prototype: {
    myPrototypeProperty: 'Prototype property'
  }
};

//Let specify a function that will be used as a constructor:
function MyConstructorFunction() {
  this.myInstanceProperty = 'Instance property';
}


//First, new creates an object
var obj = {};

//Next, it applies all the properties from the prototype. We are using the MyPrototypeObject prototype property for this example
for (var key in MyPrototypeObject.prototype) {
  var val = MyPrototypeObject.prototype[key];
  
  //Set the same property on the new object.
  obj[key] = val;
}

//Now the prototype has been applied, let apply the constructor function that was called.
MyConstructorFunction.call(obj); //This calls MyConstructorFunction with this set to obj.

output.innerHTML = 'myPrototypeProperty: ' + obj.myPrototypeProperty + '<br>' + 'myInstanceProperty: ' + obj.myInstanceProperty;
      

        
        
        
      

    

<div id="output"></div>