path: root/files/ca/learn/javascript/objects/index.html

---
title: Introducció al Javascript orientat a Objectes
slug: Web/JavaScript/Introducció_al_Javascript_orientat_a_Objectes
translation_of: Learn/JavaScript/Objects
translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
---
<div>{{jsSidebar("Introductory")}}</div>

<p>JavaScript és orientat a objectes des del nucli, amb unes capacitats potents, flexibles {{Glossary("OOP")}}. Aquest article comença amb la introducció de la programació orientada a objectes, després es revisa el model d'objectes de Javascript, i finalment es mostren els conceptes de la programació orientada a objectes en JavaScript.</p>

<h2 id="JavaScript_Review" name="JavaScript_Review">Revisió de JavaScript</h2>

<p>Si no us sentiu segurs amb els conceptes de Javascript com ara variables, tipus, funcions, i àmbits podeu llegir sobre aquests temes en <a href="/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Una reintroducció a JavaScript</a>. També podeu consultar la <a href="/en-US/docs/Web/JavaScript/Guide">Guia de JavaScript</a>.</p>

<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programació orientada a Objectes</h2>

<p>La programació orientada a Objectes és un paradigma de programació que usa l'abstracció per crear models basants en el món real. Fa servir diverseses tècniques de paradigmes previament establerts, inclosa la modularitat, poliformisme, i l'encapsulament. Avui, moltes llengües de programació (com Java, JavaScript, C#, C++, Python, PHP, Ruby i Objective-C) suporten la programació orientada a Objectes (POO).</p>

<p>La programació orientada a Objectes es pot entendre com el disseny de software fent servir una col·lecció d'objectes que cooperen, al contrari de la visió tradicional en el qual un programa es vist com una col·lecció de funcions, o simplement com una llista d'instruccions per a un ordinador. En POO, cada objecte és capaç de rebre missatges, processar data, i enviar missatges a altres objectes. Cada objecte pot ser entès com una petita màquina independent amb un rol diferent o amb responsabilitat.</p>

<p>La programació orientada a Objectes intenta promoure una major flexibilitat, mantenibilitat en programació, i és àmpliament popular en enginyeria de software a gran esala. En virtut de la seva forta èmfasi en modularitat, el codi orientat a objecte intenta ser més simple de desenvolupar i més facil d'entendre després, es presta a una anàlisi més directa, codificació, i comprensió de situacions complexes i procediments en comptes d'altres mètodes de programació menys modulars.<a href="#cite-1"><sup>1</sup></a></p>

<h2 id="Terminology" name="Terminology">Terminologia</h2>

<dl>
 <dt>{{Glossary("Namespace")}}</dt>
 <dd>Un contenidor que permet als desenvolupadors agrupar totes les funcionalitats sota un nom únic d'aplicació específica.</dd>
 <dt>{{Glossary("Class")}}</dt>
 <dd>Defineix les característiques de l'objecte. És la definició d'una plantilla de variables i mètodes d'un objecte.</dd>
 <dt>{{Glossary("Object")}}</dt>
 <dd>Una instància d'una classe.</dd>
 <dt>{{Glossary("Property")}}</dt>
 <dd>Una característca d'un objecte, com ara un color.</dd>
 <dt>{{Glossary("Method")}}</dt>
 <dd>Una capacitat d'un objecte, com ara caminar. És una subrutina o funció associada amb una classe.</dd>
 <dt>{{Glossary("Constructor")}}</dt>
 <dd>Un mètode que es crida en el moment d'instanciació d'un objecte. Normalment té el mateix nom que el de la classe que el conté.</dd>
 <dt>{{Glossary("Inheritance")}}</dt>
 <dd>Una classe pot heretar les característiques d'una altra classe.</dd>
 <dt>{{Glossary("Encapsulation")}}</dt>
 <dd>Una manera d'agrupar les dades i mètodes que es fan servir juntes.</dd>
 <dt>{{Glossary("Abstraction")}}</dt>
 <dd>La conjunció d'una herència complexa, mètodes, les propietats d'un objecte, han de ser capaces de simular una realitat a modelar.</dd>
 <dt>{{Glossary("Polymorphism")}}</dt>
 <dd>Poli significa "<em>molts</em>" i morfisme significa "<em>formes</em>". Classes diferents poden definir el mateix mètode o propietat.</dd>
</dl>

<p>Per una descripció més extensa sobre la programació orientada a objectes vegeu {interwiki("wikipedia", "Object-oriented programming")}} a la Viquipèdia.</p>

