Mootools Introducción/Tutorial - Native

El grupo de scripts Native son extensiones básicas de los objetos por defecto en javascript (actualmente Mootools tiene código nativo para Array, Element, Function y String) Esos archivos modifican la manera en que esos elementos y toda instancia de ellos trabajan. Como es posible crear arrays o strings antes de que este código se ejecute, tienen típicamente un significado por el cual aplican estas funciones a los strings existentes. Por ejemplo, $A(myArray) solo te devuelve myArray con todas las extensiones aplicadas.
Acá hay un resumen de las funciones disponibles para esos objetos; la mayoría de ellos pueden ser ejecutados haciendo click "ejecuta este código".

String.js - Extensiones String, Numer.toInt()

Acá esta la página de documentación de String.js.

String.test()
JavaScript:
"I like cookies".test("cookie"); // devuelve ["cookie"]

//ignora la distinción de mayúsculas y minúsculas
"I like cookies".test("COOKIE", "i")

JavaScript:
//ignora la distinción de mayúsculas y minúsculas
"I like cookies because cookies are good".test("COOKIE", "ig");

JavaScript:
//no devuelve nada
"I like cookies".test("cake");

JavaScript:
//este es un ejemplo de como probablemente lo usarias en realidad
if("I like cookies".test("cake")) alert ('you like cake');
else alert("you don't like cake (what's wrong with you?)");

String.toInt()
JavaScript:
"10".toInt(); // el valor es 10

JavaScript:
"10px".toInt(); // el velor es 10

JavaScript:
"-10".toInt(); // el valor es -10

JavaScript:
"px10".toInt(); // no devuelve nada

String.camelCase()
JavaScript:
"I-like-cookies".camelCase(); //"ILikeCookies"

String.capitalize()
JavaScript:
"i like cookies".capitalize(); //"I Like Cookies"

String.trim()
JavaScript:
" i like cookies ".trim() //"i like cookies"

String.clean()
hace lo mismo que trim y ademas elimina todos los doble espacios del string
JavaScript:
" i like cookies \n\n".clean() //"i like cookies"

String.rgbToHex()
JavaScript:
"rgb(17,34,51)".rgbToHex(); //"#112233"

JavaScript:
"rgba(17,34,51,0)".rgbToHex(); //"transparent"

JavaScript:
"rgb(17,34,51)".rgbToHex(true); //[11,22,33]

String.hexToRgb()
JavaScript:
"#112233".hexToRgb(); //"rgb(17,34,51)"

Number.toInt()
Number.toInt() solo devuelve el número; útil porque toInt debe trabajar en ambas Strings y Números.

Array.js

Acá está la documentación de Array.js
Array.each()
Array.each() itera en el Array ejecutando la funcion especificada para cada ítem del array. La funcion anonymous pude pasar dos argumentos (opcionales) - el ítem y el índice:

["one", "two", "three"].each(function(number){
alert(number);
});

["one", "two", "three"].each(function(number, index){
if(index == 0) alert(number); //solo vamos a mostrar el primero
});

Array.copy()
Copia el array y lo devuelve.

var letters = ["a","b","c"];
var copy = ["a","b","c"].copy();
alert(copy);

Array.remove()

JavaScript:
["1","2","3"].remove("2") // ["1","3"];

Array.test()

JavaScript:
["a","b","c"].test("a"); // true

JavaScript:
["a","b","c"].test("d"); // false

Array.extend()

JavaScript:
var Animals = ['Cat', 'Dog', 'Coala'];
Animals.extend(['Lizard']); //Animals is now: ['Cat', 'Dog', 'Coala', 'Lizard'];

Array.associate()

JavaScript:
var Animals = ['Cat', 'Dog', 'Bird', 'Lizard'];
var Speech = ['Meow', 'Bark', 'Chirp', 'Mute'];
var Speeches = Animals.associate(speech);
//Speeches['Meow'] is now Cat.
//Speeches['Bark'] is now Dog.
//...

