2. • Name: Kazunori Tatsuki
• Company: KTrick Co,. Ltd.
• Title: Owner of KTrick Co,. Ltd.
• My Experience:
- 7 years development experience as IBM Vender in US.
- XPages and all other domino related languages, C, C++,
Objective-C, Java, PHP etc.
Introduction
11. Benefits of OOP
・Reusability
・ Refactoring
・ Extensibility
・ Maintenance
・ Efficiency
As a result,
you can reduce the time and cost for development and testing.
21. sub Class (type)
By the way, Class is like this…
Super Class (type)
Object (Instance)
Object (Instance)
Object (Instance)
NEW
NEW
NEW
Class is like ‘type’.
You define the class as the
abstract type for instance. Then
you can generate the instances
from the classes.
By doing this, you can generate
same type objects (instances)
easily ,which have the same
functions and attributes.
23. Javascript Prototype chain is like this…
Object (Instance)
Object (Instance)
Object (Instance)
Object (Instance)
Dele
gate
Dele
gate
Dele
gate
You can connect the objects
and objects like chain.
Then if the original object
doesn’t have the specific
methods or variables, then
Javascript delegates to search
in the other object until they
are found.
Object (Instance)
Dele
gate
24. Let’s take a look at the actual source code.
※Basically please consider that the sample codes are written in client side Javascript
because server side Javascript cannot use some methods like alert().
However the theories and structures are the same!
26. How to generate Object?
var obj = { };
That’s it. An empty object was generated.
27. Object structure
var obj = {
key: value
};
Object can have Properties
(the set of Key and value)
That’s it!
var obj = {
name : “Apple”,
size : 500
};
alert(obj.name);
(i.e.)
28. var obj = {
func1 : function( ) {alert(“hoge”); }
};
obj.func1(); // Output is “hoge”
In Javascript, even the method is a “value”
var func = function( ){};
A method is a value,
therefore you can set it to
a variable.
Of course, you can
operate variables as usual.
(i.e) You can set the method to object
property.
30. There are two important keywords below when learning
Javascript Prototype Chain.
➲ __proto__ ➲prototype
It’s very important to understand what is different from each other
to understand Javascript OOP.
32. __proto__
・[Rule] All objects in Javascript have [[Prototype]] internally.
However some browser application like Chrome, Firefox etc allow
you to access the [[Prototype]] by using __proto__ property
instead.
Internal means that you basically
cannot access to the [[Prototype]]
33. Like this…
Object (Instance)
Object (Instance)
Object (Instance)
Object (Instance)
Dele
gate
Dele
gate
Dele
gate
__proto__
__proto__
__proto__
__proto__
34. Sample code (This sample code works in Chrome & Firefox since allowing you to access by
using “__proto__” )
However this code
alert “It is Apple”
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Object is empty…
35. Confirm the order of source code(1)
It alerts “It is Apple”
Generates object named obj.
It has name and callMe
property.
Generates object named objApple.
name property is ”Apple”.
Generates object named
objBlackbox.
There is no property.
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
36. Confirm the order of source code (2)
Set “obj” into
objApple.__proto_
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Generate object named obj.
It has name and callMe
property.
Generate object named objApple.
name property is ”Apple”.
Generate object named
objBlackbox.
There is no property.
37. Set “objApple” int
objBlackbox.__proto__
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Set “obj” into
objApple.__proto_
Generate object named obj.
It has name and callMe
property.
Generate object named objApple.
name property is ”Apple”.
Generate object named
objBlackbox.
There is no property.
Confirm the order of source code (3)
38. Confirm the method call (1)
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
39. (1) There is no callMe()
method in objBlackbox
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Confirm the method call (2)
40. (2)Search object stored in __proto__ (objApple)
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Confirm the method call (3)
(1) There is no callMe()
method in objBlackbox
41. (3) There is no callMe()
method in objApple neither.
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(2)Search object stored in __proto__ (objApple)
(1) There is no callMe()
method in objBlackbox
Confirm the method call (4)
42. (4) Serach object stored in __proto__ (obj)
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Confirm the method call (5)
(3) There is no callMe()
method in objApple neither.
(2)Search object stored in __proto__ (objApple)
(1) There is no callMe()
method in objBlackbox
43. (5) Found callMe() method in obj!var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(4) Serach object stored in __proto__ (obj)
Confirm the method call (6)
(3) There is no callMe()
method in objApple neither.
(2)Search object stored in __proto__ (objApple)
(1) There is no callMe()
method in objBlackbox
44. (1) callMe() method is called.
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Confirm the attribute call (1)
45. (2) Refer “name” property
※”this” means “object itself.”
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
Confirm the attribute call (2)
(1) callMe() method is called.
46. (3) There is no “name”
property in objBlackbox
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(2) Refer “name” property
※”this” means “object itself.”
Confirm the attribute call (3)
(1) callMe() method is called.
47. (4) Search the object stored in __proto__ (objApple)
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(3) There is no “name”
property in objBlackbox
(2) Refer “name” property
※”this” means “object itself.”
Confirm the attribute call (4)
(1) callMe() method is called.
48. (5) Found ”name“ in objApple !
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(4) Search the object stored in __proto__ (objApple)
(3) There is no “name”
property in objBlackbox
(2) Refer “name” property
※”this” means “object itself.”
Confirm the attribute call (5)
(1) callMe() method is called.
49. (6) There is “name” property in obj as
well. However not referred
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
(5) Found ”name“ in objApple !
(4) Search the object stored in __proto__ (objApple)
(3) There is no “name”
property in objBlackbox
(2) Refer “name” property
※”this” means “object itself.”
Confirm the attribute call (6)
(1) callMe() method is called.
50. Like in the sample code, if the
original object does not have the
methods or attributes, then
Javascript delegates to the chained
object to search them via __proto__
until found
This is
Prototype Chain !
Object (Instance)
Object (Instance)
Object (Instance)
Object (Instance)
Dele
gate
Dele
gate
Dele
gate
Not
Found
Found
Not
Found
Not
Found
52. Wait a minutes…
__proto__ (aka [[Prototype]]) is just internal property.
Then we should not use the code like below...
objApple.__proto__ = obj;
Is it true?
54. In fact I used the code like below as an example so that I can explain
the internal mechanism more clearly.
However, there is an alternative way to achieve the same logic.
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
55. The answer is using “New” operation
(i.e.)This is the sample code equivalent to the previous sample.
var obj = new Frout(“Apple”);
Breakdown
of this code
later on.
var Frout = function( pname ) {
this.name = pname;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
56. ➲ prototype
Before moving forward, there is an another keyword
called ”prototype”
It’s very important to understand what is different from __proto__!
57. prototype
・[Rule] All function objects have prototype property.
“function object”
Hmm, New keyword again...
But don’t worry. You already know this.
58. Function Object is like this…
It was already explained in previous slide.
Function(method) can be value.
var func = function( ){};
59. All Function Objects have prototype property.
Again,
For example,
var func = function( ){};
alert( func.prototype );
The second line above does not output “undefined”. This means prototype exists as the default.
However after defining the function object, the prototype refer just empty object.
Then, How to use prototype?
61. Confirm by source code
(This is the sample code equivalent to previous sample for __proto__)
Define Constructor
Generates Function Object.
name is undefined at this
moment.
Set the method to the
prototype property of Frout
object.
Generate objApple object by
using new operation.
By the prototype chain,
objApple can call the callMe()
method of Frout prototype
var Frout = function( pname ) {
this.name = pname;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
objApple.callMe(); Alert 「It is Apple」
※ it is not
“objApple.prototype.callMe() “
Explain in the
next slide
62. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
Try to breakdown the process of new operation artificially.
var objApple = new Frout(“Apple”);
63. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
(1) Generates object.
var objApple = new Frout(“Apple”);
Try to breakdown the process of new operation artificially.
64. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
(2) Set prototype property into __proto__.
Frout.prototype
Has callMe()
method.
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
Try to breakdown the process of new operation artificially.
(1) Generate object.
65. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
(3) Execute constructor function.
Constructor
function is
executed only
when function
object is
generated.
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
Try to breakdown the process of new operation artificially.
(2) Set prototype property into __proto__.
Frout.prototype
Has callMe()
method.
(1) Generate object.
66. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj; (4) Returns the object.
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
Try to breakdown the process of new operation artificially.
(3) Execute constructor function.
Constructor
function is
executed only
when function
object is
generated.
(2) Set prototype property into __proto__.
Frout.prototype
Has callMe()
method.
(1) Generate object.
67. var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
var objApple = new Frout(“Apple”);
Try to breakdown the process of new operation artificially.
(4) Return the object.
(3) Execute constructor function.
Constructor
function is
executed only
when function
object is
generated.
(2) Set prototype property into __proto__.
Frout.prototype
Has callMe()
method.
(1) Generate object.
68. The sample code using for
explanation of __proto__
var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;
The breakdown process of new
operation artificially.
If you replace obj to Frout.prototype,
then both objects have callMe()
Frout.prototype.callMe = function() {…};
var obj = {
name : “none”,
callMe : function() { … }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
69. Difference between __proto__ and prototype
Prototype is used when
object is generated by
new operation to be
stored in __proto__.
Used by prototype
search mechanism
internally.
By the new operation,
object prototype is
automatically stored.
__proto__ prototype
To make a
prototype chain,
use this prototype.
__proto__ is just needed
to understand the internal
mechanism.
Use new and prototype for
OOP.
71. Frout object preparation
and if we describe
We don’t want to write this, correct? It is not useful
var Frout = function( name ) {
this.name = name;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var Frout = function( name ) {
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}
72. From an OOP perspective this is bad
But let’s continue…
73. The reason:
var Frout = function( name ) {
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}
In this code, without a prototype, it will be defined inside the constructor
In other words:
Everytime new is called to create this object, callMe is also instantiated.
In Contrast, methods defined in the prototype, falls within the prototype chain inconsistently
Memory efficiency is better because the mechanism allows reference to the same memory when new objects are
created.
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
75. From the sample code earlier:
This function of brackets is integral to what kind of work?
( function() {
//code
}() );
76. Arriving at the conclusion
Calling an anonymous function immediately
We are going to do this
77. Immediately after the function
object is returned, we're calling
the function.
Create function
Object。
( function() {
//code・・・
}() );
Anonymous funtion
with no variable
This was done through a very complicated process。
This is used as such that when the page is loaded, it processes only once。
There are 2 parts?
//Immediate function1
(function () {
//code・・・
}());
//Immediate function2
(function () {
//code・・・
})();
Both are immediate function. In
JSLint(http://www.jslint.com/) the
former code seems to be preferred
79. the result…
var Frout = function( name ) {
this.name = name;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);
alert( objApple.name );
You should not be
able see if it was
private variable
Is this a
private variable?
protected variable?
public variable?
To be considered OOP, don’t we want to hide the private variable?
81. I modified something like this
var FroutModel = (function() {
// private variable
var name = “none";
// Constructor
var cls = function(pname){name = pname;};
// public method
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
var Frout = function( name ) {
this.name = name;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
Before re edit
82. var FroutModel = (function() {
// private variable
var name = “none";
// Constructor
var cls = function(pname){name = pname;};
// public method
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
var objApple = new FroutModel(“Apple”);
alert( objApple.name );
objApple.callMe();
To make sure that
undefined is hidden
Can be
successfully called
84. In addition to class inheritance, you can implement like this:
var FroutModel = (function() {
// private variable
var name = “none";
// Constructor
var cls = function(pname){name = pname;};
// Parent class inheritance
cls.prototype = new BaseModel();
// public method
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
Like this:
BaseModel object and
FroutModel object are
doing the same
implementation
85. Below are some descriptions about the code up to now. Please challenge yourself by solving the
puzzle
var FroutModel = (function() {
// private variable
var name = “none";
// constructor
var cls = function(pname){name = pname;};
// parent class inheritance
cls.prototype = new BaseModel();
// public method
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
Hint: Scope chain cannot be seen
from the outside
Hint:Generate another
object inside the FroutModel
function
Hint: Returns the object that
was generated in the
FroutModel
Hint: Immediate
function
87. Now, Javascript has two types:
Client-side Javascript
Server-side Javascript
Both have the concept of class
88. Lets try the last class’s implementation of SSJS. It’s also useful to copy to script lib
var AppModel = (function() {
// private variable
var name = “none";
// constructor
var cls = function(pname){name = pname;};
// parent class inheritance
cls.prototype = new BaseModel();
// public method
cls.prototype.func1 = function() {…};
return cls;
} () );
Actually、the
Javascript structure
has their own OOP
template, which I
don’t like.
91. Some notes when using OOP in XPages
Previously, we have stored the new object into viewScope. In order to use objects persistently, choose “Save the page in
memory” at the XSP property setting
92. What do you think so far?
In order to better understand Object-oriented in
Javascript, I think it is best to try various concept
I prepared an HTML file for you to test
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// <![CDATA[
var FroutModel = (function() {
// private variable
var name = "hoge";
// コンストラクタ
var cls = function(pname){name = pname;};
// メソッド
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
}());
var frt = new FroutModel("Banana");
frt.callMe();
alert("frout.name="+frt.name);
// ]]>
</script>
</head>
<body>
</body>
</html>
93. Note that we are no longer afraid of Dojo
and jQuery
94. R
e
f
e
r
e
n
c
e
s
• 最強オブジェクト指向言語 JavaScript 再入門
Yuji Nojima slides. Developer at Foreignkey, Co. Ltd.
http://www.slideshare.net/yuka2py/javascript-23768378
• ブログ XPagesで行こう!
Kenji Ebihara’s blog. IBM Champion. Ricoh IT Solution
https://www.ibm.com/developerworks/community/blogs/ebi/
• MDN > 開発者向けのWeb技術 > Javascript
Mozilla Developer Network Javascript Portal
https://developer.mozilla.org/ja/docs/Web/JavaScript
• JSLint
To check Javascript bad coding practice
• http://www.jslint.com/