<h2 id="Programació_basada_en_prototipus">Programació basada en prototipus</h2>

<p>Programació basat en prototipus és un estil de programació orientada a objectes que no fa ús de les classes. En el seu lloc, la reutilització del comportament (conegut com a herència en llenguatges basats en classes) es porta a terme a través d'un procés de decoració (o d'ampliació) on els objectes que ja existeixen serveixen com a prototipus. Aquest model també és conegut com a model sense classes, orientat a prototip, o programació basadad en instàncies.</p>

<p>L'exemple original (i més canònic) d'un llenguatge basat en prototipus és el llenguatge de programació {{interwiki("wikipedia", "Self (programming language)", "Self")}} desenvolupat per David Ungar i Randall Smith. Tanmateix, l'estil de programació sense classes s'ha anat fent més i més popular, i ha sigut adoptat per llenguatges de programació com JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quan s'utilitza el marc Viewer per manipular components Morphic), i altres.<a href="#cite-1"><sup>1</sup></a></p>

<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programació orientada a Objectes de JavaScript</h2>

<h3 id="Namespace">Namespace</h3>

<p>Un namespace és un contenidor el qual permet als desenvolupadors agrupar totes les funcionalitats sota un únic, nom d'aplicació específic. <strong>En JavaScript un namespace és només un altre objecte que conté mètodes, propietats, i objectes.</strong></p>

<div class="note">
<p><strong>Nota:</strong> Es important remarcar que en JavaScript, no hi ha diferèn<u>cia de nivell d'idioma entre els objectes regulars i els namespace</u>s. Això dista d'altres llenguatges orientats a objectes, i pot resultat confús als programadors nous en JavaScript.</p>
</div>

<p>La idea darrera la creació d'un namespace en JavaScript és simple: Un objecte global és creat i totes les variables, metòdes, i funcions es converteixen en propietats d'aquest objecte.<u> L'ús de namespaces també minimitza la possibilitat de conflictes de noms en l'aplicació, ja que cada objecte d'aplicació son propietats d'un objecte global d'aplicació definit</u>.</p>

<p>Creem un objecte global anomenat MYAPP:</p>

<pre class="brush: js">// global namespace
var MYAPP = MYAPP || {};</pre>

<p>En el codi de mostra superior, primer hem comprovat si MYAPP ja està definit (ja sigui en el mateix arxiu o en un altre arxiu). En cas de ser així, s'usa l'objecte global MYAPP existent, del contrari es crea un objecte buit anomenat MYAPP el qual encapsula el mètode, funcions, variables, i objectes.</p>

<p>També podem crear sub-namespaces:</p>

<pre class="brush: js">// sub namespace
MYAPP.event = {};</pre>

<p>Abaix es troba la sintaxi de codi per crear un namespace i afegir variables, funcions, i un mètode:</p>

<pre class="brush: js">// Create container called MYAPP.commonMethod for common method and properties
MYAPP.commonMethod = {
  regExForName: "", // define regex for name validation
  regExForPhone: "", // define regex for phone no validation
  validateName: function(name){
    // Do something with name, you can access regExForName variable
    // using "this.regExForName"
  },

  validatePhoneNo: function(phoneNo){
    // do something with phone number
  }
}

// Object together with the method declarations
MYAPP.event = {
    addListener: function(el, type, fn) {
    //  code stuff
    },
   removeListener: function(el, type, fn) {
    // code stuff
   },
   getEvent: function(e) {
   // code stuff
   }

   // Can add another method and properties
}

// Syntax for Using addListener method:
MYAPP.event.addListener("yourel", "type", callback);</pre>

<h3 id="Core_Objects" name="Core_Objects">Objectes estàndards integrats</h3>

<p>JavaScript té alguns objectes inclosos en el seu nucli, per exemple, trobem objectes come Math, Object, Array, i String. L'exemple d'abaix ens mostra com fer servir l'objecte Math per aconseguir números aleatoris usant el seu mètode <code>random()</code>.</p>

<pre class="brush: js">console.log(Math.random());
</pre>

<div class="note"><strong>Nota:</strong> Aquest i tots els exemples següents suposen que la funció anomenada {{domxref("console.log()")}} es defineix globalment. De fet, la funció <code>console.log()</code> no és part del llenguatge de JavaScript en si, però molts navegadors ho implementen per tal d'ajudar en la depuració.</div>