$A()
$A() aplica esas funciones a cualquier objeto iterable. Ejemplo:

JavaScript:
function myFunction(){
$A(arguments).each(argument, function(){
alert(argument);
});
};
//the above will alert all the arguments passed to the function myFunction.

Function.js

Acá está la documentación de Function.js.
Function.pass(arguments, bind(optional))

JavaScript:
//syntax: Function.pass(arguments, bind)
//bind es opcional; mas sobre bind mas tarde
//ejemplo: myFunction.pass([arg1, arg2], myElement);
function say(msg){
alert(msg);
};
say.pass('hello world')();

Te preguntarás porqué hacer esto, pero vas a ver el porqué en ejemplos mas adelante. Basicamente, no siempre queres ejecutar una funcion inmediatamente, y sin algo como el método .pass() no tenes manera de pasar variables a esa funcion sin ejecutarla. myFunction(value) ejecuta muyFunction. myFunction.pass(value) configura myFunction para poder ejecutarla mas tarde.
Vamos a decir que tenés un efecto que va a hacer que algo se desvanezca. Cuando está hecho, queres ejecutar un callback de algun orden. Tu efecto tiene una opción para que le entregues una función para que la ejecute cuando termine, pero necesitas pasarle a esa función algunas variables. Si haces algo como:"onComplete: myFunction(value)" vas a ejecutar tu función inmediatamente y onComplete sera equivalente a lo que sea devuelto, lo cual no es lo que querés. Si en cambio haces "onComplete: myFunction.pass(value)" obtendras lo que querìas. myFunction.pass(value) devuelve una instancia de esa función con el parámetro establecido, entonces cuando ejecutes onComplete() va a estar ejecutando realmente myFunction(value)


Function.bind(object)
La palabra reservada "this" dentro de un objeto (como una función) refiere a la instancia de ese objeto. Es realmente muy útil para un montón de cosas, no solo las que están referidas a otras funciones en el mismo objeto o estado de cierta variable. El problema es que puede ser que seas autor de la funcionalidad que necesita poder referir a variables en el objeto que lo está llamando. Abajo hay un ejemplo simple de esto, pero cuando escribes clases y funciones más complejas vas a encontrar que esta habilidad para definir que "this" es, en un contexto dado, una necesidad.
Este ejemplo debe cambiar este párrafo a que tengo un borde alrededor de él.

JavaScript:
function myFunction(){
this.setStyle('border', '1px solid black');
//notar que 'this' acá refiere myFunction, no a un elemento
//vamos a necesitar unir esta funcion con el elemento que queremos alterar
};
//Unir el elemento que quiero aplicar el efecto con la función
//Notar que una función es devuelta, no ejecutada
var myBoundFunction = myFunction.bind($('bindExample'));
//ejecutar esa nueva función con el objeto bound
myBoundFunction();

Function.bindAsEventListener();
Una función con el parámetro bind como su "this" y como un evento de argumento pre-pasado o window.event, dependiendo del navegador.

JavaScript:
function myFunction(event){
alert(event.clientx) //devuelve las coordenadas del mouse
};
myElement.onclick = myFunction.bindAsEventListener(myElement);

Function.delay(milliseconds, bind(optional))
Si, puedes establecer demoras con setTimeout, pero a veces es enrrollado y complicado. Adicionalmente, la demora te permite unir un elemento con la función que va a se demorada
El ejemplo que sigue debe dibujar un borde alrededor de este párrafo después de un segundo de espera.

JavaScript:
function myFunction(){
this.setStyle('border', '1px solid black');
};
myFunction.delay(500, $('delayExample'));

Acá hay un gran ejemplo de vinculación. Si el elemento fuera un argumento para la función, no podría llamar la función con un argumento sin ejecutarla. Este tipo de sintaxis no funcionaría:

myFunction($('delayExample')).delay(500);

