UNDERSTANDING OBJECT
- What is Object ?
- Properties
OBJECT CREATION
- The Factory Pattern
- The Constructor Pattern
- The Prototype Pattern
- Combination Constructor/Prototype Pattern
INHERITANCE
- Prototype Chaining
- Constructor Stealing
- Combination Inheritance
- Prototypal Inheritance

Before we talk about Object, maybe we should talk a lil bit about ECMA-262, Because we will maybe use this word many times in this presentation.
This is a standard defines the ECMAScript scripting language, and for someone who is still have no idea what is ECMAScript : the scripting language standardized by Ecma International in the ECMA-262
ECMA-262 defines an object as an "unordered collection of properties each of which contains a primitive value, object, or function.". Each property or method is identified by a name that is mapped to a value.
Actually, It’s nothing more than a grouping of name-value pairs where the value may be data or a function.
Just take a look at this example :
But why does this work? I mean, what actually happened underground when we add a name-value pair ( a property ) to an object and the result is the object has the property with name and value inside?

1. What is Object ?

ECMA-262
a standard defines the ECMAScript scripting language
ECMAScript
the scripting language standardized by Ecma International in the ECMA-262
What is object ? : "Unordered collection of properties each of which contains a primitive value, object, or function."
name-value pairs

  var person = {
    name: "Hans",
    age: 26,
    job: "Super Junior Developer",
    sayName: function(){
        console.log(this.name);
    }
  };

1. What is Object ?

[[Put]] ( first time )
- creates a spot in the object to store the property
- The result of calling [[Put]] is the creation of an own property on the object.
[[Set]]
- This operation replaces the current value of the property with the new one.

  var person = {
    name: "Hans",
    age: 26,
    job: "Super Junior Developer",
    sayName: function(){
        console.log(this.name);
    }
  };
  person.name = "Le Roi";

  var object1, object2;
  object1 = {
    a: 3.14159
  }
  object2 = object1;

The real picture is :

What is instance and references ? :S

A variable will hold a reference to an instance of an object.
The actual object is an instance

[[Configurable]] : Indicates if the property may be redefined by removing the property via delete, changing the property’s attributes, or changing the property into an accessor property. By default, this is true for all properties defined directly on an object, as in the previous example.
[[Enumerable]] : Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object, as in the previous example.
[[Writable]] — Indicates if the property’s value can be changed. By default, this is true for all properties defined directly on an object, as in the previous example.
[[Value]] — Contains the actual data value for the property. This is the location from which the property’s value is read and the location to which new values are saved. The default value for this attribute is undefined
So in the previous example, the property called a is created and a value of 3.14159 is assigned. That means [[Value]] is set to 3.14159, and any changes to that value are stored in this location.
How about the other internal attributes? We can change them though a method of ECMAScript 5: Object.defineProperty().

Properties

Data properties

Data properties contain a single location for a data value. Values are read from and written to this location
Data properties have four attributes describing their behavior :
- [[Configurable]]
- [[Enumerable]]
- [[Writable]]
- [[Value]]
[[Configurable]], [[Enumerable]], [[Writable]] are true for all properties defined directly on an object, as in the previous example.
[[Value]] attribute is set to the assigned value.
Object.defineProperty().

ECMAScript 5: Object.defineProperty()

  var person1 = {};

  Object.defineProperty(person1, "name", {
    value: "Neo",
    enumerable: true,
    configurable: true,
    writable: true
  });

Setting configurable to false means that the property cannot be removed from the object.
Once a property has been defined as nonconfigurable, it cannot become configurable again.

This method accepts three arguments: the object on which  the property should be added or modified, the name of the property, and a descriptor object… like this :
That’s it, but there is something you should know that setting configurable to false means that the property cannot be removed from the object. Calling delete on the property has no effect in nonstrict mode and throws an error in strict mode. Additionally, once a property has been defined as nonconfigurable, it cannot become configurable again. Any attempt to call Object.defineProperty() and change any attribute other than writable causes an error:
That means you can call Object.defineProperty() multiple times for the same property, but there are limits once configurable has been set to false

ECMAScript 5: Object.defineProperty()

  var person = {};
  Object.defineProperty(person, "name", {
    configurable: false,
    value: "Neo"
  });

  Object.defineProperty(person, "name", {
    configurable: true, // ← error here
    value: "Neo"
  }); // this will throw an error

