# viewer.extend with class

**URL:** <https://community.cesium.com/t/viewer-extend-with-class/4556>\
**Category:** CesiumJS\
**Created:** [August 31, 2016, 8:47am UTC](https://community.cesium.com/t/viewer-extend-with-class/4556 "2016-08-31T08:47:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![arskarap](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@arskarap](https://community.cesium.com/u/arskarap)\
**Post date:** [August 31, 2016, 8:47am UTC](https://community.cesium.com/t/viewer-extend-with-class/4556/1 "2016-08-31T08:47:21Z")

</div>

Can i use viewer.extend with class not function, because Cesium throw exception VM5099:5 Uncaught TypeError: Cannot call a class as a function.

And i should use Class.show not Class.prototype.constructor

---

<div class="post-metadata">

**Author:** ![arskarap](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@arskarap](https://community.cesium.com/u/arskarap)\
**Post date:** [August 31, 2016, 1:14pm UTC](https://community.cesium.com/t/viewer-extend-with-class/4556/2 "2016-08-31T13:14:31Z")

</div>

Hello,

I'm trying to expand the viewer [viewer.extend] using classes ES6.  
I have seen many examples and realized that mixins created as a function of. How correct create mixins?

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [August 31, 2016, 1:48pm UTC](https://community.cesium.com/t/viewer-extend-with-class/4556/3 "2016-08-31T13:48:55Z")

</div>

Hello,

viewer.extend expects the first parameter to be a function that adds additional functionality to the viewer. It calls this function with the viewer and the options that you passed in as the second paramater.

Take a look at the viewerCesiumInspectorMixin for an example: [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Viewer/viewerCesiumInspectorMixin.js#L30](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Widgets/Viewer/viewerCesiumInspectorMixin.js#L30)

If you wanted to use a class, you could create a helper function to do something like

MyClass.extendViewer = function(viewer, options) {  
viewer.myClass = new MyClass(viewer, options)  
}  
viewer.extend(MyClass.extendViewer, options)

``

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![arskarap](https://avatars.discourse-cdn.com/v4/letter/a/fbc32d/32.png) [@arskarap](https://community.cesium.com/u/arskarap)\
**Post date:** [August 31, 2016, 2:47pm UTC](https://community.cesium.com/t/viewer-extend-with-class/4556/4 "2016-08-31T14:47:38Z")

</div>

Thank you, but problem what context is lost. When pass my function in viewer.extend context `this` in MyClass is lost