...no podría funcionar, porque ejecutarías la función inmediatamente y .delay() intentaría ejecutarse como un método de lo que haya sido devuelto.
Podrías hacer esto sin embargo:
myFunction.pass($('delayExample')).delay(500);
Está también .periodical(), que periódicamente ejecuta tu función

There's also .periodical(), which repeatedly executes your function.
La clase cadena (chain)
Encadenar es una manera bastante inteligente de establecer una lista de funciones que quieras ejecutar en un orden dado sin ejecutarlas todavía. Luego, cada vez que llames el método .callChain() la próxima función de ejecutará.

JavaScript:
var x = new Chain();
var one = function(){alert('1')};
var two = function(){alert('2')};
x.chain(one);
x.chain(two);
x.callChain();
x.callChain.delay(2000);

$clear() - liberando esperas

JavaScript:
var myTimer = (function() {alert('1 second!');}).delay(1000);
//espera 5 segundos y ejecuta mi función
myTimer = $clear(myTimer); //no importa

$type() - Obtener el tipo de un elemento
$type devuelve el tipo de un objeto ("function" o "string", etc.) o nada si el objeto es nulo (o una cadena vacía). (Nota: esto está cambiando en la próxima versión de mootools; si le das a $type un boolean= false en mootools versión 84 vas a obtener un falso, no un "boolean"; esto está cambiando para devolver el tipo real del objeto, y solo devolver falso si el objeto es nulo o indefinido, por esto usar con precaución).

JavaScript:
$type('hi'); //"string"

JavaScript:
$type(function(){});//"function"

JavaScript:
$type({});//"object"

JavaScript:
$type([]);//"array"

JavaScript:
var x = null;
$type(x);//nothing returned

Element.js

Acá está la documentación para Elements.js.
El objeto Element consigue mucho amor en Mootools. La mayoría de las funciones en el objeto Element son bastante auto-explicativas. Element.getTag() hace lo que piensas que podría hacer. Element.remove() no tiene sorpresas. Acá hay algunos ejemplos de las funciones más útiles y menos obvias, pero realmente deberías leer la página de documentación de Element.js para el detalle completo.
Element.initialize()
Este solo crea un nuevo objeto elemento - lo mismo que document.createElement, pero también aplica las extensiones de Mootools a ese elemento.

JavaScript:
var img = new Element("img");

$()
Cansado de escribir "document.getElementById('blah')"? no hay problema. Esto también aplica todas esas extensiones de Element al objeto.

JavaScript:
$('getElementByIdExample');

Element.injectInside, Element.injectBefore, Element.injectAfter
Mucho más de lo que parece. Inyecta el elemento relativo a el que sea pasado como argumento.

HTML:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').injectBefore('myElement');</script>
resulting html:
<div id="mySecondElement"></div>
<div id="myElement"></div>

injectInside usa appendChild en el elemento provisto:

html:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').injectInside('myElement');</script>
resulting html:
<div id="myElement"><div id="mySecondElement"></div></div>

Element.adopt
Este es tal como injectInside, pero al revés (añande el elemento provisto al que se aplica):

HTML:
<div id="myElement"></div>
<div id="mySecondElement"></div>
<script>$('mySecondElement').adopt('myElement');</script>
resulting html:
<div id="mySecondElement"><div id="myElement"></div></div>

Element.replaceWith

JavaScript:
$('myOldElement').replaceWith($('myNewElement'));

$('myOldElement') no está mas, y $('myNewElement') está en su lugar.
Element.appendText

HTML:
<div id="myElement">hey</div>
<script>
$('myElement').appendText(' howdy');
//myElement innerHTML es ahora "hey howdy"
</script>

Element.add/removeClass/hasClass/toggleClass
Estos hacen bastante más de que aparentan hacer.

Este parrafo tiene id=cssClassesExample para el ejemplo siguiente.

JavaScript:
//tiene el párrafo de arriba el className blue?
$('cssClassesExample').hasClassName('blue');

JavaScript:
//se lo agregamos
$('cssClassesExample').addClassName('blue');