Note : Internet Explorer 8 was the first version to implement Object .defineProperty(). Unfortunately, the implementation is extremely limited. This method can be used only on DOM objects and can create only accessor properties.

Accessor Properties contain a combination of a getter function and a setter function (though both are not necessary). When an accessor property is read from, the getter function is called, and it’s the function’s responsibility to return a valid value; when an accessor property is written to, a function is called with the new value, and that function must decide how to react to the data.
[[Configurable]] — Indicates if the property may be redefined by removing the property via delete, changing the property’s attributes, or changing the property into a data property. By default, this is true for all properties defined directly on an object.
[[Enumerable]] — Indicates if the property will be returned in a for-in loop. By default, this is true for all properties defined directly on an object.
[[Get]] — The function to call when the property is read from. The default value is undefined.
[[Set]] — The function to call when the property is written to. The default value is undefined.

Properties

Accessor properties

Accessor Properties contain a combination of a getter function and a setter function (though both are not necessary).
Accessor properties have four attributes:
- [[Configurable]]
- [[Enumerable]]
- [[Get]]
- [[Set]]
[[Configurable]], [[Enumerable]] are true for all properties defined directly on an object, as in the previous example.
When an accessor property is read from, the getter function [[Get]] is called
when an accessor property is written to, the setter function [[Set]] is called.
It is not possible to define an accessor property explicitly so you must use Object.defineProperty().

ECMAScript 5: Object.defineProperty()

  var book = { _year: 2004, edition: 1 };
  Object.defineProperty(book, “year”,
  {
    get: function(){ return this._year; },
    set: function(newValue){
      if (newValue > 2004) {
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  });
  book.year = 2005;
  alert(book.edition); //2

It’s not necessary to assign both a getter and a setter. Assigning just a getter means that the property cannot be written to and attempts to do so will be ignored.

It’s also possible to retrieve the property descriptor for a given property by using the ECMAScript 5 Object.getOwnPropertyDescriptor() method. This method accepts two arguments: the object on which the property resides and the name of the property whose descriptor should be retrieved. The return value is an object with properties for configurable, enumerable, get, and set for accessor properties or configurable, enumerable, writable, and value for data properties.
Why enumerable and configurable properties are false, why aren’t they true like the information above ? Remember this line : “this is true for all properties defined directly on an object.” In the nearest example, we didn’t define it directly on an object, we defined it through Object.defineProperties method, and that’s why they are false. Just console it out :
See ? except get and set are functions, enumerable and configurable are false.

ECMAScript 5 Object.getOwnPropertyDescriptor()

  var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
  alert(descriptor.value);          //2004
  alert(descriptor.configurable);   //true
  alert(typeof descriptor.get);     //"undefined"
  var descriptor = Object.getOwnPropertyDescriptor(book, "year");
  alert(descriptor.value);          //undefined
  alert(descriptor.enumerable);     //false
  alert(typeof descriptor.get);     //"function"

It’s not necessary to assign both a getter and a setter. Assigning just a getter means that the property cannot be written to and attempts to do so will be ignored.

  console.log(descriptor);
  Object {get: function, set: function, enumerable: false, configurable: false }

OBJECT CREATION

The Factory Pattern

The factory pattern is a well-known design pattern used in software engineering to abstract away the process of creating specific objects

  function Person(name, age, job) {
  return {
      name : name,
      age  : age,
      job  : job,
      run  : function() { alert(name + " is running!"); }
    }
  }
  var person1 = Person("Hans")
  person1.run();
  person1 instanceof Object;   //true
  person1 instanceof Person;   //false

Meme Dinosaur

"Oh my god, I’m not a person ... but I can run. What am I really ?"

constructors in ECMAScript are used to create specific types of objects. There are native constructors, such as Object and Array, which are available automatically in the execution environment at runtime. It is also possible to define custom constructors that define properties and methods for your own type of object.
The differences between the function Person above and the function Person in previous example are :
By convention, constructor functions always begin with an uppercase letter, whereas non-constructor functions begin with a lowercase letter. This convention is borrowed from other OO languages and helps to distinguish function use in ECMAScript, since constructors are simply functions that create objects.
At the end of the preceding example, person1 and person2 are each filled with a different instance of Person. Each of these objects has a constructor property that points back to Person, as follows:

OBJECT CREATION

The Constructor Pattern

  function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){ alert(this.name); };
  }
  var person1 = new Person(“Le Roi”, 27, “Super Star Singer”);
  var person2 = new Person(“Le Hai Thinh”, 26, “Psychology Doctor”);
  alert(person1.constructor === Person); //true 
  alert(person2.constructor === Person); //true