<p>Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">Referència de JavaScript: Objectes estàndards integrats</a> per una llista d'objectes cor en JavaScript.</p>

<p>Cada objecte en JavaScript és una instància de l'objecte <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> i per tant, n'hereda totes les seves propietats i mètodes.</p>

<h3 id="Custom_Objects" name="Custom_Objects">Objectes personalitzats</h3>

<h4 id="The_Class" name="The_Class">La classe</h4>

<p>JavaScript és un llenguatge basat en prototipus que no conté<u> cap <code>class</code> statement, </u>el qual si que es pot trobar en C++ o Java. Això és confós a vegades per a programadors acostumats a llenguatges amb el <u><code>class</code> statement.</u> En el seu lloc, JavaScript fa servir funcions com a classes. Definir duna classe és tan fàcil com definir una funció. En l'exemple d'abaix definim una nova classe anomenada Person.</p>

<pre class="brush: js">var Person = function () {};
</pre>

<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">L'objecte (instància de classe)</h4>

<p>Per crear una nova instància d'un objecte <code>obj</code> fem servir la declaració <code>new obj</code>, assignant el resultat (el qual és de tipus <code>obj</code>) a una variable per accedir-hi més tard. <span style="font-size: 14px; line-height: 1.5;">Una forma alternativa de crear una nova instància és fent servir {{jsxref("Object.create()")}}. Aquesta crearà una instància This will create an <u>uninititalized instance.</u></span></p>

<p>En l'exemple d'adalt definim una classe anomenada <code>Person</code>. En l'exemple següent creem dues instàncies (<code>person1</code> i <code>person2</code>).</p>

<pre class="brush: js">var person1 = new Person();
var person2 = new Person();
</pre>

<div class="note"><strong>Nota:</strong> Siusplau vegeu {{jsxref("Object.create()")}} per un mètode instantacional nou, addiccional new, additional, instantiation mètode.</div>

<h4 id="The_Constructor" name="The_Constructor">El constructor</h4>

<p>El constructor és cridat en el moment de la instantiation (el moment en que la instància de l'objecte és creat). El constructor és ún mètode de la classe. En JavaScript la funció serveix com el constructor de l'objecte, therefore there is no need to explicitly define a constructor method. Every action declared in the class gets executed at the time of instantiation.</p>

<p>El constructor es fa servir per establir les propietats de l'objecte o per cridar mè call methods to prepare the object for use. Per afegir mètodes de classes i les seves definicions es necessita una sintaxi diferent que s'explicarà més tard en aquest article.</p>

<p>En l'exemple d'abaix, el constructor de la classe <code>Person</code> mostra un missatge quan és crea una instànca <code>Person</code>.</p>

<pre class="brush: js">var Person = function () {
  console.log('instance created');
};

var person1 = new Person();
var person2 = new Person();
</pre>

<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">La propietat (atribut de l'objecte)</h4>

<p>Les propietats són variables contingudes en la classe; cada instància de l'objecte té aquestes propietats. Les propietats són asssignades en el constructor (funció) de la classe de forma que es creen en cada instància.</p>

<p>Per treballar amb propietats de dins de la classe s'utilitza la paraula clau <code>this</code>, que fa referència a l'objecte actual. Accedir (llegir o escriure) a una propietat fora d'aquesta classe es fa mitjançant la sintaxi: <code>InstanceName.Property</code>; Aquesta és la mateixa sintaxi que es fa servir en C++, Java, i numeroses altres llengües. (Dins la classe, la sintaxi <code>this.Property</code> s'utilitza per obtindre o escriure el valor de les propietats.)</p>

<p>En l'exemple següent definim la propietat <code>firstName</code> property per la classe <code>Person</code> i ho definim com a instanciació.</p>

<pre class="brush: js">var Person = function (firstName) {
  this.firstName = firstName;
  console.log('Person instantiated');
};

var person1 = new Person('Alice');
var person2 = new Person('Bob');

// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"
</pre>

<h4 id="The_methods" name="The_methods">Els mètodes</h4>