JavaScript:
//ahora lo borramos
$('cssClassesExample').removeClassName('blue');

JavaScript:
//ahora vamos a prenderlo y a apagarlo
$('cssClassesExample').toggleClass('blue');

Element.getStyle, Element.setStyle, Element.setStyles
Bastante directo:
Este párrafo tiene id = getStyleExample para el ejemplo siguiente.

JavaScript:
$('getStyleExample').getStyle('width'); //returns something like "528px"

JavaScript:
$('getStyleExample').getStyle('width').toInt(); //returns 528 (an integer)

setStyle te permite establecer una única propiedad css:

JavaScript:
$('setStyleExample').setStyle('border', '1px solid black');

setStyles tiene una sintaxis levemente diferente y te permite establecer todas las que quieras:

JavaScript:
$('setStylesExample').setStyles({
'border':'1px solid yellow',
'background':'#666',
'color':'#fff'
});

Element.setProperty, setProperties
Trabaja bastante similar a setStyle(s) excepto que puedes establecer las propiedades de un elemento:

JavaScript:
var img = new Element('img');
img.setProperty('src', http://clientside.cnet.com/wp-content/themes/clientside/art/logo.gif');
img.setProperty('id', 'logoExample');
img.injectInside($('setPropertiesExample'));

Vamos a asignar algunas propiedades más:

JavaScript:
$('logoExample').setProperties({
'alt':'clientside',
'title':'clientside'
});

Element.getProperty()

JavaScript:
$('logoExample').getProperty('src');//gets the img url

Element.getTop(), getLeft()
Este devuelve el offset de la parte de arriba del elemento y la parte de arriba de la ventana (o la izquierda del elemento y la izquierda de la ventana)
Este párrafo se usa en el ejemplo siguiente.

JavaScript:
$('topAndLeftExample').getTop() //returns an integer

JavaScript:
$('topAndLeftExample').getLeft() //returns an integer

Element.getValue()
Devuelve el valor de un campo de entrada de un formulario. Ejemplo:

JavaScript:
$('getValueInputExample').getValue() //devuelve algun valor

JavaScript:
$('getValueSelectExample').getValue() //devuelve 'value 1'

Element.setHTML()
Vamos a cambiar este contenido...

JavaScript:
$('setHTMLExample').setHTML('ves? cambió!');

Te preguntaras porqué usar esto o algo como getProperty cuando javascript tiene métodos para hace es el mismo; estamos solo cambiando una sintaxis por otra. Podes tan fácilmente hacer:

JavaScript:
$('setHTMLExample').innerHTML = 'ves? cambió!';

entonces, por que hacerlo? Bueno, haciendo esta función disponible podes hacer cosas como .delay() y .pass() en aplicaciones mas complejas. Tambien permite encadenar cosas juntas como:

JavaScript:
$('myExample').setHTML('example').addClass('something').removeClass('somethingElse').addEvent(....) etc.

Element.getTag()

JavaScript:
$('logoExample').getTag() // returns 'img'

Element.setOpacity
Opacity toma un valor entre cero (transparente y 1 (opaco)

JavaScript:
$('setOpacityExample').setOpacity(0); //ahora no lo ves

JavaScript:
$('setOpacityExample').setOpacity(.5); //se ve a medias

JavaScript:
$('setOpacityExample').setOpacity(1); //se ve 100%

Element.addEvent
Aquellos que estén familiarizados con el objeto Event de Prototype.js van a reconocer este concepto; solo hay una diferencia de sintaxis. notar que el nombre del evento que le des ("click" o "mouseover") no tiene el prefijo "on".
Este párrafo se usa en el ejemplo siguiente

JavaScript:
$('addEventExample').addEvent('click', function() {
alert('click!');
});

Porque usar esto en ves de hacer $('addEventExample').onclick = alert('click');? Bueno, usar capturadores de eventos como este te permite tener mas de uno. si haces .onclick=myFunction podes tener solo un evento esperando ese click. Click puede no ser un gran ejemplo, pero ciertamente algo como window.onload vas a querer tener numerosos eventos monitoreando.
También podes usar Element.removeEvent() para remover un capturador de evento
Element.getNext, getPrevious, getLast
Todos ellos obtiene elementos vecinos relativos al que apliques este método.
Este es el HTML del ejemplo siguiente:

HTML:
<ul id="getSiblingExamples">
<li id="firstLI">first</li>
<li id="secondLI">second</li>
<li id="thirdLI">third</li>
</ul>

* first
* second
* third

JavaScript:
$('secondLI').getPrevious() //obtiene el primer elemento de la lista

JavaScript:
$('secondLI').getNext() //obtiene el tercer elemento

$('getSiblingExamples').getLast() //obtiene el tercer elemento

$Element(DOMelement, function, arguments) - funciones ayuda.
Aplica un método con el pasda en argumentos para el pasado en elemento. Útil si no querés extender el elemento.

JavaScript:
$Element(el, 'hasClass', className) //Verdadero o falso

Mootools Introducción/Tutorial - moo.js

El artículo original en inglés se encuentra acá, y esta es una traducción libre, de aficionado, con los fines de practicar ingles y aprender mootools...


Lo que sigue es un tutorial instructivo de la librería mootools. La mayoría del código de los ejemplos de código te permitirán ejecutarlos haciendo click en el link "ejecuta este código" que está abajo del ejemplo. Haciendo click ahí te mostrará el código y el resultado en el plugin Firebug debugging de Firefox. Vas a necesitar tener instalado ese plugin ver algún resultado de la mayoría de los ejemplos de código.
Nota: Este ejemplo parece que solo funciona en Firefox por el momento; Lo voy a arreglar pronto.

Creación de clases

Acá esta la página de documentación de moo.js
Mootools contiene un sistema de creación de Clases y herencias robusto. Crear una nueva clase es, de hecho, muy fácil.
Clases vs funciones
Las clases te permiten:
-reutilizar y modificar código sin romper cosas que dependan de él.
-Crear un objeto autómata/independiente/dinámico (statefull) que pueda guardar información en su propio alcance.
-Crear aplicaciones más robustas a través del desarrollo de clases pequeñas, reutilizables y extendibles.
Las funciones autónomas te permiten:
-Crear colecciones de ejecuciones que deban ocurrir juntas
-Crear atajos a otras funciones que tengan una sintaxis larga
-Ejecutar algo, de hecho.
Las funciones son usadas moderadamente con mootools porque las clases son mucho mas poderosas. Si empiezas con una clase y tratas de mantener las cosas genéricas, y piensas en lo que escribes para que sea reutilizable, te vas a encontrar luego extendiendo algo que ya habías escrito y ahorrando un montón de tiempo y creando una solución mas robusta para tus problemas. Otros podrán utilizarla también.
El mismo Mootools es un gran ejemplo de como usar clases te permite crear aplicaciones complejas con menos código. El fundamento o base de mootools es el objeto clase. Casi toda otra parte de javascript en la librería extiende este objeto para crear funcionalidades mas complejas.
Una clase simple
Acá hay un una clase simple usando la sintaxis de mootools:

Javascript:
var Animal= new class ({
initialize: function(options){
this.options=options;
}
});

Animal ahora es una clase base sin funcionalidad concreta. Podemos extenderla, algo que vamos a hacer en la próxima sección. La sección "inicial" va a ser ejecutada cuando un nuevo objeto animal es instanciado, y los argumentos pasados al constructor van a ser guardados como ".options" del nuevo objeto, como esto:

Javascript:
var Gato = new animal({color: "negro"});

Arriba tenemos una instancia de la clase Animal y establecimos el color de este Animal a "negro"

Javascript:
alert(Gato.options.color); //-> Muestra "Negro"

Esto por si mismo no es muy interesante, pero cuando empezás a crear clases que heredas una de la otra, o a implementar funcionalidades en la clase base, vas a ver la potencia que tiene.
La cosa que es ilustrada acá es lo autómata/independiente/dinámico del objeto - la parte "this.options". Ahora este objeto puede recordar su estado sin tener que declarar un grupo de variables globales en la parte superior de tu documento solo para guardar información.

Agregar funciones a una clase

Las clases pueden contener funciones dentro de ellas de la misma manera que pueden contener variables (como "this.options"). Ejemplo:

Javascript:
var Animal = new Class({
initialize: function(options){
this.options = options; //Guarda tus opciones
//si las opciones especifican que Animal
//esta dormido cuando lo crean, llama dormir()
if(this.options.dormirAlInicio) this.dormir();
//sino está despierto
else this.depertar();
},
dormir: function() {
this.estaDormido= true;
},
despertar: function(){
this.estaDormido = false;
}
});

Ahora podemos instanciar nuestro animal y mandarlo a dormir o a despertarlo cuando queramos.

Javascript:
var Gato = new Animal({
color: "Negro",
dormidoAlInicio: true
});
//el gatito esta dormido, vamos a despertarlo
Gato.despertar();
alert(Gato.estaDormido);
//-> alerts "falso"

Extender las clases

Las clases pueden ser extendidas para crear funcionalidades mas complejas. En los ejemplos anteriores hemos creado un objeto (Animal) y una instancia de ese objeto (Gato), pero extendiendo la clase base podemos crear funcionalidades mas complejas mientras reutilizamos nuestro código. Ejemplo:

JavaScript:
var Animal = new Class({
initialize: function(options){
this.options = options;
this.estaVivo= true;
}
});
var Mamifero = Animal.extend({
initialize: function(options){
//esto ejecuta la función initialize() en la clase animal
//Vamos a pasar las opciones a la función initialize del padre
this.parent(options);
this.esSangreCaliente = true;
this.tienePelaje = true;
this.produceLeche = true;
},
dormir: function() {
this.estaDormido = true;
},
despertar: function(){
this.estaDormido= false;
}
});
var Raton = Mamifero.extend();
var Gato = Mamifero.extend({
initialize: function(options) {
//llama initialize de Mamifero
//traspasa todas las opciones a
//las clases Mamifero y animal
this.parent(options)
this.tieneGarras = true;
this.tieneCola = true;
this.esCarnivoro = true;
},
casaRaton: function(Raton){
Raton.estaVivo = false;
return Raton;
}
});

Bien, ahora tenemos una clase Animal, una clase Mamifero (que extiende de Animal) y las clases Gato y Raton (que extienden de Mamifero). El código anterior crea las clases pero no ejecuta nada realmente. Entonces, pongamos este código en uso:

JavaScript:
var Kitty = new Gato({
color: "Negro"
});
var Mickey = new Raton({
color: "Negro",
Pantalones: true,
zapatos: true
});
Kitty.casaRaton(Mickey);
alert(Mickey.estaVivo);
//->falso

Separando las cosas en clases de esta manera, en cualquier momento del futuro podemos implementar nuevos tipos de Animales, Mamiferos o tambien diferentes tipos de gatos y ratones. Significa tambien que si encontramos un error, por ejemplo, en la clase Mamifero, arreglarlo en ese lugar implica que no vamos a tener que arreglarlo en todas la instancias de Mamifero.

Implementar Clases

Extender clases te permite tomar una clase base (como Animal mas arriba) y crear una nueva clase con esa como plantilla (como en nuestra clase Mamifero arriba). Esto no altera la clase animal de ninguna manera.
Esto no es siempre lo que buscamos, sin embargo. A veces queres alterar la clase padre en un contexto dado. Digamos, por ejemplo, que estas usando la clase Animal de arriba, pero querés agregarle una función para tu ambiente. Extender la clase Animal para crear algo como AnimalExtended no te sirve por que vas a usar tambien Gato, Raton y Mamifero y no querés reescribirlas.
Aca es donde Class.implement resulta útil. El método implement te permite agregar funcionalidad a la clase, alterando la clase misma. No podes usar la funcion "this.parent()" como si puedes con la extensión, por que no estás creando un hijo - estas modificando la clase. Adicionalmente, si usas el mismo nombre separado como uno que ya exista, lo vas a sobreescribir. Ejemplo:

JavaScript:
//esta es la misma clase Animal de antes
var Animal = new Class({
initialize: function(options){
this.options = options;
this.estaVivo= true;
}
});
//Vamos a cambiarla para agregarle algunas funcionalidades adicionales
Animal.implement({
comer: function() {
if(typeof this.energia == "indefinido") this.energia = 0;
this.energia++;
}
});

Ahora Animal tiene una función llamada comer() que incrementa su valor de energía.
Vamos a decir que luego queremos agregar la habilidad de pasas un valor inicial en options y queremos implementarlo en la clase tambien. Usando implement, si queremos alterar la función comer, vamos a tener que escribirlo todo de nuevo:

JavaScript:
//let's let you pass in a starting value
Animal.implement({
comer: function() {
if(typeof this.energia == "indefinido") {
if(typeof this.options.iniciarEnergia != "indefinido") this.energia = this.options.iniciarEnergia ;
else this.energia = 0;
this.energia++;
}
});

Implement es usado en Mootools mayormente para extender clases que están en el grupo "Nativo" - específicamente String, Array, Function y Element prototype. Esto significa que si tiene este código:

JavaScript:
String.implement({
alert: function() {
alert(this);
}
});

Cualquier string va a heredar esa función:

JavaScript:
"hey howdy!".alert();

De esta manera, Mootools te da un montón de atajos para cosas que a menudo haces a cosas como Strings, Arrays, etc.
Hay otra manera de usar implement que es bastante útil. Podes crear una clase y luego implementarla en otra, tal cual:

JavaScript:
//Estas son las misma clases Mamifero y Gato de arriba
var Gato = Mamifero.extend({
initialize: function() {
this.parent() //llama initialize de Mamifero
this.tieneGarras = true;
this.tieneCola = true;
this.isCarnivoro = true;
},
function: casaRaton(Raton){
raton.estaVivo = false;
return raton;
}
});
var Carnivoro= new Class({
esCarnivoro = true,
energia = 0,
comer: function() {
this.energy++;
}
});
Gato.implement(Carnivoro);

Ahora todos los Gatos que crees, van a tene la funcionalidad definida en Carnivoro. Esto te permite crear porciones de código mas pequeñas que puedan ser agregados donde se necesiten.

Extender Objetos

Tal como en las clases, los objetos pueden ser extendidos. Esto permite combinar dos objetos juntos en la misma manera que los objetos Clase. Para se especifico, las propiedades de un objeto puede ser copiada en otro, tal como Class.implement() Ejemplo:

JavaScript:
var Ciudad= {
tieneEdificios: true,
tieneTrafico: true
};
var SanFrancisco = Object.extend(Ciudad, {
tieneNiebla: true,
numeroDeEdificios: 1000,
Terremoto: function() {
this.numeroDeEdificios= this.numeroDeEdificios/2;
}
});
SanFrancisco.terremoto(); //espero que tengas seguro!!!

Esto es muy similar a las clases pero no tenés la función initialize() que es ejecutada cuando creas algo y hay otras diferencias en las que no quiero profundizar.
Un gran ejemplo de cómo y porqué extender un objeto puede encontrarse en este articulo sobre this.options - valores por defecto establecidas que pueden ser sobreescritos en tus clases.

Object.Native

Object.Native() solamente toma un objeto y hace que su función .extend() haga lo mismo que la función .implement(). Realmente es usado para crear clases prototipo extensibles como String, Array, etc. Ejecutando Object.Native(String) estableces tu ambiente para que te permita extender la funcionalidad básica de Strings. No necesitas usarlo realmente, pero es útil si querés forzar alguna extensión de una clase para modificar tambien la clase base.