is JavaScript’s fundamental datatype
is a composite value which aggregates multiple values
(primitive values or other objects)
allows to store values and retrieve them by names
is an unordered collection of properties
each of which has a name and a value
string to value mapping is also known as
hash, hashtable, dictionary or associative array
BUT
an object is more than just a simple string-to-value map
a JavaScript object also
inherits the properties of another object
known as its prototype
the methods of an object are typically inherited properties
and
this prototypal inheritance is a key feature of JavaScript
Objects are dynamic
so
properties can usually be added and deleted
but
they can be used to simulate the static objects
and “structs” of statically typed languages
they can also be used (by ignoring the value part of the string-to-value mapping) to represent sets of strings
any value that is not
a string, number, true, false, null or undefined is an object
and even strings, numbers and booleans
behave like immutable objects
recall that objects are mutable
and are manipulated by reference rather than by value
the fundamental operations:
create objects
and
set, query, delete, test, and enumerate properties
exemplu
if the variable x refers to an object, and the code var y = x;
is executed, the variable y holds a reference to the same object,
not a copy of that object.
Any modifications made to the object through the variable y are
also visible through the variable x
so an object is a collection of properties,
where each property has
a name
usually a string, including the empty string
but there can never be 2 properties with the same name
and
a value
either a primitive value or an object, never undefined
in addition, each property has
associated values that are called property attributes
the writable attribute
specifies whether the value of the property can be set
the enumerable attribute
specifies whether the property name is returned by a for/in loop
the configurable attribute
specifies whether the property can be deleted and
whether its attributes can be altered
starting with ECMA Script5, properties attributes can be configured
in addition to its properties,
every object has three associated object attributes
an object’s prototype is a reference to another object from which properties are inherited
an object’s class is a string that categorizes the type of an object
an object’s extensible flag specifies (in ECMAScript 5) whether new properties may be added to the object
categories of objects
native object
an object or class of objects defined by the ECMAScript specification (like arrays, functions, dates, and regular expressions)
host object
an object defined by the host environment (such as a web browser)
within which the JavaScript interpreter is embedded
(like HTMLElement objects that represent the structure of a web page in client-side JavaScript)
host objects may also be native objects, as when the host environment defines
methods that are normal JavaScript Function objects
user-defined object
any object created by the execution of JavaScript code
types of properties
own property
a property defined directly on an object
inherited property
a property defined by an object’s prototype object
with object literals
with the new keyword
with the Object.create() function
Object literal = a comma-separated list of colon-separated
name: value pairs, enclosed within curly braces
a property name is a JavaScript identifier or a string literal
(the empty string is allowed,
no object may have two properties with the same name)
a property value is any JavaScript expression
in general property names that are reserved words must be quoted
an object literal is an expression that creates and initializes
a new and distinct object each time it is evaluated
=>
the value of each property is evaluated
each time the literal is evaluated
this means that a single object literal can create many
new objects if it appears within the body of a loop in a function that is called repeatedly, and that the property values of these objects may differ from each other
the new operator creates and initializes a new object
the new keyword must be followed by a function invocation
a function used in this way is called a constructor and serves
to initialize a newly created object
core JavaScript includes built-in constructors for native types
Object(), Array(), Date(), RegExp()
in addition to these built-in constructors, it is common to define
own constructor functions to initialize newly created objects
a "constructor" in JavaScript is "just" a function that happens to be called with the new operator
every JavaScript object has a second JavaScript object associated with it (to which it has an internal link) which is known as its prototype
the first object inherits properties from the prototype
all objects created by object literals have
the same prototype object - Object.prototype
objects created using the new keyword and a constructor invocation use the value of the prototype property of the constructor function as their prototype
each prototype object has a prototype of its own, so the links continue until an object is reached with null as its prototype
this linked series of prototype objects
is known as a prototype chain
null
by definition has no prototype
and
acts as the final link in the prototype chain
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
Object.prototype is one of the rare objects
that has no prototype: it does not inherit any properties
other prototype objects are normal objects
that do have a prototype
all of the built-in constructors
(and most user-defined constructors)
have a prototype that inherits from Object.prototype
var o = {a: 1};
// The newly created object o has Object.prototype as its [[Prototype]]
// o has no own property named 'hasOwnProperty'
// hasOwnProperty is an own property of Object.prototype. So o inherits hasOwnProperty from Object.prototype
// Object.prototype has null as its prototype.
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// Arrays inherit from Array.prototype (which has methods like indexOf, forEach, etc.)
// The prototype chain looks like:
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
return 2;
}
// Functions inherit from Function.prototype (which has methods like call, bind, etc.)
// f ---> Function.prototype ---> Object.prototype ---> nullfunction Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function(v){
this.vertices.push(v);
}
};
var g = new Graph();
// g is an object with own properties 'vertices' and 'edges'.
// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed.a method that creates a new object,
using its first argument as the prototype of that object
the method also takes an optional second argument
that describes the properties of the new object
Object.create() is a static function, not a method invoked on individual objects (???)
Text
// create new object that has no prototype, inherits no properties or methods
var o1 = Object.create(null);
// create an ordinary empty object like {} or new Object()
var o2 = Object.create(Object.prototype);
// create new object which inherits properties x and y
var o3 = Object.create({x:1, y:2});
var a = {a: 1};
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (inherited)
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined, because d doesn't inherit from Object.prototypeto obtain the value of a property
the dot (.) or square bracket ([ ]) operators need to be used
the left-hand side should be
an expression whose value is an object
if using the dot operator, the right-hand
must be a simple identifier that names the property
if using square brackets, the value within the brackets
must be an expression that evaluates to a string
that contains the desired property name
( or a value that can be converted to a string )
to create or set a property
dot or square brackets are used
(as done when querying the property)
but
on the left-hand side of an assignment expression
etc etc .... pui tu alte exemple, si mai complexe :D
// get the "author" property of the book object
var author = book.author;
// get the "surname" property of the author object
var name = author.surname;
var name = book.author.surname;
// get the "main title" property of the book object
var title = book["main title"];
// create a "edition" property for the book object
book.edition = 6;
// set the "main title" property
book["main title"] = "JavaScript Basics"object.property
similar to syntax used to access static field of a structure
object["property"]
looks like array access, but to an array indexed by strings,
also known as associative array (hash / map / dictionary)
if both expressions have the same value...
why are there two ways of accessing properties?
in C, C++, Java, and similar strongly typed languages
an object can have only a fixed number of properties
and the names of these properties must be defined in advance
so using the dot and an identifier
is like the syntax used to access a static field
identifiers must be typed literally, they are not a datatype,
so they cannot be manipulated by the program
JavaScript is a loosely typed language, so a program
can create any number of properties in any object (at any time ?)
when accessing a property of an object with the [ ] array
notation the name of the property is expressed as a string
strings are JavaScript datatypes, so they can be manipulated and created while a program is running (dynamic)
using strings provides the flexibility
of accessing properties with string expressions
JavaScript objects have a set of own properties
and
also inherit a set of properties from their prototype object
when querying a property of an object, an own property is sought
if the prototype object does not have an own property by that name, but has a prototype itself, the query is performed on the prototype
this continues (through the prototype chain) until the property is
found or until an object with a null prototype is searched
// Let's assume we have an object o with its prototype chain looking like:
// {a:1, b:2} ---> {b:3, c:4} ---> null
// 'a' and 'b' are o own properties.
// In this example, someObject.[[Prototype]] will designate the prototype of someObject.
// This is a pure notation (based on the one used in the ECMAScript standard) and cannot be used in scripts.
// The equivalent property to use in scripts is called "__proto__" as in someObject.__proto__
console.log(o.a); // 1
// Is there an 'a' own property on o? Yes and its value is 1
console.log(o.b); // 2
// Is there a 'b' own property on o? Yes and its value is 2
// The prototype also has a 'b' property, but it's not visited. This is called "property shadowing"
console.log(o.c); // 4
// Is there a 'c' own property on o? No, check its prototype
// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4
console.log(o.d); // undefined
// Is there a 'd' own property on o? No, check its prototype
// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype
// o.[[Prototype]].[[Prototype]] is null, stop searching, no property found, return undefinedJavaScript does not have "methods" in the form that
class-based languages define them
any function can be added to an object in the form of a property
an inherited function acts just as any other property, including property shadowing (in this case, a form of method overriding)
when an inherited function is executed, the value of this
points to the inheriting object, not to the prototype object where the function is an own property
the fact that inheritance occurs when querying properties but not when setting them is a key feature of JavaScript because it allows to selectively override inherited properties
explicatii & exemple bune http://phrogz.net/js/classes/OOPinJS.html
the lookup time for properties that are high up on the prototype chain can have a negative impact on performance, and this may be significant in code where performance is critical
additionally, trying to access nonexistent properties will always traverse the full prototype chain
also, when iterating over the properties of an object, every property that is on the prototype chain will be enumerated
to check whether an object has a property defined on itself and not somewhere on its prototype chain, it is necessary to use the hasOwnProperty method which all objects inherit from Object.prototype
hasOwnProperty is the only thing in JavaScript which deals with properties and does not traverse the prototype chain
! it is not enough to check whether a property is undefined
the property might very well exist, but its value just happens to be set to undefined
one mis-feature that is often used is to extend Object.prototype or one of the other built-in prototypes
this technique is called monkey patching and breaks encapsulation
while used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional non-standard functionality
the only good reason for extending a built-in prototype is to backport the features of newer JavaScript engines (for example Array.forEach, etc.)
! so native prototypes should never be extended unless it is for the sake of compatibility with newer JavaScript features