<p>Els mètodes segueixen la mateixa llògica que les propietats; la diferència es que són funcions i estan definides com a funcions. Cridar un mètode és similar a accedir a una propietat, però s'afegeix <code>()</code> al final the nom del mètode, possiblement amb arguments. Per definir un mètode, s'assigna una funció a una propietat amb nom de la propietat de la classe <code>prototype</code>; el nom que s'assigna a la funció és el mateix que el nom que té el mètode en l'objecte.</p>

<p>En l'exemple següent definim i usem el mètode <code>sayHello()</code> per la classe <code>Person</code>.</p>

<pre class="brush: js">var Person = function (firstName) {
  this.firstName = firstName;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"
</pre>

<p>En JavaScript els mètodes són funcions normals dels objectes que són lligats a un objecte com una propietat, El que vol dir que poden ser invocats "fora del context". Vegeu el codi d'exemple següent:</p>

<pre class="brush: js">var Person = function (firstName) {
  this.firstName = firstName;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");
var helloFunction = person1.sayHello;

// logs "Hello, I'm Alice"
person1.sayHello();

// logs "Hello, I'm Bob"
person2.sayHello();

// logs "Hello, I'm undefined" (or fails
// with a TypeError in strict mode)
helloFunction();

// logs true
console.log(helloFunction === person1.sayHello);

// logs true
console.log(helloFunction === Person.prototype.sayHello);

// logs "Hello, I'm Alice"
helloFunction.call(person1);</pre>

<p>Com l'exemple mostra, totes les referències a la funció <code>sayHello</code> — les que existeixen a <code>person1</code>, a <code>Person.prototype</code>, a la variable <code>helloFunction</code>, etc. — fan referència a la <em>mateixa funció</em>. El valor de <code>this</code> durant una crida a la funció depen en com es crida. En el cas comú en que es crida la funció des d'una propietat de l'objecte — <code>person1.sayHello()</code> — <code>this</code> rep el valor de l'objecte d'on prové la propietat (<code>person1</code>), és per això que <code>person1.sayHello()</code> fa servir el nom "Alice" i <code>person2.sayHello()</code> fa servir el nom "Bob". Però si ho cridem d'altres maneres, <code>this</code> rebrà un valor diferent: Cridar-la des d'una variable — <code>helloFunction()</code> — <code>this</code> rep el valor de l'objecte global (<code>window</code>, en navegadors). Al no tenir la propietat <code>firstName aquest </code>objecte (probablement) , acabem amb el resultat "Hello, I'm undefined". (Això és en el mode no estricte; en el <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode" title="/en/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">mode estricte </a>seria diferent [un error], però per evitar confussions no entrarem aquí en detall.) O podem assignar explícitament el valor de <code>this</code> mitjançant <code>Function#call</code> (o <code>Function#apply</code>), com es mostra al final de l'exemple.</p>

<div class="note"><strong>Nota:</strong> Vegeu més sobre <code>this</code> a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function#call</a> i <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function#apply</a></div>

<h4 id="Inheritance" name="Inheritance">L'herència</h4>

<p>L'herència és una manera de crear una classe com una versió especialitzada d'una o més classes (<em>JavaScript només suporta l'herència única</em>). La classe especialitzada és communment anomenada el <em>fill</em>, i l'altra classe es comunment anomenada el <em>pare</em>. En JavaScript això s'aconsegueix mitjançant l'assignació d'una instància de la classe pare a la classe fill, i després s'especialitza. En navegadors moderns també es pot usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> per implementar herències.</p>

<div class="note">
<p><strong>Nota:</strong> JavaScript does no detecta la classe fill <code>prototype.constructor</code> (vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), així que ho hem de declarar manualment.</p>
</div>

<p>En l'exemple d'abaix, definim la classe <code>Student</code> com una classe fill de <code>Person</code>. Després redefinim el mètode <code>sayHello()</code> i afegim el mètode <code>sayGoodBye()</code>.</p>

<pre class="brush: js">// Define the Person constructor
var Person = function(firstName) {
  this.firstName = firstName;
};

// Add a couple of methods to Person.prototype
Person.prototype.walk = function(){
  console.log("I am walking!");
};

Person.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName);
};

// Define the Student constructor
function Student(firstName, subject) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Person.call(this, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;
};

// Create a Student.prototype object that inherits from Person.prototype.
// Note: A common error here is to use "new Person()" to create the
// Student.prototype. That's incorrect for several reasons, not least
// that we don't have anything to give Person for the "firstName"
// argument. The correct place to call Person is above, where we call
// it from Student.
Student.prototype = Object.create(Person.prototype); // See note below

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Replace the "sayHello" method
Student.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName + ". I'm studying "
              + this.subject + ".");
};

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function(){
  console.log("Goodbye!");
};

