<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script-log.js"></script>
</head>
<body>
<a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts">ACE Shortcuts</a>
<br />
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
"use strict";
var log = window.log; // gets rid of some lint warnings
var pre = window.pre;
var newLine = window.newLine;
console.clear();
// Constructor Function
function Person(first, last, age, gender, interests) {
this.name1 = first;
}
Person.prototype.protoFun1 = function (){console.log("proto function 1")};
Person.internalFun = function internalFun(){console.log("internal")};
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
person1.protoFun1();
person1.constructor.internalFun();
var person2 = Object.create(person1);
person2.protoFun1();
console.log(person1.name1)
console.log(person2.name1)
debugger;
/* Styles go here */
/* Styles go here */
body {
font-size: 0.8em;
}
[MDN Learning - Introduction to Javascript Objects][1]
[Prototypes][2]
Each object in JS has a **prototype object**, which acts as a template object that it
inherits methods and properties from. An object's **prototype object may also
have a prototype object**, which it inherits methods and properties from,
and so on. This is often referred to as a **prototype chain**
**Object `prototype chain` - instance created via 'var person = new Person("Angela");**
```js
person1 object: {
thisValues: "30",
firstName: "Angela",
//created in super constructor e.g this.firstName = name
__proto__: { // reference to constructors prototype (not it's __proto__)
constructor: Person(names, date, etc), // ref to the constructor funct
protoFunct1: (), // Person.prototype defined functions that are inherited
protoFunct2: (),
__proto__: Object {
valueOf(): {}
etc.
}
}
}
}
```
**Constructor Function - has `prototype` and `__proto__` after initialization**
```js
Person: Function {
arguments:(...),
// The `prototype` property that instances' __proto__ reference and
// that sub class add as a property on their own prototype
prototype: Object {
constructor: Person // reference to itself i.e. Person function
protoFunct1: (), // added via Person.prototype.protoFunct1 = (){};
protoFunct2: (),
__proto__: Object // as prototype is an object
},
__proto__: () Function {
__proto__: Object{
}
}
}
```
In classic OOP, classes are defined, then when object instances are created all
the properties and methods defined on the class are copied over to the instance.
In JavaScript, **they are not copied over** — instead, a **link is made between the
object instance and its constructor** (a link in the prototype chain), and the
properties and methods are found in the constructor by walking up the chain.
* In Debugger, type `String.prototype`, to see all the available functions
**Object.create(proto[, propertiesObject])**
* creates an object, with proto param assigned to it's `prototype` (__proto__) property
* if using `Student.prototype = Object.create(Person.prototype)`, need to assign
Student to Student.prototype.constructor and set the Student.prototype.methods
= ? afterwards
`var person2 = Object.create(person1);` returns:
```js
"person2":
{
__proto__{ // all new objects have a proto, and person1 is assigned to it
// person1 has
firstName: "Angela"
__proto__{ // reference to person1 constructors prototype
constructor:Function,
prototypeMethods,
__proto__:Object{
}
}
}
}
```
* calling `person2.firstName`, will first search in person2 object, then walk it's
`__proto__ chain` where it will find firstName. Same will happen for methods
A common pattern for object definitions is to define the
properties inside the constructor, and the methods on the prototype.
Constant properties can be defined on the prototype if needs be, but rare.
```javascript
"use babel";
document.onload = (e) => {
alert('I just annoyed whoever visited this page! USING ES6!');
};
```
[1]: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects
[2]: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
function log(value){
var output = document.getElementById("output");
var node = document.createElement("div");
var textnode;
if(typeof value === "string")
{
textnode = document.createTextNode(value);
}
else
{
textnode = document.createTextNode(JSON.stringify(value));
}
node.appendChild(textnode);
output.appendChild(node);
}
function pre(value){
var output = document.getElementById("output");
var node = document.createElement("pre");
var textnode;
if(typeof value === "string")
{
textnode = document.createTextNode(value);
}
else
{
textnode = document.createTextNode(JSON.stringify(value));
}
node.appendChild(textnode);
output.appendChild(node);
}
function newLine(){
var output = document.getElementById("output");
var br = document.createElement("br");
output.appendChild(br);
}