There is no object being created explicitly.
The properties and method are assigned directly onto the this object.
There is no return statement.

The constructor property was originally intended for use in identifying the object type. However, the instanceof operator is considered to be a safer way of determining type. Each of the objects in this example is considered to be both an instance of Object and an instance of Person, as indicated by using the instanceof operator like this:
The only difference between constructor functions and other functions is the way in which they are called. Constructors are, after all, just functions; there’s no special syntax to define a constructor that automatically makes it behave as such. Any function that is called with the new operator acts as a constructor, whereas any function called without it acts just as you would expect a normal function call to act.

OBJECT CREATION

The Constructor Pattern

  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true

All custom objects inherit from Object.
Constructors are just functions
Function that is called with the new operator acts as a constructor

OBJECT CREATION

The Constructor Pattern

  //use as a constructor
  var person = new Person("Le Roi", 26, "Singer");
  person.sayName(); //"Le Roi"

  //call as a function
  Person("Le Tuon Roi", 27, "Graphic Designer of NAU"); //adds to window
  window.sayName(); //"Le Tuon Roi"

  //call in the scope of another object
  var o = new Object();
  Person.call(o, "Kristen", 25, "Nurse");
  o.sayName(); //"Kristen"

  o instanceof Person // "false"

OBJECT CREATION

The Constructor Pattern

  function Person(name, age, job){ this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = new Function(“alert(this.name)”);  //logical equivalent
  }

  alert(person1.sayName === person2.sayName); //false

OBJECT CREATION

The Constructor Pattern

  function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = sayName;
  }
  function sayName(){
    alert(this.name);
  }

OBJECT CREATION

The Prototype Pattern

Each function is created with a prototype property, which is an object containing properties and methods that should be available to instances of a particular reference type.
This object is a prototype for the object to be created once the constructor is called.
All of its properties and methods are shared among object instances.
By default, all prototypes automatically get a property called constructor that points back to the function on which it is a property
There is no standard way to access [[Prototype]] from script, but Firefox, Safari, and Chrome all support a property on every object called __proto__., in other implementations, this property is completely hidden from script.

OBJECT CREATION

The Prototype Pattern

  function Person(){ }
  Person.prototype.name = "Hans";
  Person.prototype.age = 26;
  Person.prototype.job = "Super Junior";
  Person.prototype.sayName = function(){
    alert(this.name);
  };

  var person1 = new Person();
  person1.sayName(); //"Hans"

  var person2 = new Person();
  person2.sayName(); //"Hans"

  alert(person1.sayName === person2.sayName); //true

Consider the previous example using the Person constructor and Person.prototype. The relationship between the objects in the example is shown in the picture under.
Each instance of Person, person1, and person2 has internal properties that point back to Person.prototype only. That Person.prototype points to the prototype object but Person.prototype.constructor points back to Person. The prototype contains the constructor property and the other properties that were added.
Whenever a property is accessed for reading on an object, a search is started to find a property with that name. The search begins on the object instance itself.
If a property with the given name is found on the instance, then that value is returned; if the property is not found, then the search continues up the pointer to the prototype, and the prototype is searched for a property with the same name.
If the property is found on the prototype, then that value is returned. So, when person1.sayName() is called, a two-step process happens. First, the JavaScript engine asks, “Does the instance person1 have a property called sayName?” The answer is no, so it continues the search and asks, “Does the person1 prototype have a property called sayName?” The answer is yes, so the function stored on the prototype is accessed.
When person2.sayName() is called, the same search executes, ending with the same result. This is how prototypes are used to share properties and methods among multiple object instances

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

  function Person(){ }
  Person.prototype.name = “Thang”;
  Person.prototype.age = 26;
  Person.prototype.job = “Minior”;
  Person.prototype.sayName = function(){
    alert(this.name);
  };
  var person1 = new Person();
  var person2 = new Person();

  person1.name = “Le Roi”;

  alert(person1.name);   //”Le Roi” - from instance
  alert(person2.name);   //” Thang” - from prototype

  delete person1.name;
  alert(person1.name);   //”Thang” - from the prototype

  // Yeah, we should remove Le Roi, I dun like that name.

OBJECT CREATION

