assign object and it's method to prototype [duplicate]

Question

I want to assign object and it's method to prototype, My normal condition is something like

var Page = function (){ _page = { id: 1, getValue : function (){ }, UI : { display : function (){ console.log('display layout'); } } } return _page; } var mypage = new Page() mypage.UI.display();

In my situation, there can be lot instances of Page class, so I want to intialize UI object with prototype, so UI and it's methods can be shared to all the Page instances. To achieve this, I can use __proto__ as following,

_page.__proto__.UI = { display : function (){ console.log('display layout'); } }

var Page = function (){ _page = { id: 1, getValue : function (){ } } _page.__proto__.UI = { display : function (){ console.log('display layout'); } } return _page; } var mypage = new Page() mypage.UI.display();

But this __proto__ is deprecated, so is there any better way that I can achieve this ?

Or

There is no need to initialize UI with prototype, we can use this as normal regardless of many Pages instances, Does this effect on performance ?

The information you are seeking is readily available on the Internet: developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/… — Felix Kling
– Felix Kling, Commented Mar 5, 2017 at 14:54

trincot · Accepted Answer · 2017-03-05 14:45:46Z

Do it like this:

function Page (){ this.id = 1; } Page.prototype.getValue = function (){ }; Page.prototype.UI = { display : function (){ console.log('display layout'); } };

It is important that in the constructor you do not return, but instead assign the object's properties to this, since that is a true instance of Page. That will make it possible to use the prototype chain.

cyr_x · Accepted Answer · 2017-03-05 15:06:22Z

0

You should use another class pattern for this, like this one:

var Page = (function(glob) { function Page() { this.id = 1; } Page.prototype.method = function() { // ... } return Page; }(window))

edited Mar 5, 2017 at 15:06

answered Mar 5, 2017 at 14:48

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

4 Comments

trincot Over a year ago

Why the closure?

cyr_x Over a year ago

For better property visibility handling, keeping your hole class definition inside one scope of code and injecting of global stuff like window, document and so on. So if you want to inject for example the global scrope on server side you cant use window therefore you don't have to change every call to window inside of Page when switching from window as global context to another one.

trincot Over a year ago

But Page is not using global variables, nor does it use anything that needs to stay private that would otherwise be exposed.

cyr_x Over a year ago

Sure Page itself does not, but do we know what other classes he's going to use. This is just one of many patterns for creating classes in javascript. You shouln'd use different patterns in the same project. Therefore you have to choose one that fits you needs. Your pattern would also work, but i personally prefer a little bit more control over visibility and not using global scopes directly.

Collectives™ on Stack Overflow

assign object and it's method to prototype [duplicate]

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related