All methods must be defined via prototype?

As an react devloper, you might be familiar with class property, since we need to bind the instance this to make sure methods could access instance. After a while, some newbie ask you why the tutorial book said class method will be defined via prototype…

Dad: Let’s me tell you, all methods you inherit should be on the prototype, not the this…don’t forget it…

Prototype Inheritance

Before ES2015, there is not class to use, but we could still inherit prototype,.

Actually, the transpile results of modern class are also implemented by using prototype.

function Family(){
  // constructor here
  this.member = { me: "Dennis" };
}
const family = new Family(); // It'll run constructor and return instance 
console.log(family.memeber); // {me : "Dennis" }

Define methods via Prototype

As far as I know, there are two way to define the method, but most of the JavaScript engineer (maybe includes you) will recommend define it via prototype.

function Family(){
  this.member = { me: "Dennis" };
}
Family.prototype.showMe = function(){
 console.log(this.member.me);
}
const family = new Family();
family.showMe(); // Dennis

Why not just define in the constructor function?

If we define the method to this in constructor function, what will be going on?

The answer is really clear, method function will be re-create again and agian when instance be constructed.

It’s a explict performance issue, and it’ll create / initial same function more times.

How’s the method in ES6 class

Simple class with a method, it will be transpile from

class Test {
 method1() {
  console.log(1);
 }
}

to

var Test = /** @class */ (function () {
 function Test() {
 }
 Test.prototype.method1 = function () {
  console.log(1);
 };
 return Test;
}());

See the result on typescript playground.

And everything looks ok to you, just like your father said, class methods are all on the prototype, but…

How’s define the method using class property

Guess what is the transpiled result in class property like:

class Test {
 method2 = () => {
  console.log(2);
 }
}

The answer is that the method will be transpile and initial / create on constructor.

var Test =(function () {
function Test() {
  this.method2 = function () {
    console.log(2);
  };
 }
 return Test;
}());

See the result on typescript playground.

You actually use this way to create more and more method in React component, so in fact, it’s a little bit different from define method and bind in constructor!

You’ve might used class field to replace binding in constructor

class Test {
  constructor() {
    this.name = "Dennis"; 
    this.onClickHandler = this.onClickHandler.bind(this);
  }
  onClickHandler() {
    console.log(this.name);
  }
}

to

class Test {
  constructor() {
    this.name = "Dennis"; 
  }
  onClickHandler = () => {
    console.log(this.name);
  }
}

And you just know it, these two are different, when you use class field instead binding method, it’s just like you define method in constructor!

I need to say that it’s not a big problem.

In normal case, we do not inherit the component class, so every methods you define here which is the tail of prototype.

Coclusion

You can call your dad to explain he’s might wrong.

Actually, the idea of where to define the methods is always introduced in the tutorial book, and I just found that a newbie ask it in the group.

I’m inspired from that question thread, and I figure out that some of the veteran developers were still missing about.

They tell newbie “Methods should be defined via prototype definitely!”, but they also using class field in their project…

What I want to say is there is no definitely answer about it, we knew function re-create would lead to perfomance decrease, but if your case is just one instance of the class, I think that it’s must ok if you want to define in constructor like that.