The Prototype Pattern

hasOwnProperty()

Returns true only if a property of the given name exists on the object instance, as in this example:

  alert(person1.hasOwnProperty(“name”));  //false
  person1.name = “Trang”;
  alert(person1.name); //”Trang” - from instance
  alert(person1.hasOwnProperty(“name”));  //true

in operator

Returns true when a property of the given name is accessible by the object, which is to say that the property may exist on the instance or on the prototype.

  alert(person2.hasOwnProperty(“name”)); //false
  alert(“name” in person2); //true

OBJECT CREATION

The Prototype Pattern

  function Person(){
  }
  Person.prototype = {
      name : “Nicholas”,
      age : 29,
      job : “Software Engineer”,
      sayName : function () {
          alert(this.name);
      }
  };

But

  var friend = new Person();
  alert(friend instanceof Object); //true
  alert(friend instanceof Person); //true
  alert(friend.constructor === Person); //false
  alert(friend.constructor === Object); //true

OBJECT CREATION

The Prototype Pattern

  function Person(){ }
  Person.prototype = {
    constructor: Person,
    name : “Nicholas”,
    age : 29,
    job : “Software Engineer”,
    sayName : function () {
      alert(this.name);
    }
  };

Using Object.defineProperty()

  //ECMAScript 5 only – restore the constructor
  Object.defineProperty(Person.prototype, “constructor”, {
    enumerable: false,
    value: Person
  });

OBJECT CREATION

The Prototype Pattern

  function Person(){
  }
  var friend = new Person();
  Person.prototype = {
    constructor: Person,
    name : “Nicholas”,
    age : 29,
    job : “Software Engineer”,
    sayName : function () {
      alert(this.name);
    }
  };
  friend.sayName(); //error

Why it throws error ?

OBJECT CREATION

The Prototype Pattern

All properties on the prototype are shared among instances. Properties that contain primitive values also tend to work well, as shown in the previous example, where it’s possible to hide the prototype property by assigning a property of the same name to the instance.
The real problem occurs when a property contains a reference value. Consider the following example:
Because the friends array exists on Person.prototype, not on person1, the changes made are also reflected on person2.friends (which points to the same array).
If the intention is to have an array shared by all instances, then this outcome is okay. Typically, though, instances want to have their own copies of all properties. This is why the prototype pattern is rarely used on its own.

OBJECT CREATION

The Prototype Pattern

  function Person(){}
  Person.prototype = {
    constructor: Person,
    name : “Le Roi”,
    age : 29,
    job : “Singer”,
    friends : [“Thuy TOP”, “Phuong Trinh”],
    sayName : function () {
      alert(this.name);
    }
  };
  var person1 = new Person();
  var person2 = new Person();

  person1.friends.push(“Phi Thanh Van”);

  alert(person1.friends);    //   ”Thuy TOP,Phuong Trinh,Phi Thanh Van”
  alert(person2.friends);    //   ”Thuy TOP,Phuong Trinh,Phi Thanh Van”
  alert(person1.friends === person2.friends);  //true

The most common way of defining custom types is to combine the constructor and prototype patterns.
The constructor pattern defines instance properties, whereas the prototype pattern defines methods and shared properties. With this approach, each instance ends up with its own copy of the instance properties, but they all share references to methods, conserving memory.
This pattern allows arguments to be passed into the constructor as well, effectively combining the best parts of each pattern. The previous example can now be rewritten as follows:
The hybrid constructor/prototype pattern is the most widely used and accepted practice for defining custom reference types in ECMAScript. Generally speaking, this is the default pattern to use for defining reference types.
There are many patterns but we don’t have time so I think we should stop here and if you’re still curious about these patterns, there is a online book you can take a look.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/

OBJECT CREATION

Combination Constructor/Prototype Pattern

  function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = [“Trang”, “Vu”];
  }
  Person.prototype = {
    constructor: Person,
    sayName : function () {
      alert(this.name);
    }
  };
  var person1 = new Person(“Hans”, 26, “Terrorist”);
  var person2 = new Person(“Thang”, 23, “Cop”);

  person1.friends.push(“Thang”);

  alert(person1.friends); //” Trang,Vu,Thang”
  alert(person2.friends); //” Trang,Vu”
  alert(person1.friends === person2.friends); //false
  alert(person1.sayName === person2.sayName); //true

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

Oppz ! Not that guy, I mean Prototype Chaining, not him...

