mirror of
				https://github.com/flynx/Course-JavaScript.git
				synced 2025-11-04 05:50:08 +00:00 
			
		
		
		
	more work on the OOP doc...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									ad14667008
								
							
						
					
					
						commit
						351ec981c7
					
				
							
								
								
									
										171
									
								
								js-oop.js
									
									
									
									
									
								
							
							
						
						
									
										171
									
								
								js-oop.js
									
									
									
									
									
								
							@ -31,8 +31,11 @@
 | 
			
		||||
	b.z					// -> 3
 | 
			
		||||
 | 
			
		||||
// What we see is that if the attribute is not found in the current 
 | 
			
		||||
// object it resolves to the object's "prototype" and so on, these 
 | 
			
		||||
// chians can of any length.
 | 
			
		||||
// object it resolves to the next object, and so on, this next object is
 | 
			
		||||
// called "prototype". 
 | 
			
		||||
// These prototype chains can be of any length.
 | 
			
		||||
// Cycles in prototype chains are not allowed, see note further down for
 | 
			
		||||
// an example.
 | 
			
		||||
//
 | 
			
		||||
// Note that this works for reading, when writing or deleting we are 
 | 
			
		||||
// affecting ONLY the local object and attributes explicitly defined in
 | 
			
		||||
@ -58,8 +61,8 @@
 | 
			
		||||
 | 
			
		||||
// Now back to the mechanism that makes all of this work...
 | 
			
		||||
//
 | 
			
		||||
// A couple of easy ways to see the local and non-local sets of 
 | 
			
		||||
// attributes:
 | 
			
		||||
// First we'll try couple of easy ways to see the local and non-local 
 | 
			
		||||
// sets of attributes:
 | 
			
		||||
	
 | 
			
		||||
	// show local or "own" only attribute names (keys)...
 | 
			
		||||
	Object.keys(b)		// -> z
 | 
			
		||||
@ -74,14 +77,23 @@
 | 
			
		||||
	b.hasOwnProperty('x')	// -> false
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// What happens under the hood is very simple:
 | 
			
		||||
// What happens under the hood is very simple: b references it's 
 | 
			
		||||
// "prototype" via the .__proto__ attribute:
 | 
			
		||||
 | 
			
		||||
	b.__proto__ === a	// -> true
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// We can read/set this special attribute just like any other attribute 
 | 
			
		||||
// on most systems.
 | 
			
		||||
//
 | 
			
		||||
// NOTE: we did not see .__proto__ in the list of accessible attributes
 | 
			
		||||
// 		because it is a special attributes, it is implemented internally
 | 
			
		||||
// 		because it is a special attribute, it is implemented internally
 | 
			
		||||
// 		and is not enumerable.
 | 
			
		||||
// NOTE: cyclic prototype chains are actively not allowed, e.g. creating
 | 
			
		||||
// 		a chain like the following will fail:
 | 
			
		||||
// 			var a = {}
 | 
			
		||||
// 			var b = Object.creating(a)
 | 
			
		||||
// 			a.__proto__ = b
 | 
			
		||||
//
 | 
			
		||||
// Thus, we could define our own create function like this:
 | 
			
		||||
 | 
			
		||||
@ -102,11 +114,18 @@
 | 
			
		||||
 | 
			
		||||
// Turns out it is, and it points to Object's prototype
 | 
			
		||||
 | 
			
		||||
	x.__proto__ === Object.prototye
 | 
			
		||||
	x.__proto__ === Object.prototype
 | 
			
		||||
						// -> true
 | 
			
		||||
 | 
			
		||||
// We will discuss what this means and how we can use this in the next 
 | 
			
		||||
// sections...
 | 
			
		||||
//
 | 
			
		||||
// As a side note, Object.prototype is the "root" most object in 
 | 
			
		||||
// JavaScript and usually is "terminated" with null, i.e.:
 | 
			
		||||
 | 
			
		||||
	Object.prototype.__proto__ === null
 | 
			
		||||
 | 
			
		||||
// We'll also need this a bit later...
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -116,7 +135,7 @@
 | 
			
		||||
// JavaScript provides a second, complementary mechanism to inherit 
 | 
			
		||||
// attributes, it resembles the class/object relationship in languages
 | 
			
		||||
// like C++ but this resemblance is on the surface only, as it still 
 | 
			
		||||
// uses the same prototype mechanism as the above.  
 | 
			
		||||
// uses the same prototype mechanism as basis as described above.  
 | 
			
		||||
//
 | 
			
		||||
// We will start by creating a "constructor":
 | 
			
		||||
	
 | 
			
		||||
@ -131,7 +150,17 @@
 | 
			
		||||
	var a = new A()
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// what 'new' does here is:
 | 
			
		||||
// Some terminology:
 | 
			
		||||
// - in the above use-case A is called a constructor,
 | 
			
		||||
