assign object and it's method to prototype

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: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS — Felix Kling, Mar 05 '17 at 14:54

score 1 · Answer 1 · answered Mar 05 '17 at 14:45

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 · Answer 2 · 2017-03-05T15:06:22.493

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 05 '17 at 15:06

answered Mar 05 '17 at 14:48

cyr_x

13,987
2
32
46

Why the closure? – trincot Mar 05 '17 at 14:50
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. – cyr_x Mar 05 '17 at 14:54
But `Page` is not using global variables, nor does it use anything that needs to stay private that would otherwise be exposed. – trincot Mar 05 '17 at 15:00
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. – cyr_x Mar 05 '17 at 15:03

assign object and it's method to prototype

2 Answers2