ECMA-262 describes prototype chaining as the primary method of inheritance in ECMAScript.
The basic idea is to use the concept of prototypes to inherit properties and methods between two reference types. Recall the relationship between constructors, prototypes, and instances: each constructor has a prototype object that points back to the constructor, and instances have an internal pointer to the prototype.
What if the prototype were actually an instance of another type?
That would mean the prototype itself would have a pointer to a different prototype that, in turn, would have a pointer to another constructor.
If that prototype were also an instance of another type, then the pattern would continue, forming a chain between instances and prototypes. This is the basic idea behind prototype chaining.

INHERITANCE

Prototype Chaining

  function SuperType(){
    this.property = true;
  }
  SuperType.prototype.getSuperValue = function(){
     this.property;
  };
  function SubType(){
    this.subproperty = false;
  }

  //inherit from SuperType
  SubType.prototype = new SuperType();
  SubType.prototype.getSubValue = function (){
    return this.subproperty;
  };
  var instance = new SubType();
  alert(instance.getSuperValue()); //true

This code defines two types: SuperType and SubType. Each type has a single property and a single method. The main difference between the two is that SubType inherits from SuperType by creating a new instance of SuperType and assigning it to SubType.prototype.
This overwrites the original prototype and replaces it with a new object, which means that all properties and methods that typically exist on an instance of SuperType now also exist on SubType.prototype. After the inheritance takes place, a method is assigned to SubType.prototype, adding a new method on top of what was inherited from SuperType.
Instead of using the default prototype of SubType, a new prototype is assigned. That new prototype happens to be an instance of SuperType, so it not only gets the properties and methods of a SuperType instance but also points back to the SuperType’s prototype. So instance points to SubType.prototype, and SubType.prototype points to SuperType.prototype.
Note that the getSuperValue() method remains on the SuperType.prototype object, but property ends up on SubType.prototype. That’s because getSuperValue() is a prototype method, and property is an instance property. SubType.prototype is now an instance of SuperType, so property is stored there. Also note that instance.constructor points to SuperType, because the constructor property on the SubType.prototype was overwritten.
Prototype chaining extends to the prototype search mechanism described earlier. As you may recall, when a property is accessed in read mode on an instance, the property is first searched for on the instance. If the property is not found, then the search continues to the prototype.
When inheritance has been implemented via prototype chaining, that search can continue up the prototype chain. In the previous example, for instance, a call to instance.getSuperValue() results in a three-step search:
1) the instance,
2) SubType.prototype, and
3) SuperType.prototype, where the method is found.
The search for properties and methods always continues until the end of the prototype chain is reached.
In reality, there is another step in the prototype chain. All reference types inherit from Object by default, which is accomplished through prototype chaining. The default prototype for any function is an instance of Object, meaning that its internal prototype pointer points to Object .prototype.

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

  function SuperType(){
    this.property = true;
  }
  SuperType.prototype.getSuperValue = function(){
    return this.property;
  };
  function SubType(){
    this.subproperty = false;
  }
  //inherit from SuperType
  SubType.prototype = new SuperType();
  //try to add new methods - this nullifies the previous line
  SubType.prototype = {
   getSubValue : function (){
      return this.subproperty;
    },
    someOtherMethod : function (){
      return false;
    }
  };
  var instance = new SubType();
  alert(instance.getSuperValue()); //error!

INHERITANCE

Prototype Chaining

  function SubType(){ }
  //inherit from SuperType
  SubType.prototype = new SuperType();

  var instance1 = new SubType();
  instance1.colors.push(“black”);
  alert(instance1.colors); //”red,blue,green,black”

  var instance2 = new SubType();
  alert(instance2.colors); //”red,blue,green,black”

INHERITANCE

Constructor Stealing

  function SuperType(){
    this.colors = [“red”, “blue”, “green”];
  }
  function SubType(){
    //inherit from SuperType
    SuperType.call(this);
  }
  var instance1 = new SubType();
  instance1.colors.push(“black”);
  alert(instance1.colors); //”red,blue,green,black”

  var instance2 = new SubType();
  alert(instance2.colors); //”red,blue,green

One advantage that constructor stealing offers over prototype chaining is the ability to pass arguments into the supertype constructor from within the subtype constructor. Consider the following:
The downside to using constructor stealing exclusively is that it introduces the same problems as the constructor pattern for custom types: methods must be defined inside the constructor, so there’s no function reuse.
Furthermore, methods defined on the supertype’s prototype are not accessible on the subtype, so all types can use only the constructor pattern. Because of these issues, constructor stealing is rarely used on its own.

