adding function in prototype versus declaring it as variable in OOP Javascript [duplicate]

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
– CertainPerformance, Commented Apr 17, 2018 at 2: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
– Casa Lim, Commented Apr 17, 2018 at 2:27
Exactly. I'm sure there are many questions about this already. — CertainPerformance
– CertainPerformance, Commented Apr 17, 2018 at 2:27
This is a duplicate, it was asked just a couple of days ago… just need to find a good answer. — RobG
– RobG, Commented Apr 17, 2018 at 2: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
– ibrahim mahrir, Commented Apr 17, 2018 at 2:28

xianshenglu · Accepted Answer · 2018-04-17 02:36:40Z

1

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

edited Apr 17, 2018 at 2:36

answered Apr 17, 2018 at 2:29

xianshenglu

5,4483 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Casa Lim Over a year ago

but if you use framework like react, sometime you have to pass the function into constructor via props, how do you solve that?

ibrahim mahrir · Accepted Answer · 2018-04-17 02:34:47Z

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, 2018 at 2:34

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

answered Apr 17, 2018 at 2:29

sridhar..

2,13316 silver badges21 bronze badges

Collectives™ on Stack Overflow

adding function in prototype versus declaring it as variable in OOP Javascript [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related