can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - extend</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" "> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" parent expanded"> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> <ul> <li class=" parent expanded"> <a class="module" href="can-construct.html" title="Provides a way to easily use the power of prototypal inheritance without worrying about hooking up all the particulars yourself. Use can-construct.extend to create an inheritable constructor function of your own."> can-construct </a> <ul> <li> <span>prototype</span> <ul> <li class=" "> <a class="property" href="can-construct.prototype.constructor.html" title="A reference to the constructor function that created the instance. This allows you to access the constructor's static properties from an instance."> constructor </a> </li> <li class=" "> <a class="function" href="can-construct.prototype.init.html" title="Called when a new instance of a Construct is created."> init </a> </li> <li class=" "> <a class="function" href="can-construct.prototype.setup.html" title=""> setup </a> </li> </ul> </li> <li> <span>static</span> <ul> <li class=" "> <a class="property" href="can-construct.constructorExtends.html" title="Toggles the behavior of a constructor function called without the new keyword to extend the constructor function or create a new instance. var animal = Animal(); // vs var animal = new Animal();"> constructorExtends </a> </li> <li class="current parent expanded"> <a class="function" href="can-construct.extend.html" title=""> extend </a> </li> <li class=" "> <a class="function" href="can-construct.newInstance.html" title="Returns an instance of Construct. This method can be overridden to return a cached instance."> newInstance </a> </li> <li class=" "> <a class="function" href="can-construct.setup.html" title="Perform initialization logic for a constructor function."> setup </a> </li> <li class=" "> <a class="property" href="can-construct.shortName.html" title="If you pass a name when creating a Construct, the shortName property will be set to the name."> shortName </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-control.html" title="Create organized, memory-leak free, rapidly performing, stateful controls with declarative event binding. Use Control to create UI controls like tabs, grids, and context menus, and organize them into higher-order business rules with can.route. It can serve as both a traditional view and a traditional controller."> can-control </a> </li> <li class=" "> <a class="module" href="can-event.html" title="Add event functionality into your objects. The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent. All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events."> can-event </a> </li> <li class=" "> <a class="module" href="can-event/async/async.html" title="Makes the event system asynchronous. WARNING: This is experimental technology."> can-event/async/async </a> </li> <li class=" "> <a class="module" href="can-event/batch/batch.html" title="Adds task batching abilities to event dispatching."> can-event/batch/batch </a> </li> <li class=" "> <a class="module" href="can-observation.html" title="Provides a mechanism to notify when an observable has been read and a way to observe those reads called within a given function."> can-observation </a> </li> <li class=" "> <a class="module" href="can-simple-map.html" title="A performant live-bound map."> can-simple-map </a> </li> <li class=" "> <a class="page" href="can-util.html" title="A set of utilities."> can-util </a> </li> <li class=" "> <a class="module" href="can-view-callbacks.html" title="Registered callbacks for behaviors"> can-view-callbacks </a> </li> <li class=" "> <a class="module" href="can-view-live.html" title="Setup live-binding between the DOM and a compute manually."> can-view-live </a> </li> <li class=" "> <a class="module" href="can-view-model.html" title="Gets the ViewModel of an element."> can-view-model </a> </li> <li class=" "> <a class="module" href="can-view-nodelist.html" title="Adds nesting of text nodes can.view.nodeLists are used to make sure "directly nested" live-binding sections update content correctly. Consider the following template: <div> {{#if items.length}} Items: {{#items}} <label></label> {{/items}} {{/if}} </div> The {{#if}} and {{#items}} seconds are "directly nested" because they share the same <div> parent element. If {{#items}} changes the DOM by adding more <labels>, {{#if}} needs to know about the <labels> to remove them if {{#if}} is re-rendered. {{#if}} would be re-rendered, for example, if all items were removed."> can-view-nodelist </a> </li> <li class=" "> <a class="module" href="can-view-parser.html" title="Parse HTML and mustache tokens."> can-view-parser </a> </li> <li class=" "> <a class="module" href="can-view-scope.html" title="Create a lookup node for keys."> can-view-scope </a> </li> <li class=" "> <a class="module" href="can-view-target.html" title=""> can-view-target </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-infrastructure.html">Infrastructure</a></li> / <li><a href="can-construct.html">can-construct</a></li> / <li><a href="can-construct.extend.html">extend</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>extend</h1> <div>function</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/can-construct/tree/v3.0.3/can-construct.js#L391">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>Construct.extend([name,] [staticProperties,] instanceProperties)</code> </h2> <p>Extends <code>Construct</code>, or constructor functions derived from <code>Construct</code>, to create a new constructor function. Example:</p> <pre><code class="language-js">var Animal = Construct.extend({ sayHi: function(){ console.log("hi") } }); var animal = new Animal() animal.sayHi(); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>name</b> <code>{String}</code>: <p>Adds a name to the constructor function so it is nicely labeled in the developer tools. The following:</p> <pre><code>Construct.extend("ConstructorName",{}) </code></pre> <p>returns a constructur function that will show up as <code>ConstructorName</code> in the developer tools. It also sets "ConstructorName" as <a href="can-construct.shortName.html" title="If you pass a name when creating a Construct, the shortName property will be set to the name.">shortName</a>.</p> </li> <li><b>staticProperties</b> <code>{Object}</code>: <p>Properties that are added the constructor function directly. For example:</p> <pre><code class="language-js">var Animal = Construct.extend({ findAll: function(){ return can.ajax({url: "/animals"}) } },{}); // need to pass an empty instanceProperties object Animal.findAll().then(function(json){ ... }) </code></pre> <p>The <a href="can-construct.setup.html" title="Perform initialization logic for a constructor function.">static setup</a> method can be used to specify inheritable behavior when a Constructor function is created.</p> </li> <li><b>instanceProperties</b> <code>{Object}</code>: <p>Properties that belong to instances made with the constructor. These properties are added to the constructor's <code>prototype</code> object. Example:</p> <pre><code>var Animal = Construct.extend({ findAll: function() { return can.ajax({url: "/animals"}); } },{ init: function(name) { this.name = name; }, sayHi: function() { console.log(this.name," says hai!"); } }) var pony = new Animal("Gertrude"); pony.sayHi(); // "Gertrude says hai!" </code></pre> <p>The <a href="can-construct.prototype.init.html" title="Called when a new instance of a Construct is created.">init</a> and <a href="can-construct.prototype.setup.html" title="">setup</a> properties are used for initialization.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{function}</code>: <p>The constructor function.</p> <pre><code class="language-js">var Animal = Construct.extend(...); var pony = new Animal(); // Animal is a constructor function </code></pre> </p> </div> </div> <section class="body"> <h2>Inheritance</h2> <p>Creating "subclasses" with <code>Construct</code> is simple. All you need to do is call the base constructor with the new function's static and instance properties. For example, we want our <code>Snake</code> to be an <code>Animal</code>, but there are some differences:</p> <pre><code>var Snake = Animal.extend({ legs: 0 }, { init: function() { Animal.prototype.init.call(this, 'ssssss'); }, slither: function() { console.log('slithering...'); } }); var baslisk = new Snake(); baslisk.speak(); // "ssssss" baslisk.slither(); // "slithering..." baslisk instanceof Snake; // true baslisk instanceof Animal; // true </code></pre> <h2>Static properties and inheritance</h2> <p>If you pass all three arguments to Construct, the second one will be attached directy to the constructor, allowing you to imitate static properties and functions. You can access these properties through the <code><a href="can-construct.prototype.constructor.html" title="A reference to the constructor function that created the instance. This allows you to access the constructor's static properties from an instance.">this.constructor</a></code> property.</p> <p>Static properties can get overridden through inheritance just like instance properties. In the example below, we override both the legs static property as well as the the init function for each instance:</p> <pre><code class="language-js">var Animal = Construct.extend({ legs: 4 }, { init: function(sound) { this.sound = sound; }, speak: function() { console.log(this.sound); } }); var Snake = Animal.extend({ legs: 0 }, { init: function() { this.sound = 'ssssss'; }, slither: function() { console.log('slithering...'); } }); Animal.legs; // 4 Snake.legs; // 0 var dog = new Animal('woof'); var blackMamba = new Snake(); dog.speak(); // 'woof' blackMamba.speak(); // 'ssssss' </code></pre> </section> <script type="text/javascript"> var docObject = {"type":"function","name":"can-construct.extend","parent":"can-construct.static","src":{"line":391,"codeLine":529,"path":"node_modules/can-construct/can-construct.js"},"description":"\n","title":"extend","signatures":[{"code":"Construct.extend([name,] [staticProperties,] instanceProperties)","description":"\n\nExtends `Construct`, or constructor functions derived from `Construct`,\nto create a new constructor function. Example:\n\n```js\nvar Animal = Construct.extend({\n sayHi: function(){\n console.log(\"hi\")\n }\n});\n\nvar animal = new Animal()\nanimal.sayHi();\n```\n","params":[{"types":[{"type":"String"}],"optional":true,"name":"name","description":"Adds a name to the constructor function so\nit is nicely labeled in the developer tools. The following:\n\n Construct.extend(\"ConstructorName\",{})\n\nreturns a constructur function that will show up as `ConstructorName`\nin the developer tools.\nIt also sets \"ConstructorName\" as [can-construct.shortName shortName].\n"},{"types":[{"type":"Object","options":[]}],"optional":true,"name":"staticProperties","description":"Properties that are added the constructor\nfunction directly. For example:\n\n```js\nvar Animal = Construct.extend({\n findAll: function(){\n return can.ajax({url: \"/animals\"})\n }\n},{}); // need to pass an empty instanceProperties object\n\nAnimal.findAll().then(function(json){ ... })\n```\n\nThe [can-construct.setup static setup] method can be used to\nspecify inheritable behavior when a Constructor function is created.\n"},{"types":[{"type":"Object","options":[]}],"name":"instanceProperties","description":"Properties that belong to\ninstances made with the constructor. These properties are added to the\nconstructor's `prototype` object. Example:\n\n var Animal = Construct.extend({\n\t findAll: function() {\n\t\treturn can.ajax({url: \"/animals\"});\n\t }\n },{\n init: function(name) {\n this.name = name;\n },\n sayHi: function() {\n console.log(this.name,\" says hai!\");\n }\n })\n var pony = new Animal(\"Gertrude\");\n pony.sayHi(); // \"Gertrude says hai!\"\n\nThe [can-construct::init init] and [can-construct::setup setup] properties\nare used for initialization.\n"}],"returns":{"types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"description":"The constructor function.\n\n```js\nvar Animal = Construct.extend(...);\nvar pony = new Animal(); // Animal is a constructor function\n```"}}],"_curParam":{"types":[{"type":"Object","options":[]}],"name":"instanceProperties","description":"Properties that belong to\ninstances made with the constructor. These properties are added to the\nconstructor's `prototype` object. Example:\n\n var Animal = Construct.extend({\n\t findAll: function() {\n\t\treturn can.ajax({url: \"/animals\"});\n\t }\n },{\n init: function(name) {\n this.name = name;\n },\n sayHi: function() {\n console.log(this.name,\" says hai!\");\n }\n })\n var pony = new Animal(\"Gertrude\");\n pony.sayHi(); // \"Gertrude says hai!\"\n\nThe [can-construct::init init] and [can-construct::setup setup] properties\nare used for initialization.\n"},"_curReturn":{"types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"description":"The constructor function.\n\n```js\nvar Animal = Construct.extend(...);\nvar pony = new Animal(); // Animal is a constructor function\n```"},"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>