Discussion on the method of js constructor and prototype prototype

The case where the method is written in the constructor is referred to as an in-function method for short, and the case where the method is written on the prototype property is referred to as an prototype method for short.

Methods in functions: We can access private variables in functions by using methods in functions. If the objects we come out through constructor new need us to operate private variables in constructors, we should consider using methods in functions at this time.

Methods on • prototype: When we need to create a large number of objects through one function, and these objects have many methods; At this point, we should consider adding these methods to the prototype of the function. In this case, the memory consumption of our code is relatively small.

In practical application, these two methods are often used in combination; So we need to first understand what we need, and then choose how to use it

//  Constructor A
function A(name) {
  this.name = name || 'a';
  this.sayHello = function() {
    console.log('Hello, my name is: ' + this.name);
  }
}

//  Constructor B
function B(name) {
  this.name = name || 'b';
}
B.prototype.sayHello = function() {
  console.log('Hello, my name is: ' + this.name);
};

var a1 = new A('a1');
var a2 = new A('a2');
a1.sayHello();
a2.sayHello();

var b1 = new B('b1');
var b2 = new B('b2');
b1.sayHello();
b2.sayHello();

Write two constructors, the first is A, this constructor contains a method sayHello; The second is the constructor B, We write the method sayHello on the prototype property of the constructor B. We write the method inside the constructor, Increases the cost of initializing one object through the constructor, Writing methods on the prototype property effectively reduces this cost. You may think that calling methods on an object is much faster than calling methods on its prototype chain, but this is not the case. If you don't have many prototypes on your object, their speed is actually about the same

In addition, one place to pay attention to:

First of all, if you define a method on the prototype property of a function, keep in mind one point. If you change a method, the method of all objects generated by this constructor will be changed.

Another point is the problem of variable promotion. We can look at the following code a little:

func1(); //  Errors will be reported here , Because when the function executes, ,func1 Has not been assigned a value . error: func1 is not a function
var func1 = function() {
  console.log('func1');
};

func2(); //  This will be executed correctly , Because the declaration of the function will be promoted .
function func2() {
  console.log('func2');
}

With regard to object serialization, the attributes defined on the prototype of the function will not be serialized. You can see the following code:

function A(name) {
  this.name = name;
}
A.prototype.sayWhat = 'say what...';

var a = new A('dreamapple');
console.log(JSON.stringify(a));

We can see that the output is {"name": "dreamapple"}