the main part of js-oop.js is done, need to proof read and do the last section...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-09-26 02:00:09 +04:00
parent e63028904c
commit a803110c56

189
js-oop.js
View File

@ -149,9 +149,9 @@
// //
// Let's look at a number of attributes that new sets: // Let's look at a number of attributes that new sets:
a.__proto__ // -> {} a.__proto__ // -> {}
a.constructor // -> [Function A] a.constructor // -> [Function A]
// These are what makes this fun, lets write a more complete new // These are what makes this fun, lets write a more complete new
@ -202,18 +202,18 @@
a.x = 'a!' a.x = 'a!'
b.x = 'b!' b.x = 'b!'
a.x // -> 'a!' a.x // -> 'a!'
a.y // -> 321 a.y // -> 321
a.z // -> 333 a.z // -> 333
// These values are accessible from all objects constructed by A since // These values are accessible from all objects constructed by A since
// all of them point to A with both the .constructor and .__proto__ // all of them point to A with both the .constructor and .__proto__
// attributes // attributes
b.x // -> 'b!' b.x // -> 'b!'
b.y // -> 321 b.y // -> 321
b.z // -> 333 b.z // -> 333
@ -246,8 +246,8 @@
// Now we can access both attributes inherited from 'O' and 'A'... // Now we can access both attributes inherited from 'O' and 'A'...
a.o // -> 0 a.o // -> 0
a.a // -> 1 a.a // -> 1
// The check is done specifically in this order, thus attributes can // The check is done specifically in this order, thus attributes can
@ -259,7 +259,7 @@
O.x = 'came from O' O.x = 'came from O'
A.prototype.x = 'came from A' A.prototype.x = 'came from A'
a.x // -> 'came from O' a.x // -> 'came from O'
// In both inheritance mechanisms, each step is checked via the same // In both inheritance mechanisms, each step is checked via the same
@ -276,8 +276,8 @@
b.y = 2 b.y = 2
var c = Object.create(b) var c = Object.create(b)
c.x // -> 1 c.x // -> 1
c.y // -> 2 c.y // -> 2
// Creating an inheritance chain via the constructor mechanism is a bit // Creating an inheritance chain via the constructor mechanism is a bit
@ -306,8 +306,8 @@
var c = new C() var c = new C()
c.x // -> 1 c.x // -> 1
c.y // -> 2 c.y // -> 2
@ -317,11 +317,10 @@
// An object is considered an instance of its' constructor and all other // An object is considered an instance of its' constructor and all other
// constructors in the inheritance chain. // constructors in the inheritance chain.
c instanceof C // -> true c instanceof C // -> true
c instanceof B // -> true c instanceof B // -> true
c instanceof A // -> true c instanceof A // -> true
c instanceof Object c instanceof Object // -> true
// -> true
// This also works for manually created objects // This also works for manually created objects
@ -396,6 +395,11 @@
typeof function(){} // -> 'function' typeof function(){} // -> 'function'
// NOTE: the "non-object" term is not entirely correct here, they can
// be called "frozen" objects in ES5 speak, but that is outside the
// scope of this document.
// Methods and the value of 'this' // Methods and the value of 'this'
// ------------------------------- // -------------------------------
@ -403,8 +407,7 @@
// A method is simply an attribute that references a function. // A method is simply an attribute that references a function.
function f(){ function f(){
console.log(this) return this
this.a = 1
} }
var o = { f: f } var o = { f: f }
@ -420,79 +423,75 @@
// A simple way to think about this is that 'this' always points to the // A simple way to think about this is that 'this' always points to the
// "context" of the function call. // "context" of the function call.
// //
// This context can be: // And there are two distinct cases here:
// - implicit // - function call / implicit context
// - root context // - new call / implicit context
f() // - method call / explicit context
// 'window', 'global' or 'module' is implied,
// in strict mode this is null.
// the same as:
// window.f()
// - 'new' context
new f() // here a context will be created and passed to
// 'f's 'this', for more details on what 'new'
// does see: "The Constructor Mechanism" section.
// - explicit:
// - the object on the left side of "." or the [ ] operators:
o.f() // o is the context
o['f']() // the same as the above
// - the object explicitly passed to .call(..) or .apply(..) methods
// as first argument:
f.call(o) // o is the context
f.apply(o) // o is the context
// Properties
// ----------
// //
// A property is a special attribute that has a getter, setter methods
// and/or other optional configuration.
// //
// A good property example is .length of Array objects. // 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
var o = { f() // -> window/global/module
get x(){
return this.data || 123 // Strict mode example:
}, //
set x(value){ function strict_f(){
this.data = value 'use strict'
}, return this
} }
o.x // -> 123 strict_f() // -> undefined
o.x = 4
o.x // -> 4
o.x = undefined
o.x // -> 123
// As for any other attribute, deleting a local property x will remove
// it from the containing object...
delete o.x
o.x // -> undefined
// The above code is a shorthand for: // 2) new call (implicit)
// Here as we have discussed before, this is assigned a new object with
// some attributes set.
Object.defineProperty(o, 'y', { new f() // -> {}
get: function() {
return this.data || 123
},
set: function(name) {
this.data = value
}
})
// XXX other property attributes...
// get // 3) method call (explicit)
// set // In the method call context this is set to the object from which the
// value // method is called, i.e. the object left of the '.' or [ ] attribute
// if set get/set are not possible... // access operators...
// writable (false)
// configurable (false) o.f() // -> o
// is it possible to change this configurations later... o['f']() // -> o
// enumerable (false)
// ...or an explicitly passed to .call(..) / .apply(..) object
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
var ff = f.bind(o)
ff() // -> o
// 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
// always be the original bound object.
// NOTE: the difference between strict and "quirks" modes is in the
// following:
// In quirks mode a function call is always done in the root
// context, it's like implicitly calling a method of the global
// object:
f() === window.f()
// -> true
// In strict mode these are two different things, a function call
// is done without a context ('this' is undefined) while calling
// the same function via the global object is essentially a method
// call, setting 'this' to what is to the left of the attribute
// access operator:
strict_f() !== window.strict_f()
// -> true
@ -501,6 +500,22 @@
// /*********************************************************************/
//
// NOTE: several topics available in ES5 are intentionally excluded
// from this document, these include:
// - properties
// - freezing/sealing
// The general motivation for this is simple: they introduce
// complexity and restrictions without giving any real benefits
// in the common case.
//
// Cases where these features "might" be useful are:
// - language design / language extending
// - library code
// Neither of these is a common case and the use of these features
// for library code is debatable.
//
//
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */