Professional Documents
Culture Documents
javascript 王者归来
Uploaded by
Kar SnowOriginal Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
javascript 王者归来
Uploaded by
Kar SnowCopyright:
Available Formats
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
1.1.3.1 JavaScript Java
Java- JavaScript Java
JavaScript Java
JavaScript Java Java C Java Java
C Java Java Oak
JavaScript Brendan Eich NetScape 2 Brendan Eich
Mozilla JavaScript Java Sun
Microsystems
JavaScript LiveScript JavaScript
Java
JavaScript Java 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
B/S JavaScript JavaScript
90% JavaScript
CPU
JavaScript
JavaScript
JavaScript
Web
COOL
Qzone
JavaScript
1.1.5
JavaScript JavaScript
JavaScript Perl Python
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
var b = f(a, function(n){return n>=-1?n:0});
var b = f(a, function(n){return n<0?n:0});
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
1.1 Hello World
JavaScript
JavaScript
<noscript></noscript> JavaScript
<script></script> HTML JavaScript
2 22 <script>
document.write() HTML
JavaScript HTML
JavaScript HTML
JavaScript
DOM HTML
1.2.2 JavaScript
JavaScript JavaScript
JavaScript Microsoft IIS Java
Servlet JavaScript
IIS asp JavaScript <script>
runat = "server"
Netscape Java JavaScript1.5 Rhino
Mozilla Rhino Java JavaScript
Mozilla JavaScript1.5 C SpiderMonkey
1.2.3 JavaScript
Web JavaScript
Microsoft Windows HTA JavaScript + HTML GUI
.net framework Microsoft Jscript.net
Jscript.net Microsoft Visual Studio.net Jscript.net
Jscript.net .net Jscript.net CLR JavaScript
.net .net framework Jscript.net
Jscript.net Microsoft
Mozilla JavaScript Microsoft Netscape
JavaScript JavaScript
JavaScript JavaScript
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
JavaScript Netscape Microsoft
JavaScript Jscript 1.1
1.1 JavaScript
JavaScript 1.0 Netscape 2
JavaScript 1.1 Array Netscape 3
JavaScript 1.2 switch ECMA
v1 Netscape 4
JavaScript 1.3 JavaScript1.2 ECMA v1 Netscape 4.5
JavaScript 1.4 Netscape
JavaScript 1.5 ECMA v3 Netscape 6
Jscript 1.0 JavaScript 1.0 IE 3
Jscript 2.0 JavaScript 1.1 IE 3
Jscript 3.0 JavaScript 1.3 ECMA v1 IE 4
Jscript 4.0
Jscript 5.0 ECMA v3 IE5
Jscript 5.5+ JavaScript 1.5 ECMA v3 IE 5.5 Jscript 5.5
IE 6 Jscript 5.6 IE 7 Jscript 5.7
1.3.2
ECMAhttp://www.ecma.ch ECMA-262 JavaScript
ECMA ECMAScript 4 http://www.mozilla.org/
js/language/es4/index.html Mozilla JavaScript 2.0
ECMAScript v4 JavaScript 2.0 1.2 ECMAScript
JavaScript 2.0
1.2 ECMAScript Mozilla JavaScript 2.0
ECMA v1 JavaScript 1.1
switch JavaScript1.3
Jscript3.0
ECMA v2
ECMA v3 switch JavaScript 1.5
Jscript 5.5
ECMA v4
JavaScript
JavaScript 2.0 JavaScript
ECMA v4 include
19
1.4
JavaScript
Web
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 JavaScript null
undefined
JavaScript
JavaScript
undefined
typeof
typeof undefined
unknown undefined JavaScript
undefined null
undefined null
JavaScript:alert(typeof(x));
JavaScript:var x;alert(typeof(x));
JavaScript:var x=null;alert(typeof(x));
1.2 undefined; void(0)
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.3 1-1 1-1 1-3
1.3 Hello World! JavaScript
<html>
<html>
<head>
<title>Example 1.3 Hello World!</title>
<script type="text/JavaScript">
<!--
function PageLoad()
{
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
}
-->
</script>
</head>
<body onload="PageLoad()">
<h1>
<noscript> JavaScript</noscript>
</h1>
<hr/>
<p> document.getElementsByTagName domcument
document.getElementsByTagName("h1")[0]<h1> </p>
</body>
</html>
1.1 1.3
body onload
1.1 1.3
1.3 onload : <body onload="PageLoad()">
PageLoad() body onload
onload onload DOM
onclick,onkeydown,onchange,onblur
13
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 JavaScript
XML
XML
XML
XML 17 XML
XML XML
URL HTTP FTP
JavaScript
JavaScript TCP/IPUDP Socket
HTTP FTP
HTTP Http Header
HTTP
JavaScript
Base64 HTTP
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
var a1 = new Object();
var a2 = new Object();
a1.x = 1, a1.y = 2;
a2.x = 3, a2.y = 4, a2.z = 5;
a1a2 C++ Java
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 = []; //
m_elements = Array.apply(m_elements, arguments);
//.
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.
var alist = new List(1,2,3);
alert(alist);
alert(alist.length);
alist.push(4,5,6);
alert(alist);
alert(alist.length);
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 //
var a = new myClass();
dwn(a.p); //undefined
dwn(a.x); //10
dwn(a.y); //20
a.x = 20;
a.z = 40;
dwn(a.x); //20
dwn(a.y); //40 // y y
delete(a.x);
delete(a.y);
dwn(a.x); //undefined x
dwn(a.y); //20 y y
dwn(a.z); //undefined
dwn(myClass.z); //30
-->
</script>
</body>
</html>
21.1
21.1
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
var obj = new ClassC();
alert(obj instanceof ClassC); //true
alert(obj instanceof ClassB); //true
alert(obj instanceof ClassA); //true
alert(obj instanceof Object); //true
21.3
object
ClassA objectA
ClassB objectB
ClassC objectC
21.3
JavaScript
--
JavaScript
prototype
21.2.2 prototype
prototype prototype JavaScript (Type)
prototype
JavaScript
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;
function LineSegment(p1, p2)
{
//
var m_firstPoint = p1;
var m_lastPoint = p2;
var m_width = {
valueOf : function(){return Math.abs(p1.x - p2.x)},
toString : function(){return Math.abs(p1.x - p2.x)}
}
var m_height = {
valueOf : function(){return Math.abs(p1.y - p2.y)},
toString : function(){return Math.abs(p1.y - p2.y)}
}
//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);
p.setPoint(0, {x:3,y:4}); // setter
dwn(p.firstPoint.x); //getter
dwn(p.getPoint(0).x);
-->
</script>
</body>
</html>
21.6
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 protoype JavaScript
protoype protoype JavaScript
prototype prototype 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 JavaScript
JavaScript
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
Dynamic Programming Language
JavaScript RubyPython CC++
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
JavaScript JavaScript Lisp
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
JavaScript:(function outerFun(x){return function innerFun(y){return x * y}})(2)(3);//innerFun x
22.4.1.3 Currying
Currying? F(x, y, z)
= 0 z = 0 F(x, y, 0) = 0 F(x, y) F
F(x, y, z) z = 0 y = f(x, z) z = 0 y = f(x, 0) y = f(x)
f f Currying
JavaScript Currying
22.7 Currying
<html>
<head>
<title>Example-22.7 Currying</title>
</head>
<body>
<script>
<!
// x+y
// Currying
function add(x, y)
{
// x,y x+y
if(x!=null && y!=null) return x + y;
// x y
else if(x!=null && y==null) return function(y)
{
// y
return x + y;
}
// x y
else if(x==null && y!=null) return function(x)
{
// x
return x + y;
}
}
// add(3,4) 3+4 7
var a = add(3, 4);
// add(2) 2+y
var b = add(2);
// y 10 2+10 12
var c = b(10);
-->
</script>
</body>
</html>
b=add(2) add() Currying x = 2 y
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 concatenate
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;
}
var ret = function(n, x, y){
// Fib
x = x || a;
y = y || b;
return Fib(n, x, y);
}
// 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;
}
}
var p1 = parabola(2,3,4); // y = 2*x^2 + 3*x + 4
alert(p1(15));
-->
</script>
</body>
</html>
JavaScript
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()
You might also like
- 漫畫分鏡教程Man Hua Fen Jing Tou Biao Xian - OranZhuDocument366 pages漫畫分鏡教程Man Hua Fen Jing Tou Biao Xian - OranZhu陳拉奇No ratings yet
- RNR全能型USB运动控制卡使用说明书Document43 pagesRNR全能型USB运动控制卡使用说明书الكترونيات يافاNo ratings yet
- Ucla Ece209as（Winter 2018）：汽车无钥匙门禁系统中继攻击 - 红帽社区Document12 pagesUcla Ece209as（Winter 2018）：汽车无钥匙门禁系统中继攻击 - 红帽社区楚云飞No ratings yet
- (全套55讲) 鱼C论坛小甲鱼Python课后题Document390 pages(全套55讲) 鱼C论坛小甲鱼Python课后题李楚楚No ratings yet
- BasicSR Tutorial v0.5Document90 pagesBasicSR Tutorial v0.5J ZhouNo ratings yet
- 像科学家一样思考PythonDocument266 pages像科学家一样思考PythonannieNo ratings yet
- php马-bypass - alin'BlogDocument15 pagesphp马-bypass - alin'BlogJsjdjs JsudjsjaNo ratings yet
- Slurm UserguideDocument76 pagesSlurm UserguidezhangleipyNo ratings yet
- (muchong.com) FDTD 经典问题集Document58 pages(muchong.com) FDTD 经典问题集sen luNo ratings yet
- Voxler (4 0 476) 帮助中的教程Document31 pagesVoxler (4 0 476) 帮助中的教程Ether KenNo ratings yet
- ansys二次开发Document60 pagesansys二次开发Amanda MartinezNo ratings yet
- CentOS7一键脚本安装WireGuard - 技术经验 - W3xueDocument1 pageCentOS7一键脚本安装WireGuard - 技术经验 - W3xueHehe PandaNo ratings yet
- 工程操作序列系統 （EOS S）的傳統系現 代 化Document33 pages工程操作序列系統 （EOS S）的傳統系現 代 化黃宇川No ratings yet
- Guia de Configuracion SoftX3000 U2900Document61 pagesGuia de Configuracion SoftX3000 U2900NoltonNo ratings yet
- 上海高级软件测试技术培训公开课Document136 pages上海高级软件测试技术培训公开课EvanYufengNo ratings yet
- SAP HANA 白皮书Document20 pagesSAP HANA 白皮书tagalhaiNo ratings yet