INHERITANCE

Constructor Stealing

  function SuperType(name){
    this.name = name;
  }
  function SubType(){
    //inherit from SuperType passing in an argument
    SuperType.call(this, “Le Roi”);
    //instance property
    this.age = 29;
  }
  var instance = new SubType();
  alert(instance.name); //”Le Roi”;
  alert(instance.age); //29

Combination inheritance (sometimes also called pseudoclassical inheritance) combines prototype chaining and constructor stealing to get the best of each approach.
The basic idea is to use prototype chaining to inherit properties and methods on the prototype and to use constructor stealing to inherit instance properties.
This allows function reuse by defining methods on the prototype and allows each instance to have its own properties. Consider the following:
Addressing the downsides of both prototype chaining and constructor stealing, combination inheritance is the most frequently used inheritance pattern in JavaScript.

INHERITANCE

Combination Inheritance

  function SuperType(name){
    this.name = name;
    this.colors = [“red”, “blue”, “green”];
  }
  SuperType.prototype.sayName = function(){
    alert(this.name);
  };
  function SubType(name, age){
    //inherit properties
    SuperType.call(this, name);
    this.age = age;
  }
  //inherit methods
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function(){
    alert(this.age);
  };
  var instance1 = new SubType(“Le Roi”, 26);
  instance1.colors.push(“black”);
  alert(instance1.colors); //”red,blue,green,black”
  instance1.sayName(); //”Le Roi”;
  instance1.sayAge(); //26
  var instance2 = new SubType(“Le Coc”, 27);
  alert(instance2.colors); //”red,blue,green”
  instance2.sayName(); //”Le Coc”;
  instance2.sayAge(); //27

INHERITANCE

Prototypal Inheritance

“Hello, I’m Douglas Crockford, a Hans’s friend”

http://javascript.crockford.com/prototypal.html

INHERITANCE

Prototypal Inheritance

  function object(o){
    function F(){}
    F.prototype = o;
    return new F();
  }

  var person = {
    name: “Douglas”,
    friends: [“Quy”, “Thanh”, “Thinh”]
  };

  var anotherPerson = object(person);
  anotherPerson.name = “Le Roi”;
  anotherPerson.friends.push(“Vu”);

  var yetAnotherPerson = object(person);
  yetAnotherPerson.name = “Linda Kieu”;
  yetAnotherPerson.friends.push(“Thang”);

  alert(person.friends); //”Quy,Thanh,Thinh,Vu,Thang”

INHERITANCE

Prototypal Inheritance

  var person = {
    name: “Douglas”,
    friends: [“Quy”, “Thanh”, “Thinh”]
  };

  var anotherPerson = Object.create(person);
  anotherPerson.name = “Le Roi”;
  anotherPerson.friends.push(“Vu”);

  var yetAnotherPerson = Object.create(person);
  yetAnotherPerson.name = “Linda Kieu”;
  yetAnotherPerson.friends.push(“Thao”);
  alert(person.friends); //” Quy,Thanh,Thinh,Vu,Thao”

<Thank You!>

Important contact information goes here.

Contents

1. What is Object ?

1. What is Object ?

What is instance and references ? :S

Properties

Data properties

ECMAScript 5: Object.defineProperty()

ECMAScript 5: Object.defineProperty()

Properties

Accessor properties

ECMAScript 5: Object.defineProperty()

ECMAScript 5 Object.getOwnPropertyDescriptor()

OBJECT CREATION

The Factory Pattern

Meme Dinosaur

OBJECT CREATION

The Constructor Pattern

OBJECT CREATION

The Constructor Pattern

OBJECT CREATION

The Constructor Pattern

OBJECT CREATION

The Constructor Pattern

OBJECT CREATION

The Constructor Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

hasOwnProperty()

in operator

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

The Prototype Pattern

OBJECT CREATION

Combination Constructor/Prototype Pattern

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Prototype Chaining

INHERITANCE

Constructor Stealing

INHERITANCE

Constructor Stealing

INHERITANCE

Combination Inheritance

INHERITANCE

Prototypal Inheritance

INHERITANCE

Prototypal Inheritance

INHERITANCE

Prototypal Inheritance

<Thank You!>