Professional Documents
Culture Documents
javascript 王者归来
javascript 王者归来
1.1 JavaScript?
1.1.1 B/S
B/S
B/S DOM
B/S
B/S
B/S
PC B/S
B/S B/S
Web Ajax Web
JavaScript IT
TIOBE JavaScript
JavaScript
1.1.2 JavaScript
JavaScript JavaScript
Web
Web JavaScript
Web JavaScript
JavaScript
JavaScript JavaScript
JavaScript JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
Web JavaScript
JavaScript
1.1.3 JavaScript
JavaScript
Java JavaScript
Java applet JavaScript
Java
1.1.3.2 C Lisp
JavaScript C for
JavaScript Lisp Scheme
JavaScript 23
1.1.3.3
JavaScript Netscape Navigator
JavaScript JavaScript
Web
JavaScript PDA
JavaScript
1.1.3.4
JavaScript JavaScript
JavaScript
Web Ajax
JavaScript
JavaScript
JavaScript J2EE
JavaScript / JavaScript
Web
1.1.3.5
JavaScript
JavaScript 2.0
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
JavaScript JavaScript
JavaScript
class-based OOJavaScript
prototype-based OO
JavaScript 21
1.1.3.6
JavaScript JavaScript
http://javascript.crockford.com/javascript.html [Douglas Crockford]
1.1.4
JavaScript JavaScript
B/S JavaScript
JavaScript
90% JavaScript
CPU
JavaScript
JavaScript
JavaScript
Web
COOL
Qzone
JavaScript
1.1.5
JavaScript JavaScript
JavaScript
JavaScript JavaScript
JavaScript JavaScript
JavaScript
JavaScript
var a = [-1,-1,1,-3,-3,-3,2,2,-2,-2,3,-1,-1];
function f(s, e)
{
var ret = [];
for(var i in s){
ret.push(e(s[i]));
}
return ret;
}
var b = f(a, function(n){return n>0?n:0});
alert(b);
JavaScript
JavaScript
JavaScript
1.1.6
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
1.1.7
JavaScript
JavaScript JavaScript
JavaScript JavaScript
2
JavaScript
JavaScriptWeb JavaScript
1.2 JavaScript
JavaScript
JavaScript
1.2.1 JavaScript
JavaScript JavaScript
JavaScript JavaScript JavaScript
JavaScript JavaScript
JavaScript JavaScript
Web JavaScript JavaScript
JavaScript
1.1 Hello World! JavaScript
<html>
<head>
<title>Example 1.1 Hello World!</title>
</head>
<body>
<h1>
<script type="text/JavaScript">
<!
document.write("Hello World!");
-->
</script>
<noscript> JavaScript</noscript>
</h1>
<hr/>
<p> document.write document
</p>
</body>
</html>
JavaScript 1.1
<noscript></noscript> JavaScript
JavaScript HTML
JavaScript HTML
JavaScript
DOM HTML
1.2.2 JavaScript
JavaScript JavaScript
JavaScript Microsoft IIS Java
Servlet JavaScript
1.2.3 JavaScript
Web JavaScript
Microsoft Windows HTA JavaScript + HTML GUI
.net framework Microsoft Jscript.net
JavaScript
JavaScript
WinCVS Python
AutoCAD Lisp LabView
C ActionScript Macromedia Flash
ActionScript ECMAScript
ECMAScript JavaScriptActionScript JavaScript
1.3 JavaScript
JavaScript JavaScript1.3
1999 12 ECMA EVMAScript v1 ECMA
JavaScript JavaScript
JavaScript JavaScript
1.3.1 JavaScript
1.3.2
1.4.1
JavaScript
JavaScript Web
JavaScript
JavaScript JavaScript
1.2
JavaScript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=doc
ument.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute';
DIS.left=Math.cos(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.sin(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()'
,5); void(0);
IE
JavaScript JavaScript
JavaScript JavaScript:
JavaScript JavaScript
JavaScript
HTML
JavaScript
AA JavaScript
A 4
JavaScript
document.images
DI
DI=document.images;
Document JavaScript
document.images document
document
document.getElementByIddocument.getElementsByTagName document.createElement
document DOM DOM 12
Document Window
function A()A
JavaScript
function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.cos(R*x1+i*x2+
x3)*x4+x5; DIS.top=Math.sin(R*y1+i*y2+y3)*y4+y5}R++}
JavaScript
JavaScript new
JavaScript JavaScript
6 22 23 JavaScript
Math.cos(R*x1+i*x2+x3)Math JavaScript
JavaScript Math.cos
document.images
style.top style.left
R setInterval 5 A()
setInterval('A()',5);
setInterval JavaScript
setTimeout 16 setInterval setTimeout
void(0)
JavaScript document
void(0)
void JavaScript
void
undefined return undefined
undefined
undefined undefined
JavaScript
void() undefined
typeof
JavaScript
1.4.2
JavaScript
JavaScript JavaScript
JavaScript
JavaScript
RIA
Web Http
htmlxhtml xml
JavaScript
jsp php
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
1.1 1.3
DOM
1.4
<html>
<head>
<title>Example 1.4 Hello World!</title>
</head>
<body>
<script type="text/JavaScript">
<!--
document.getElementsByTagName("h1")[0].innerText = "Hello World!";
-->
</script>
<h1>
<noscript> JavaScript</noscript>
</h1>
</body>
</html>
1.4 document.getElementsByTagName("h1")
h1 document.getElementsByTagName("h1") null
JavaScript h1 1.4 1.3
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
1.4.3
JavaScript
XML DOM XML HTTP JavaScript
XML DOM XML HTTP 17
HTTP
Web
Web2.0
XML HTTP XML HTTP Ajax
Ajax 18
1.4.4
JavaScript JavaScript
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
JavaScript
JavaScript JavaScript
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
JavaScript
HTML
JavaScript
JavaScript API
JavaScript 2D3D
JavaScript HTML JavaScript 1.2
1.2 walterzorn js JavaScript
JavaScript
JavaScript 14
HTML
JavaScript http://www.walterzorn.com
2D3D
IE VML CSV JavaScript VML CSV HTML DOM
JavaScript
JavaScript
JavaScript windows FSOFile System Objects API
XML XML
Web
FSO
XML
XML
XML 17 XML
XML XML
HTTP FTP
JavaScript
1.7 JavaScript
JavaScript
JavaScript JavaScript
JavaScript
JavaScript
1.7.1
programmer
Coder
Programmer
JavaScript JavaScript
JavaScript
1.7.2
1.7.3
3 JavaScript
1.7.4
JavaScript
JavaScript
JavaScript JavaScript DOM
JavaScript JavaScript
JavaScript
JavaScript
1.7.5
JavaScript
JavaScript
1.7.6
1.8
23 JavaScript
JavaScript
4~10 JavaScript
11~15 JavaScript
JavaScript
16~20 JavaScript
Web Ajax JavaScript
Web
21~26
JavaScript JavaScript JavaScript
JavaScript
JavaScript
JavaScript JavaScript
C++ Java
21.1
7 JavaScript
1.1.3 JavaScript
JavaScript
JavaScript JavaScript
JavaScript
DOM
JavaScript
21.1.1
JavaScript
21.1
//new Object
var a = new Object();
a.x = 1, a.y = 2;
//
var b = {x : 1, y : 2};
//
function Point(x, y)
{
this.x = x;
this.y = y;
}
var p = new Point(1,2);
Obejct
function function
new Point(1,2)1234
new Point(3,4)
JavaScript JavaScript
JavaScript
function Point(x,y)
{
this.x = x;
this.y = y;
}
var p1 = new Point(1,2);
var p2 = new Point(3,4);
p1 p2 Point p1 p2 Point
p1p2 Point
21.1.2
JavaScript
JavaScript
JavaScript
JavaScript JavaScript
22
JavaScript
21.2
function List()
{
var m_elements = []; //
//.
this.length = {
valueOf:function(){
return m_elements.length;
},
toString:function(){
return m_elements.length;
}
}
this.toString = function()
{
return m_elements.toString();
}
this.add = function()
{
m_elements.push.apply(m_elements, arguments);
}
}
function List List List m_elements
this.lengththis.toString this.add
this.lenght m_elements length getter.
getter
getter get<Name> getter<Name>
getter getter ECMAScript v3
getter valueOf toString getter
// getName()
function Foo(a, b)
{
this.a = a;
this.b = b;
this.getSum = function()
{
return a+b;
}
}
alert((new Foo(1,2)).getSum()); // 3
// getter
function Foo(a, b)
{
this.a = a;
this.b = b;
this.sum = {
valueOf:function(){return a+b},
toString:function(){return a+b}
}
}
alert((new Foo(1,2)).sum); // 3
setter
ECMAScript v3 setter JavaScript setter
setter set<Name>
21.1.3
JavaScript 4
getter setter
21.3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Example 21.3</title>
</head>
<body>
<h1 id="output"></h1>
<script language="javascript" type="text/javascript">
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
function myClass()
{
var p = 100; //private property;
this.x = 10; //dynamic public property
}
myClass.prototype.y = 20; //static public property or prototype property
myClass.z = 30; //static property //
21.2 prototype
JavaScript prototype prototype JavaScript
prototype
21.2.1 prototype
JavaScript prototype
Typeprototype
ClassInstance
ClassType
p1 p2 Point JavaScript instanceof
p1 instanceof Point
p2 instanceof Point
Point p1 p2 p1 p2 Obejct
Object Point Obejct Point
JavaScript
Typeprototype
21.2
Prototype
Object
Type
prototype
Objects
21.2
JavaScript prototype
.prototype =.prototype= new ()
Java
prototype pattern
JavaScript prototype
prototype pattern Design Patterns
JavaScript JavaScript
prototype Object Object
p1 Point Object Object
Point ClassAClassBClassC Object
21.4
function ClassA()
{
}
ClassA.prototype = new Object(); //
function ClassB()
{
}
ClassB.prototype = new ClassA(); //ClassB ClassA
function ClassC()
{
}
ClassC.prototype = new ClassB(); //ClassC ClassB
object
ClassA objectA
ClassB objectB
ClassC objectC
21.3
JavaScript
--
JavaScript
prototype
21.2.2 prototype
21.5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Example 21.5 </title>
</head>
<body>
<h1 id="output"></h1>
<script language="javascript" type="text/javascript">
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
function Point(x, y)
{
this.x = x;
this.y = y;
}
var p1 = new Point(1,2);
var p2 = new Point(3,4);
Point.prototype.z = 0; // Point
dwn(p1.z);
dwn(p2.z); // Point
-->
</script>
</body>
</html>
a a
a
delete a
21.6 Point
<html>
<head>
<title>Example-21.6 Point </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
// Point xy 0
Point.prototype.x = 0;
Point.prototype.y = 0;
//p1 (0,0)
var p1 = new Point;
//p2 (1,2)
var p2 = new Point(1,2);
dwn(p1.x+","+p1.y);
dwn(p2.x+","+p2.y);
-->
</script>
</body>
</html>
21.4
21.4 Point
prototype Point (0,0) p1 (0,0)p2 (1,2)
delete p2.x, delete p2.y; p2 (0,0)
21.7 delete
<html>
<head>
<title>Example-21.7 delete </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
function ClassA()
{
this.a = 100;
this.b = 200;
this.c = 300;
}
ClassA.prototype = new ClassA(); // abc ClassA
// reset
ClassA.prototype.reset = function()
{
for(var each in this)
{
delete this[each];
}
}
// ClassA
var a = new ClassA();
dwn(a.a);
// abc
a.a *= 2;
a.b *= 2;
a.c *= 2;
//
dwn(a.a);
dwn(a.b);
dwn(a.c);
// reset
a.reset();
//
dwn(a.a);
dwn(a.b);
dwn(a.c);
-->
</script>
</body>
</html>
21.5
21.5 delete
prototype getter
21.8 prototype getter
function Point(x, y)
{
if(x) this.x = x;
if(y) this.y = y;
}
Point.prototype.x = 0;
Point.prototype.y = 0;
//getter
this.getFirstPoint = function()
{
return m_firstPoint;
}
this.getLastPoint = function()
{
return m_lastPoint;
}
//
this.length = {
valueOf : function(){return Math.sqrt(m_width*m_width + m_height*m_height)},
toString : function(){return Math.sqrt(m_width*m_width + m_height*m_height)}
}
}
// p1p2 Point
var p1 = new Point;
var p2 = new Point(2,3);
// p1p2 line1 LineSegment
var line1 = new LineSegment(p1, p2);
// line1 p1
var lp = line1.getFirstPoint();
// lp lp
// p1 x
lp.x = 100;
alert(line1.getFirstPoint().x);
alert(line1.length); // line1.lenght
this.getFirstPoint()
this.getFirstPoint = function()
{
function GETTER(){}; //
// m_firstPoint
GETTER.prototype = m_firstPoint;
//
return new GETTER();
}
m_firstPoint
delete
21.9 delete
<html>
<head>
<title>Example-21.9</title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
//Polygon
function Polygon()
{
//
var m_points = [];
m_points = Array.apply(m_points, arguments);
// getter
function GETTER(){};
GETTER.prototype = m_points[0];
this.firstPoint = new GETTER();
//
this.length = {
valueOf : function(){return m_points.length},
toString : function(){return m_points.length}
}
//
this.add = function(){
m_points.push.apply(m_points, arguments);
}
// idx
this.getPoint = function(idx)
{
return m_points[idx];
}
//
this.setPoint = function(idx, point)
{
if(m_points[idx] == null)
{
m_points[idx] = point;
}
else
{
m_points[idx].x = point.x;
m_points[idx].y = point.y;
}
}
}
// p
var p = new Polygon({x:1, y:2},{x:2, y:4},{x:2, y:6});
dwn(p.length);
dwn(p.firstPoint.x);
dwn(p.firstPoint.y);
p.firstPoint.x = 100; //
dwn(p.getPoint(0).x); //
delete p.firstPoint.x; //
dwn(p.firstPoint.x);
21.6 delete
prototype
prototype copy
prototype pattern
21.10
var p1 = new Point(1,2);
var points = [];
var PointPrototype = function(){};
PointPrototype.prototype = p1;
for(var i = 0; i < 10000; i++)
{
points[i] = new PointPrototype();
// PointPrototype //p1
}
prototype
prototype
21.11
function Point(x, y)
{
this.x = x;
this.y = y;
}
Point.prototype.distance = function(){
return Math.sqrt(this.x * this.x + this.y * this.y);
}
this.distance = function(){} Point distance()
prototype this.distance
prototype
prototype
this
prototype this
prototype
C++ static C#C# static
. JavaScript
prototype
21.2.3 prototype
prototype prototype
prototype C++ prototype
prototype
21.12 prototype
<html>
<head>
<title>Example-21.12</title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
// Point2D
function Point2D(x, y)
{
this.x = x;
this.y = y;
}
Point2D.prototype.x = 0;
Point2D.prototype.y = 0;
// ColorPoint2D
function ColorPoint2D(x, y, c)
{
this.x = x;
this.y = y;
}
//ColorPoint2D Point2D
ColorPoint2D.prototype = new Point2D();
ColorPoint2D.prototype.x = 1;
ColorPoint2D.prototype.y = 1;
// ColorPoint2D
var cp = new ColorPoint2D(10,20,"red");
dwn(cp.x); //10- cp
delete cp.x;
dwn(cp.x); //1-
delete ColorPoint2D.prototype.x;
dwn(cp.x); //0-
-->
</script>
</body>
</html>
21.7
21.7 prototype
21.2.4 prototype
prototype
prototype prototype
prototype
JavaScript prototype prototype
JavaScript prototype
prototype
prototype
:P
21.13 prototype
<html>
<head>
<title>Example-21.13</title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
// ClassA aa
function ClassA()
{
this.a=[];
}
// ClassB
function ClassB()
{
this.b=function(){};
}
//ClassB ClassA
ClassB.prototype=new ClassA();
// ClassB
var objB1=new ClassB();
var objB2=new ClassB();
// objB1 a
objB1.a.push(1,2,3);
dwn(objB2.a);
// b a
// ClassA a
//
//ClassB ClassA
//objB1 objB2 a
// a a
-->
</script>
</body>
</html>
21.8
21.8 prototype
prototype prototype
prototype JavaScript
prototype Class
prototype-based
21.3
JavaScript
21.3.1
21.9
21.9
JavaScript JavaScript
JavaScript
JavaScript JavaScript
21.3.2
JavaScript
JavaScript
21.3.2.1
JavaScript
21.14
<html>
<head>
<title>Example-21.14 </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
// Collection
function Collection(size)
{
this.size = function(){return size}; //
}
Collection.prototype.isEmpty = function(){ //
return this.size() == 0;
}
// ArrayList Collection
function ArrayList()
{
var m_elements = []; //
m_elements = Array.apply(m_elements, arguments);
//ArrayList Collection
this.base = Collection;
this.base.call(this, m_elements.length);
this.add = function()
{
return m_elements.push.apply(m_elements, arguments);
}
this.toArray = function()
{
return m_elements;
}
}
ArrayList.prototype.toString = function()
{
return this.toArray().toString();
}
// SortedList ArrayList
function SortedList()
{
//SortedList ArrayList
this.base = ArrayList;
this.base.apply(this, arguments);
this.sort = function()
{
var arr = this.toArray();
arr.sort.apply(arr, arguments);
}
}
// ArrayList
var a = new ArrayList(1,2,3);
dwn(a);
dwn(a.size()); //a Collection size()
dwn(a.isEmpty); // a isEmpty()
// SortedList
var b = new SortedList(3,1,2);
b.add(4,0); //b ArrayList add()
dwn(b.toArray()); //b ArrayList toArray()
b.sort(); //b sort()
dwn(b.toArray());
dwn(b);
dwn(b.size()); //b Collection size()
-->
</script>
</body>
</html>
21.10
21.10
ArrayList Collection SortedList ArrayList
ArrayList this.base.call(this.base,
m_members.length); SortedList
this.base.apply(this.base, arguments)
ArrayList Collection size() Collection
isEmpty()ArrayList add() SortedList ArrayList add() Collection
size() ArrayList toString()SortedList sort()
SortedList size() BUG add() size()
Collection size() 22
ArrayList SortedList size() ArrayList
size()
this.size = function(){return m_elements.length}
a instanceof Collection b
instanceof ArrayList false
21.3.5
21.3.2.2
JavaScript JavaScript
JavaScript
class-less,
prototype
prototype prototype
JavaScript
21.15
<html>
<head>
<title>Example-21.15 </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
// Point
function Point(dimension)
{
this.dimension = dimension;
}
// Point2D Point
function Point2D(x, y)
{
this.x = x;
this.y = y;
}
Point2D.prototype.distance = function()
{
return Math.sqrt(this.x * this.x + this.y * this.y);
}
Point2D.prototype = new Point(2); //Point2D Point
// Point3D Point
function Point3D(x, y, z)
{
this.x = x;
this.y = y;
this.z = z;
}
Point3D.prototype = new Point(3); //Point3D Point
// Point2D
var p1 = new Point2D(0,0);
// Point3D
var p2 = new Point3D(0,1,2);
dwn(p1.dimension);
dwn(p2.dimension);
dwn(p1 instanceof Point2D); //p1 Point2D
dwn(p1 instanceof Point); //p1 Point
dwn(p2 instanceof Point); //p2 Point
-->
</script>
</body>
</html>
21.11
21.11
Point2D Point3D Point Point Point2D Point3D dimension
Point2D Point3D Pointp1 p2
Point2D Point3D p1 instanceof Point p2 instanceof Point true
21.16 prototype
function Point()
{
}
//Point Object Object
Point.prototype = new Object();
function Point2D()
{
}
//Point2D Point
Point2D.prototype = new Point();
function ColorPoint2D()
{
}
//ColorPoint2D Point2D
ColorPoint2D.prototype = new Point2D();
prototype
prototype
JavaScript
prototype-based class-based
class-less prototype class class
class-based prototype-based
prototype-based class-based
prototype-based OOP reuse
class-based
prototype-based
prototype-based reuse
prototype-based class-based object-based
21.3.2.3
JavaScript
7
21.17
function MyDate()
{
this.base = Date;
this.base.apply(this, arguments);
}
var date = new MyDate();
alert(date.toGMTString);
//
//
Date date.
toGMTString undefined
21.18
function MyDate()
{
}
MyDate.prototype = new Date();
var date = new MyDate();
alert(date.toGMTString);
date
toString toGMTString Internet Explorer [object]
Date String Array
7 this
new
Date
21.19
<html>
<head>
<title>Example-21.19 </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
function MyDate()
{
var instance = new Date(); //instance
instance.printDate = function(){
document.write("<p> "+instance.toLocaleString()+"</p> ");
} // instance printDate()
return instance; // instance
}
var myDate = new MyDate();
dwn(myDate.toGMTString());
myDate.printDate();
-->
</script>
</body>
</html>
21.12
21.12
MyDate Date
JavaScript DOM
JavaScript new
apply() arguments
new alert(myDate instanceof
MyDate); false
instanceof
JavaScript JavaScript DOM
22 ListArray
Array
21.3.2.4
Prototype
21.20
Function.prototype.extends = function(obj)
{
for(var each in obj)
{
this.prototype[each] = obj[each];
//
//
}
}
var Point2D = function(){
}
Point2D.extends(new Point())
{
}
toString()
21.3.2.5
21.1
N Y Y Y
N Y Y
Y N Y N
Y N N Y
instanceof false true false false
21.3.2.6
21.21
<html>
<head>
<title>Example-21.21 </title>
</head>
<body>
<script>
<!--
function Point2D(x, y)
{
this.x = x;
this.y = y;
}
function ColorPoint2D(x, y, c)
{
Point2D.call(this, x, y);
//
this.color = c;
}
ColorPoint2D.prototype = new Point2D();
// ColorPoint2D Point2D
-->
</script>
</body>
</html>
JavaScript
, :C
Lisp ., C
Lisp
22.1
closure JavaScript smalltalk
Perlpythonruby JavaScript
closure
22.1.1
Dynamically Typed
Language Static Typed Language
JavaScript
VBScript Perl
22.1.2
C++
JavaScript
22.1
<html>
<head>
<title>Example-22.1 </title>
</head>
<body>
<script>
<!
//
function RandomAlert()
{
var x = Math.random()
return function()
{
alert(x);
}
}
var a = RandomAlert();
//
var b = RandomAlert();
a(); // a
b(); // b
//a b
-->
</script>
</body>
</html>
22.1.2 JavaScript
JavaScript function
22.1 RandomAlert()a()b()
RandomAlert() x
22.2
<html>
<head>
<title>Example-22.2 </title>
</head>
<body>
<script>
<!
//A
function A(a)
{
return a;
}
//B
function B(b)
{
return function (){
return b;
}
}
var x = A(10);
// A a A()
//
var y = B(20);
// B B()
//(closure function instance)
//b = 20 y() 20
var z = B(30);
//
//b = 30 z() 30
alert(x); // 10
alert(y()); // 20
alert(z()); // 30
-->
</script>
</body>
</html>
22.2 y() z() B() b
B() b y() z()B()
C++Java B()
b B() b
B()
22.1 4.6 4.6
function dice(count, side) //count side
{
var ench = Math.floor(Math.random() * 6); //+0~+5
//
return function()
{
var score = 0;
for(var i = 0; i < count; i++)
{
score += Math.floor(Math.random() * side) +1;
}
return score + ench;
}
}
var d1 = dice(2,6); // 2d6+n n 0~5
var d2 = dice(1,20); // 20 0~5
4.6 d1d2 ench side
dice() dice() d1() d2()
d1 d2 side ench
JavaScript JavaScript closure
function instatnce referer
22.2
22.2.1
JavaScript function
22.3
<html>
<head>
<title>Example-22.3 </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
//
//
//
//
//
(function(){
//
var innerX = 10, innerY = 20;
//
outerObj = {x : innerX, y : innerY} ;
})();
try{
dwn(innerX); //
}
catch(ex){
dwn("");
}
dwn(outerObj.x); //
-->
</script>
</body>
</html>
22.1
22.1
22.2.2
22.4
<html>
<head>
<title>Example-22.4 </title>
</head>
<body>
<script>
<!
//
function counter(iden, addi)
{
// counter iden
return function(){
// iden
iden = iden+addi;
return iden;
}
}
// 0 1
var c1 = counter(0, 1);
// 10 1
var c2 = counter(10, -1);
for(var i = 0; i < 10; i++){
//
c1();
}
for(var i = 0; i < 10; i++){
//
c2();
}
-->
</script>
</body>
</html>
c1 c2 counter 0 10 1
-1 iden
functional
function createClosure(){
var x = 10;
return function()
{
return x;
}
}
function createClosure(){
function a()
{
return x;
}
var x = 10;
return a;
}
22.2.3
JavaScript this.foo =
function(){}
22.5
<html>
<head>
<title>Example-22.5 </title>
</head>
<body>
<script>
<!--
function dwn(s)
{
document.write(s + "<br/>");
}
// Foo
function Foo(a)
{
function _pC() //
{
return a;
}
//_pC()
this.bar = function(){
dwn("foo" + _pC() + "!");
}
}
var obj = new Foo("bar");
obj.bar(); // Foo bar!
-->
</script>
</body>
</html>
21.22
22.2
22.2.4
JavaScript
22.6
<html>
<head>
<title>Example-22.6 </title>
</head>
<body>
<script>
<!
//
function test()
{
for (var i = 0; i < 5; i++)
{
// 0,1,2,3,4
// setTimeout
(function(j){
setTimeout(function(){alert(j)}, 100);
})(i);
}
}
test();
-->
</script>
</body>
</html>
function(j){setTimeout(function(){alert(j)}, 100);} test()
function(){alert(j)}
this
button1.onclick =
(function(owner){return function(){button1_click.apply(owner,arguments)}})(button1);
21 this
22.3
22.3.1
22.4
22.4.1
closure,continuation,
currying ifelsewhile
22.4.1.1
F(x, y) = 0x, y y = f(x) x y f x y
G(x, y, z) = 0 z = g(x, y)g xy z
g x, y y = f(x) z = g(x, y) = g(x, f(x))
f(x) x g g f
z = g(x, f(x)) F(x, y) = 0 G(x, y, z) = 0
g z = g(x, y, f) g
T(x,y) = 0 G(x,y,z) = 0
f=t
JavaScript
Array.prototype.each = function(closure)
{
return this.length ? [closure(this.slice(0, 1))].concat(this.slice(1).each(closure)) : [];
}
function
Symbol
[1,2,3,4].each(function(x){return x * 2}) [2,4,6,8] [1,2,3,4].each(function(x){return x-1})
[0,1,2,3]
22.4.1.2
Currying
function Foo(x, y, z, w)
{
var args = arguments;
//
if(Foo.length < args.length)
//
return function()
{
// Foo
return
args.callee.apply(Array.apply([], args)
.concat(Array.apply([], arguments)));
}
else
//
return x + y z * w;
}
22.4.1.4
var s1 = somewhatLongOperation1();
var s2 = somewhatLongOperation2();
var s3 = concatenate(s1, s2);
somewhatLongOperation1 somewhatLongOperation2
s1 s2 concatenate
concatenate
concatenate
JavaScript
function concatenate(s1, s2)
{
if(cond1) s1();
s2();
}
var s3 = concatenate(somewhatLongOperation1,somewhatLongOperation2);
cond1 somewhatLongOperation1
Fibonacci
Java Fibonacci Fibonacci
Fibonacci
22.8 Fibonacci
<html>
<head>
<title>Example-22.8 Fibonacci </title>
</head>
<body>
<script>
<!
// 6.12 functional
function dwn(s)
{
document.write(s + "<br/>");
}
//""
function Fib(n, x, y)
{
// x,y n
// xy
var a = x || 1;
var b = y || 1;
if(n == 0) b = a;
var t;
//
for(var i = 2; i <= n + 1; i++)
{
t = b;
b = a + b;
a = t;
}
// valueOf toString
//
ret.valueOf = ret.toString = function()
{
return a;
}
return ret;
}
var f6 = Fib(6); //f6
dwn(f6);
dwn(f6(2));
-->
</script>
</body>
</html>
22.3
22.3
fn fm fn(m-n)
Continuations
somewhatLongOperation1 somewhatLongOperation2
somewhatLongOperation1 somewhatLongOperation2
var s3 = concatenate(somewhatLongOperation1(somewhatLongOperation2));
Continuations
s1 s2
s1 s2 s1
s2 s1 s2
22.4.2
JavaScript
22.9
<html>
<head>
<title>Example-22.9 </title>
</head>
<body>
<script>
<!--
function parabola(a, b, c) //
{
return function(x)
{
return a * x * x + b * x + c;
}
}
function parabola(a, b, c, x)
{
return a * x * x + b * x + c;
}
var y = parabola(2, 3, 4, 15);
function Parabola(a, b, c)
{
this.evaluate = function(x)
{
return a * x * x + b * x + c;
}
}
var p1 = new Parabola(2,3,4); // y = 2*x^2 + 3*x + 4
alert(p1.evaluate());
evaluate()