adding function in prototype versus declaring it as variable in OOP Javascript

Question

What is the advantage or different adding a function onto the prototype object versus simply declaring it on the constructor's variable?

this is the same, this is how we call Person

const James = new Person('James')
James.greet()

Adding greet to prototype object

const Person = name => {
  this.name = name
}
Person.protoype.greet = () => console.log(`my name is ${this.name}!`)

Adding greet to constructor

const Person = name => {
  this.name = name
  this.greet = () => console.log(`my name is ${this.name}!`)
}

Does adding greet to constructor make duplicate of function when we call Person multiple times? I know the disavatange of object method have this problem, for example

const Person = () => ({
  name: '',
  greet: () => console.log(`my name is ${this.name}!`)
})
const James = Person('James') //greet copy 1
James.greet()
const Alice = Person('Alice') //greet copy 2
Alice.greet()

`Does adding greet to constructor make duplicate of function when we call Person multiple times?` Yes. Every time a script runs across the `function` keyword (or `=>`), it will create a new function. Better to have one single function all class members reference than to have tons of identical functions. — CertainPerformance, Apr 17 '18 at 02:25
so you're discouraging `Adding greet to constructor` and use `Adding greet to prototype object` ?. As I know prototype is a shared function, so any new instance won't cause memory leak if we have tons of instance. — Casa Lim, Apr 17 '18 at 02:27
Exactly. I'm sure there are many questions about this already. — CertainPerformance, Apr 17 '18 at 02:27
This is a duplicate, it was asked just a couple of days ago… just need to find a good answer. — RobG, Apr 17 '18 at 02:28
... `var a = new Person("a"), b = new Person("b");` adding `greet` it to prototype: `a.greet === b.greet => true` (only one function shared by all instances of `Person`) whereas adding it in the constructor: `a.greet === b.greet => false` (each instance gets its own copy of `greet` which is redundant and wasteful). — ibrahim mahrir, Apr 17 '18 at 02:28
@RobG I think i know the answer, just want to double confirm. I see, I even make the `object way` in the last part of my question to verify something. — Casa Lim, Apr 17 '18 at 02:29
A constructor is really a function until you call `new` on it, then in becomes it's own separate Object. An Object Literal is already an Object. `constructor.prototype.greet =` affects every `new` instance, which could be a problem or a blessing. — StackSlave, Apr 17 '18 at 02:40

score 1 · Answer 1 · edited Apr 17 '18 at 02:34

1

const Person = name => ({
  this.name = name
  this.greet = () => console.log(`my name is ${this.name}!`)
})

When you have it as part of your constrcutor, for every new instance , a copy of name and greet will be created.

Instead when you add it to prototype , only once the method will be created on prototype and we can reuse it

edited Apr 17 '18 at 02:34

ibrahim mahrir

31,174
5
48
73

answered Apr 17 '18 at 02:29

sridhar..

1,945
15
19

xianshenglu · Accepted Answer · 2018-04-17T02:36:40.497

Does adding greet to constructor make duplicate of function when we call Person multiple times?

Yes.While

Adding greet to prototype object

can avoid above problems.

And function added in the constructor exists in the instance while function added in the prototype exists in the prototype.

So,you can add commom function in the prototype and custom function in the constructor

or normally we don't add custom function in the constructor.

When needed,we add custom function in the instance or add custom function in the prototype

example:

class Person {
  constructor(arg) {
    this.name = arg
    this.customSayName = () => {
      console.log(this.name)
    }
  }
  sayName() {
    console.log(Person.name)
  }
}

let p1 = new Person('john')
p1.customSayName() //john
p1.sayName() //Person
console.log(p1.hasOwnProperty('customSayName'))//true
console.log(p1.hasOwnProperty('sayName'))//false
console.log(p1.__proto__.hasOwnProperty('sayName'))//true
console.log(p1.__proto__.hasOwnProperty('customSayName'))//false

but if you use framework like react, sometime you have to pass the function into constructor via props, how do you solve that? — Casa Lim, Apr 17 '18 at 02:30

adding function in prototype versus declaring it as variable in OOP Javascript

2 Answers2