// - the object returned by new is called an "instance" (in this case 
 | 
			
		||||
//   assigned to a),
 | 
			
		||||
// - the attributes set by the constructor (x and y) are called 
 | 
			
		||||
//   "instance attributes" and are not shared (obviously) between 
 | 
			
		||||
//   different instances, rather they are "constructed" for each 
 | 
			
		||||
//   instance independently.
 | 
			
		||||
//
 | 
			
		||||
//
 | 
			
		||||
// Let's look in more detail at what 'new' does here:
 | 
			
		||||
// 	1) creates an empty object
 | 
			
		||||
// 	2) sets a bunch of attributes on it, we'll skim this part for now
 | 
			
		||||
// 	3) passes the new object to the constructor via 'this'
 | 
			
		||||
@ -146,63 +175,74 @@
 | 
			
		||||
 | 
			
		||||
	var b = construct(A)
 | 
			
		||||
 | 
			
		||||
// But what does make this interesting? At this point this all looks like 
 | 
			
		||||
// all we did is move attribute definition from a literal object notation 
 | 
			
		||||
// into a constructor function, effectively adding complexity. What are we 
 | 
			
		||||
// getting back from this?
 | 
			
		||||
// But at this point this all looks like all we did is move the attribute
 | 
			
		||||
// definition from a literal object notation into a constructor function,
 | 
			
		||||
// effectively adding complexity. 
 | 
			
		||||
// And now instead of "inheriting" attributes we make a new set for each
 | 
			
		||||
// individual instance.
 | 
			
		||||
// So hat are we getting back from this?
 | 
			
		||||
//
 | 
			
		||||
// Let's look at a number of attributes that new sets:
 | 
			
		||||
// To answer this question we will need to look deeper under the hood,
 | 
			
		||||
// specifically at a couple of special attributes:
 | 
			
		||||
 | 
			
		||||
	// we saw this one before...
 | 
			
		||||
	a.__proto__			// -> {} 
 | 
			
		||||
 | 
			
		||||
	// this points back to the constructor...
 | 
			
		||||
	a.constructor		// -> [Function A]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// These are what makes this fun, lets write a more complete new 
 | 
			
		||||
// implementation:
 | 
			
		||||
