Editing JavaScript (section)

=== Object-orientation (prototype-based) ===
Prototypal inheritance in JavaScript is described by [[Douglas Crockford]] as:
{{Blockquote
|You make prototype objects, and then ... make new instances. Objects are mutable in JavaScript, so we can augment the new instances, giving them new fields and methods. These can then act as prototypes for even newer objects. We don't need classes to make lots of similar objects... Objects inherit from objects. What could be more object oriented than that?<ref>{{cite web|last=Crockford|first=Douglas|title=Prototypal Inheritance in JavaScript|url=https://javascript.crockford.com/prototypal.html|access-date=20 August 2013|archive-date=13 August 2013|archive-url=https://web.archive.org/web/20130813163035/https://javascript.crockford.com/prototypal.html|url-status=live}}</ref>
}}

In JavaScript, an [[Object (computer science)|object]] is an [[associative array]], augmented with a prototype (see below); each key provides the name for an object [[Property (programming)|property]], and there are two syntactical ways to specify such a name: dot notation (<code>obj.x = 10</code>) and bracket notation (<code>obj["x"] = 10</code>). A property may be added, rebound, or deleted at run-time. Most [[property (programming)|properties]] of an object (and any property that belongs to an object's prototype inheritance chain) can be enumerated using a <code>for...in</code> loop.

==== Prototypes ====
{{Main|Prototype-based programming}}

JavaScript uses [[prototype-based programming|prototypes]] where many other object-oriented languages use [[Class (computer science)|classes]] for [[Inheritance (object-oriented programming)|inheritance]],<ref>{{cite web|title=Inheritance and the prototype chain|url=https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain|work=[[Mozilla]] Developer Network |access-date=April 6, 2013|archive-date=April 25, 2013|archive-url=https://web.archive.org/web/20130425144207/https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain|url-status=live}}</ref> but it's still possible to simulate most class-based features with the prototype system.<ref>{{cite book|last=Herman|first=David|title=Effective JavaScript|year=2013|publisher=Addison-Wesley|isbn=978-0-321-81218-6|page=83 |url=https://books.google.com/books?id=Nz9iAwAAQBAJ&pg=PA83 }}</ref> Additionally, [[ECMAScript |ECMAScript version 6]] (released June 2015) introduced the keywords '''class''', '''extends''' and '''super''', which serve as syntactic sugar to abstract the underlying prototypal inheritance system with a more conventional interface. Constructors are declared by specifying a method named '''constructor''', and all classes are automatically subclasses of the base class Object, similarly to Java. <syntaxhighlight lang="javascript">
class Person {
    constructor(name) {
        this.name = name;
    }
}

class Student extends Person {
    constructor(name, id) {
        super(name);
        this.id = id;
    }
}

const bob = new Student("Robert", 12345);
console.log(bob.name); // Robert
</syntaxhighlight>Though the underlying object mechanism is still based on prototypes, the newer syntax is similar to other object oriented languages. Private variables are declared by prefixing the field name with a [[number sign]] (#), and [[Polymorphism (computer science)|polymorphism]] is not directly supported, although it can be emulated by manually calling different functions depending on the number and type of arguments provided.<ref name="JavaScriptNext">{{cite book |last=Ghandi |first=Raju |date=2019 |title=JavaScript Next|location=New York City |publisher=Apress Media |pages=159–171 |isbn=978-1-4842-5394-6}}</ref>

==== Functions as object constructors ====
Functions double as object constructors, along with their typical role. Prefixing a function call with ''new'' will create an instance of a prototype, inheriting properties and methods from the constructor (including properties from the <code>Object</code> prototype).<ref name="Haverbeke2024">{{Cite book |title=Eloquent JavaScript |last=Haverbeke |first=Marijn |publisher=[[No Starch Press]] |isbn=978-1-71850-411-0 |edition=4th |location=San Francisco |publication-date=September 2024 |pages=[https://eloquentjavascript.net/Eloquent_JavaScript.pdf#section*.204 97–98] |language=en |url=https://eloquentjavascript.net/Eloquent_JavaScript.pdf |archive-url=https://web.archive.org/web/20250312193854/https://eloquentjavascript.net/Eloquent_JavaScript.pdf |archive-date=2025-03-12 |url-status=live}}</ref> ECMAScript 5 offers the <code>Object.create</code> method, allowing explicit creation of an instance without automatically inheriting from the <code>Object</code> prototype (older environments can assign the prototype to <code>null</code>).<ref>{{cite web|last=Katz|first=Yehuda|title=Understanding "Prototypes" in JavaScript|date=12 August 2011|url=https://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/|access-date=April 6, 2013|archive-date=5 April 2013|archive-url=https://web.archive.org/web/20130405154842/https://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/|url-status=live}}</ref> The constructor's <code>prototype</code> property determines the object used for the new object's internal prototype. New methods can be added by modifying the prototype of the function used as a constructor.<syntaxhighlight lang="javascript">// This code is completely equivalent to the previous snippet
function Person(name) {
    this.name = name;
}

function Student(name, id) {
    Person.call(this, name);
    this.id = id;
}

var bob = new Student("Robert", 12345);
console.log(bob.name); // Robert</syntaxhighlight>JavaScript's built-in classes, such as <code>Array</code> and <code>Object</code>, also have prototypes that can be modified. However, it's generally considered bad practice to [[Monkey patch|modify built-in objects]], because third-party code may use or inherit methods and properties from these objects, and may not expect the prototype to be modified.<ref>{{cite book |last=Herman |first=David |url=https://books.google.com/books?id=Nz9iAwAAQBAJ&pg=PA125 |title=Effective JavaScript |publisher=Addison-Wesley |year=2013 |isbn=978-0-321-81218-6 |pages=125–127}}</ref>

==== Functions as methods ====
{{Main|Method (computer science)}}
<!--not sure where to classify this under-->

Unlike in many object-oriented languages, in JavaScript there is no distinction between a function definition and a [[method (computer science)|method]] definition. Rather, the distinction occurs during function calling. When a function is called as a method of an object, the function's local ''this'' keyword is bound to that object for that invocation.