Create an object
In Javascript, almost everything is an object or acts like an object.Understand objects and you will understand Javascript.
The object is a collection of values(properties).
[codepen_embed height="265" theme_id="0" slug_hash="GvzEpJ" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/GvzEpJ/'>Objects</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Objects are just containers for properties, each of which has a name and a value.
The person object is a value which is expressed as a Javascript object by creating an object, giving the object a name and then give the object properties.
If we want to do something with the person object we have to add a property method . Property method perform a function.
[codepen_embed height="265" theme_id="0" slug_hash="ZJwXBB" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/ZJwXBB/'>Property Method</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Constructor functions
The role of a constructor function is to create multiple objects that share certain qualities and behaviors.
A constructor is like a function IF that function is invoked using the new keyword.
[codepen_embed height="265" theme_id="0" slug_hash="RZvLKq" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/RZvLKq/'>RZvLKq</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Javascript native/build-in object constructors
Javascript contains nine native object constructors:
Number()
String()
Boolean()
Object()
Array()
Function()
Date()
RegExp()
Error()
Creating shorthand/literal values from constructors
Javascript provides shortcuts - called "literals" - for manufacturing most of the native object values without having to use new Foo() or new Bar().The exceptions are: Number(), String() and Boolean()
[codepen_embed height="265" theme_id="0" slug_hash="xLMXrp" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/xLMXrp/'>Creating shorthand/literal values from constructors</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Primitive values
The Javascript values 5,'foo', true and false, as well as null and undefined, are considered primitive because they are irreducible.
Object.defineProperty()
The Object.defineProperty() can be used inside of a constructor to help perform all necessary property setup. Consider the following constructor:
[codepen_embed height="265" theme_id="0" slug_hash="Evrwvb" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/Evrwvb/'>Object.defineProperty()</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
A getter is expected to return a value, while a setter receives the value being assigned to the property as an argument. This constructor allows us to set or change the name property of instances, but we are not allowed to delete it, and when we get the value of name, the getter prepends the string "Book: " to the name and returns it.
Object Literal Notations are Preferred to Constructors
[codepen_embed height="265" theme_id="0" slug_hash="KvJXXM" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/KvJXXM/'>Object Literal Notations are Preferred to Constructors</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Using the "new" Keyword is Essential
Scope-Safe Constructors
[codepen_embed height="265" theme_id="0" slug_hash="yoZzPV" default_tab="result" user="frontdead"]See the Pen <a href='https://codepen.io/frontdead/pen/yoZzPV/'>Scope-Safe Constructor</a> by frontdead (<a href='https://codepen.io/frontdead'>@frontdead</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]
Since a constructor is just a function, it can be called without the new keyword, but this leads to unexpected results and errors especially for inexperienced programmers. The solution to this problem is scope-safe constructors.
to be continued...
Σχόλια
Δημοσίευση σχολίου