// re-implementation:
 | 
			
		||||
	
 | 
			
		||||
	function construct(func, args){
 | 
			
		||||
		var obj = {}
 | 
			
		||||
 | 
			
		||||
		// set some special attributes...
 | 
			
		||||
		obj.constructor = func
 | 
			
		||||
		obj.__proto__ = func.prototype
 | 
			
		||||
 | 
			
		||||
		// call the constructor...
 | 
			
		||||
		var res = func.apply(obj, args)
 | 
			
		||||
 | 
			
		||||
		// handle the return value of the constructor...
 | 
			
		||||
		if(res instanceof Object){
 | 
			
		||||
			return res
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
		return obj
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	var b = construct(A)
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// Notice that we return the resulting object in a more complicated
 | 
			
		||||
// way, this will come in handy later.
 | 
			
		||||
// There are two important things we added here:
 | 
			
		||||
// 1) we now explicitly use the .prototype attribute that we saw earlier
 | 
			
		||||
// 2) we return the resulting object in a more complicated way
 | 
			
		||||
//
 | 
			
		||||
// Also notice that 'prototype' from the end of the previous section.
 | 
			
		||||
//
 | 
			
		||||
// First let us cover the default. Each time a function is created in
 | 
			
		||||
// JavaScript it will get a new empty object assigned to it's .prototype
 | 
			
		||||
// attribute.
 | 
			
		||||
// On the function level, in general, this is not used, but this is very
 | 
			
		||||
// Each time a function is created in JavaScript it will get a new empty
 | 
			
		||||
// object assigned to it's .prototype attribute.
 | 
			
		||||
// On the function level, this is rarely used, but this object is very 
 | 
			
		||||
// useful when the function is used as a constructor.
 | 
			
		||||
//
 | 
			
		||||
// As we can see from the code above, the resulting object's .__proto__
 | 
			
		||||
// points to the constructor's .prototype, from the previous section 
 | 
			
		||||
// this means that attributes accessed via that object are resolved to 
 | 
			
		||||
// the prototype.
 | 
			
		||||
// In the default case this is true.
 | 
			
		||||
// points to the constructor's .prototype, this means not-own the 
 | 
			
		||||
// attributes accessed via that object are resolved to the prototype.
 | 
			
		||||
// In the default case this is true, but in general it's a bit more 
 | 
			
		||||
// flexible, we'll see this in the next section.
 | 
			
		||||
//
 | 
			
		||||
// So if we add stuff to the constructor's .prototype they should get 
 | 
			
		||||
// resolved from the object
 | 
			
		||||
// And the way we handle the return value makes it possible for the 
 | 
			
		||||
// constructor to return a custom object rather than use the one 
 | 
			
		||||
// provided in its "this" by new.
 | 
			
		||||
//
 | 
			
		||||
//
 | 
			
		||||
// So if we add stuff to the constructor's .prototype they should be 
 | 
			
		||||
// accessible from the object
 | 
			
		||||
 | 
			
		||||
	A.prototype.x = 123
 | 
			
		||||
	a.constructor.prototype.y = 321
 | 
			
		||||
	a.__proto__.z = 333
 | 
			
		||||
 | 
			
		||||
	// for illustration, some object own attributes
 | 
			
		||||
	// for illustration, we'll set some object own attributes
 | 
			
		||||
	a.x = 'a!'
 | 
			
		||||
	b.x = 'b!'
 | 
			
		||||
 | 
			
		||||
@ -220,18 +260,43 @@
 | 
			
		||||
	b.z					// -> 333
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// This works for any constructor, including built-in constructors and
 | 
			
		||||
// since name resolution happens in runtime all instances will get the 
 | 
			
		||||
// new functionality live, as it is defined:
 | 
			
		||||
 | 
			
		||||
	// a "class method", like .keys(..) but return all available keys...
 | 
			
		||||
	Object.allKeys = function(o){
 | 
			
		||||
		var res = []
 | 
			
		||||
		for(var k in o){
 | 
			
		||||
			res.push(k)
 | 
			
		||||
		}
 | 
			
		||||
		return res
 | 
			
		||||
	}
 | 
			
		||||
	// now make these into real methods we can use from any object...
 | 
			
		||||
	Object.prototype.keys = function(){ return Object.keys(this) }
 | 
			
		||||
	Object.prototype.allKeys = function(){ return Object.allKeys(this) }
 | 
			
		||||
 | 
			
		||||
	b.keys()			// -> ['x']
 | 
			
		||||
	b.allKeys()			// -> ['x', 'y', 'z']
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// "Double" inheritance
 | 
			
		||||
// --------------------
 | 
			
		||||
//
 | 
			
		||||
// There are actually three sources where JavaScript looks for attributes:
 | 
			
		||||
// 	1) the actual object
 | 
			
		||||
// 	1) own attributes (local object) 
 | 
			
		||||
// 	2) .__proto__ 
 | 
			
		||||
// 		as coverd in the first section
 | 
			
		||||
// 	3) .constructor.prototype 
 | 
			
		||||
// 		as explained in the previous section
 | 
			
		||||
//
 | 
			
		||||
// Here is a basic inheritance structure (tree):
 | 
			
		||||
// Though in the general case both .__proto__ and .constructor.prototype 
 | 
			
		||||
// point to the same object and are redundant, the two are independent 
 | 
			
		||||
// and can be used in parallel, thus the title.
 | 
			
		||||
//
 | 
			
		||||
// Here is a basic inheritance structure (tree) with .__proto__ and 
 | 
			
		||||
// .constructor.prototype split to separate objects:
 | 
			
		||||
//
 | 
			
		||||
// 	O   A
 | 
			
		||||
// 	 \ /
 | 
			
		||||
@ -242,7 +307,9 @@
 | 
			
		||||
		o: 0,
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
	function A(){}
 | 
			
		||||
	function A(){
 | 
			
		||||
		//...
 | 
			
		||||
	}
 | 
			
		||||
	A.prototype.a = 1
 | 
			
		||||
 | 
			
		||||
	var a = new A()
 | 
			
		||||
@ -276,10 +343,13 @@
 | 
			
		||||
//
 | 
			
		||||
 | 
			
		||||
	var a = {x: 1}
 | 
			
		||||
 | 
			
		||||
	var b = Object.create(a)
 | 
			
		||||
	b.y = 2
 | 
			
		||||
 | 
			
		||||
	var c = Object.create(b)
 | 
			
		||||
	
 | 
			
		||||
 | 
			
		||||
	c.x					// -> 1
 | 
			
		||||
	c.y					// -> 2
 | 
			
		||||
 | 
			
		||||
@ -287,7 +357,7 @@
 | 
			
		||||
// Creating an inheritance chain via the constructor mechanism is a bit
 | 
			
		||||
// more involved, and there are multiple ways to do this...
 | 
			
		||||
//
 | 
			
		||||
// Here we will create a similar chian:
 | 
			
		||||
// Here we will create a similar chain to the above for comparison:
 | 
			
		||||
//
 | 
			
		||||
// 		C -> B -> A
 | 
			
		||||
//
 | 
			
		||||
@ -326,6 +396,9 @@
 | 
			
		||||
	c instanceof A		// -> true
 | 
			
		||||
	c instanceof Object // -> true
 | 
			
		||||
 | 
			
		||||
	c instanceof function X(){} 
 | 
			
		||||
						// -> false
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// This also works for manually created objects
 | 
			
		||||
 | 
			
		||||
@ -366,6 +439,7 @@
 | 
			
		||||
	isInstanceOf(c, A)	// -> true
 | 
			
		||||
	isInstanceOf(c, Object)
 | 
			
		||||
						// -> true
 | 
			
		||||
 | 
			
		||||
	isInstanceOf(c, function X(){})
 | 
			
		||||
						// -> false
 | 
			
		||||
 | 
			
		||||
@ -374,6 +448,9 @@
 | 
			
		||||
// Checking type (typeof)
 | 
			
		||||
// ----------------------
 | 
			
		||||
//
 | 
			
		||||
// This section is mainly here for completeness and to address several
 | 
			
		||||
// gotcha's.
 | 
			
		||||
//
 | 
			
		||||
// What typeof returns in JavaScript is not too useful and sometimes 
 | 
			
		||||
// even odd...
 | 
			
		||||
 | 
			
		||||
@ -408,7 +485,7 @@
 | 
			
		||||
// Methods and the value of 'this'
 | 
			
		||||
// -------------------------------
 | 
			
		||||
//
 | 
			
		||||
// A method is simply an attribute that references a function.
 | 
			
		||||
// A "method" is simply an attribute that references a function.
 | 
			
		||||
 | 
			
		||||
 	function f(){
 | 
			
		||||
		return this
 | 
			
		||||
@ -422,9 +499,9 @@
 | 
			
		||||
// 'this' is a reserved word and is available in the context of a function
 | 
			
		||||
// execution, not just in methods, but what value it references depends
 | 
			
		||||
// on how that function is called...
 | 
			
		||||
// This is mostly useful and used in methods.
 | 
			
		||||
// 'this' is mostly useful and used in methods.
 | 
			
		||||
// 
 | 
			
		||||
// A simple way to think about this is that 'this' always points to the 
 | 
			
		||||
// A simple way to think about it is that 'this' always points to the 
 | 
			
		||||
// "context" of the function call.
 | 
			
		||||
//
 | 
			
		||||
// There are three distinct cases here:
 | 
			
		||||
@ -435,11 +512,12 @@
 | 
			
		||||
//
 | 
			
		||||
// 1) function call (implicit)
 | 
			
		||||
//	In the first case the context is either global/window/module which 
 | 
			
		||||
//	ever is the root context in a given implementation or null in ES5
 | 
			
		||||
//	strict mode
 | 
			
		||||
//	ever is the root context in a given implementation or undefined in
 | 
			
		||||
//	ES5 strict mode
 | 
			
		||||
 | 
			
		||||
	f()					// -> window/global/module
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
//	Strict mode example:
 | 
			
		||||
//
 | 
			
		||||
	function strict_f(){
 | 
			
		||||
@ -451,8 +529,8 @@
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 2) new call (implicit)
 | 
			
		||||
// 	Here as we have discussed before, this is assigned a new object with
 | 
			
		||||
// 	some attributes set.
 | 
			
		||||
// 	Here as we have discussed before, 'this' is assigned a new object 
 | 
			
		||||
// 	with some special attributes set.
 | 
			
		||||
 | 
			
		||||
	new f()				// -> {}
 | 
			
		||||
 | 
			
		||||
@ -466,13 +544,14 @@
 | 
			
		||||
	o['f']()			// -> o
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
// 	...or an explicitly passed to .call(..) / .apply(..) object
 | 
			
		||||
// 	...or an explicitly passed to .call(..) / .apply(..) function methods
 | 
			
		||||
 | 
			
		||||
	f.call(o)			// -> o
 | 
			
		||||
	f.apply(o)			// -> o
 | 
			
		||||
 | 
			
		||||
// ES5 also defines a third way to make method calls: Object.bind which
 | 
			
		||||
// creates a new function where 'there' is bound to the supplied object
 | 
			
		||||
 | 
			
		||||
// ES5 also defines a third way to make method calls: Function.bind which
 | 
			
		||||
// creates a new function where 'this' is bound to the supplied object
 | 
			
		||||
 | 
			
		||||
	var ff = f.bind(o)
 | 
			
		||||
	ff()				// -> o
 | 
			
		||||
@ -480,7 +559,7 @@
 | 
			
		||||
 | 
			
		||||
// NOTE: all of the above 5 calls are the same.
 | 
			
		||||
// NOTE: the resulting from .bind(..) function will ignore subsequent
 | 
			
		||||
// 		.bind(..), .call(..) and .apply(..) method calls and this will 
 | 
			
		||||
// 		.bind(..), .call(..) and .apply(..) method calls and 'this' will 
 | 
			
		||||
// 		always be the original bound object.
 | 
			
		||||
// NOTE: the difference between strict and "quirks" modes is in the 
 | 
			
		||||
// 		following:
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user