// Example usage:
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
student1.walk();       // "I am walking!"
student1.sayGoodBye(); // "Goodbye!"

// Check that instanceof works correctly
console.log(student1 instanceof Person);  // true
console.log(student1 instanceof Student); // true
</pre>

<p>Pel que fa a la línia <code>Student.prototype = Object.create(Person.prototype)</code>: En els motors de Javascript més antics sense <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create"><code>Object.create</code></a>, es pot utilitzar tant un "polyfill" (també conegut com a  "falca", vegeu l'article enllaçat), o fer servir una funció que aconegueixi assolir el mateix resultat, tal com:</p>

<pre class="brush: js">function createObject(proto) {
    function ctor() { }
    ctor.prototype = proto;
    return new ctor();
}

// Usage:
Student.prototype = createObject(Person.prototype);
</pre>

<div class="note"><strong>Nota:</strong> Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> per més informació sobre el que fa, i una falca per a motors més vells.</div>

<h4 id="Encapsulation" name="Encapsulation">L'encapsulació</h4>

<p>En l'exemple anterior, <code>Student</code> no necessita saber com el mètode <code>Person</code> class's <code>walk()</code> és implementat, però tot i així pot fer-lo servir com a mètode; la classe <code>Student</code>no necessita definir explícitament aquest mètode a no ser que ho volguem canviar. D'això se'n diu <strong>encapsulació</strong>, per la qual cada classe empaqueta data i mètodes en una sola unitat.</p>

<p>L'ocultació d'informació és una característica comuna en altres llenguatges sovint com a mètodes/propietats privats i protegits. Tot i que es podria simular alguna cosa com aquesta en JavaScript, no és un requeriment per fer programació orientada a objectes.<a href="#cite-2"><sup>2</sup></a></p>

<h4 id="Abstraction" name="Abstraction">L'abstracció</h4>

<p>L'abstracció és un mecanisme que permet modelar la part que ens ocupa del problema en el qual estem treballant. Això es pot aconseguir per mitjar de l'herència (especialització), o composició. JavaScript aconsegueix l'especialització per mitjà de l'herència, i la composició per mitjà de deixar a les instàncies de classes ser valors d'atributs d'altres objectes.</p>

<p>La classe Function de JavaScript hereta de la classe Object (això demostra la especialització del model) i la propietat Function.prototype property és una instància d'Object (Això demostra composició).</p>

<pre class="brush: js">var foo = function () {};

// logs "foo is a Function: true"
console.log('foo is a Function: ' + (foo instanceof Function));

// logs "foo.prototype is an Object: true"
console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));</pre>

<h4 id="Polymorphism" name="Polymorphism">El polimorfisme</h4>

<p>Tal i com tots els mètodes i propietats són definides dins la propietat Prototype, classes diferents poden definir mètodes amb el mateix nom; els mètodes estan en l'àmbit de la classe en la qual estan definits. Això només és cert quan les dues classes no tenen una relació pare-fill (quan un no hereta de l'altre en una cadena d'herència).</p>

<h2 id="Notes" name="Notes">Notes</h2>

<p>Les tècniques presentades en aquesta article per implementar programació orientada a objectes no són les úniques que es poden fer servir en JavaScript, que és molt flexible en termes de com es pot realitzar la programació orientada a objectes.</p>

<p>De la mateixa manera, les tècniques que s'han mostrat aquí no utilitzen cap <em>hack</em> del llenguatge, ni imiten cap implementació de teories d'objectes d'altres llenguatges.</p>

<p>Hi ha altres tècniques que proporcionen programació orientada a objectes més avançada en JavaScript, però aquests estan fora de l'abast d'aquest article introductori.</p>

<h2 id="References" name="References">Referències</h2>

<ol>
 <li><a name="cite-1"></a>Viquipèdia. "<a href="http://ca.wikipedia.org/wiki/Programaci%C3%B3_orientada_a_objectes">Programació orientada a Objectes</a>"</li>
 <li><a name="cite-2"></a>Viquipèdia. "<a href="http://ca.wikipedia.org/wiki/Encapsulaci%C3%B3">Encapsulació (programació orientada a Objectes)</a>"</li>
</ol>